📦 Zero-config ESLint + Prettier setup for JS/React/Node projects.

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).

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

• 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

npm i -D eslint-config-cecilia
npx cecilia

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

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}'"
  },

  ...

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.

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 }
  }
}

• 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

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

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

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

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