Welcome to ESLint config Cecilia

ESLint configuration for my projects.

ESLint config Cecilia is an opinionated shareable ESLint config used in my JavaScript projects (Vanilla.js, React.js or Node.js).

Table of Contents

1. Goals
2. Installation
3. Credits
4. Contributing
5. Questions
6. License

Goals

• I want to use ESLint to lint my files
• I want to use Prettier to format my code
• I want to base my rules on the major configs, such as eslint-config-airbnb
• I want to keep the code clean and consistent across several projects
• I don't want to install/maintain/configure ESLint/Prettier/plugins/etc. independently in all projects

Installation

Set up the config automatically (recommended)

With npm

npm i -D eslint-config-cecilia
npx cecilia

Or with Yarn

yarn add --dev eslint-config-cecilia
yarn cecilia

1. Select "1" or "2" to install the necessary dependencies with npm/Yarn
2. Select the type of project: React (1) Node (2) Both (3) None (4)
3. Select "y" to create the eslint.config.js file
4. Select "y" to create the .prettierrc.js file
5. Select "y" to add the lint script commands in your package.json

Optional - Override Rules or Ignore Patterns

Use the eslint.config.js if you want to override, extend or add ignore patterns to the config:

// eslint.config.js
import cecilia from 'eslint-config-cecilia'

export default [
  // First block for ignores (optional, to add more ignores)
  {
    ignores: [
      '**/custom-ignored-folder/**',
    ],
  },

  // Default cecilia config
  ...cecilia,

  // Block for custom rules
  {
    rules: {
      'no-console': 'off',
      // your custom rules here
    },
  },
]

For more information, see "ESLint Config Files".

Pro tip

Check the list of available rules.

Optional - Specifying Environments

To specify environments, add a block with env:

// eslint.config.js
import cecilia from 'eslint-config-cecilia'

export default [
  ...cecilia,
  {
    env: {
      browser: true,
      node: true,
      es2023: true,
    },
  },
]

Optional - Use .prettierrc.js file to change some rules

Example:

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
}

Optional - Add scripts to the package.json file

Open the package.json file and add the following scripts entries:

  ...

  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write './**/*.{js,jsx,json}'"
  },

  ...

Usage

Run the script

yarn lint or npm run lint to lint your code.

yarn lint:fix or npm run lint:fix to lint and fix your code.

yarn format or npm run format to format your code.

Pro tip

Install ESLint and Prettier extensions for Visual Studio Code.

Debugging

If you want to check the final ESLint config used by Cecilia, run:

npx cecilia-debug

It will print the resolved config, including all extended rules and environments, like this:

{
  "extends": [
    "./rules/unicorn.js",
    "./rules/prettier.js",
    "./rules/jsdoc.js",
    "./rules/airbnb.js",
    "./rules/react-hooks.js",
    "./rules/react.js",
    "./rules/cecilia.js"
  ],
  "env": {
    "browser": true,
    "jest": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  }
}

Credits

• Linting - ESLint
• Rules base config - eslint-config-airbnb
• Code formatter config - Prettier
• Plugin - eslint-plugin-import
• Plugin - eslint-plugin-jsdoc
• Plugin - eslint-plugin-jsx-a11y
• Plugin - eslint-plugin-prettier
• Plugin - eslint-plugin-react
• Plugin - eslint-plugin-react-hooks
• eslint-plugin-unicorn
• IDE coding style - EditorConfig
• Logo gear - made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Contributing

Want to contribute? All contributions are welcome. Read the contributing guide.

Questions

If you have questions tweet me at @sandro_m_m or open an issue.

License

This project is licensed under the MIT License - see the LICENSE file for details

~ sharing is caring ~

This project helped you? Please consider giving this repository a star :star:.