Awesome

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

1. Select "1" to install the necessary dependencies with npm
2. Select "y" to create the .eslintrc.js file
3. Select "y" to create the .prettierrc.js file
4. Select "y" to add the lint script commands in your package.json

With Yarn

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

1. Select "2" to install the necessary dependencies with Yarn
2. Select "y" to create the .eslintrc.js file
3. Select "y" to create the .prettierrc.js file
4. Select "y" to add the lint script commands in your package.json

Set up the config manually

With npm

npm i -D eslint-config-cecilia eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsdoc eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unicorn

With Yarn

yarn add --dev eslint-config-cecilia eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsdoc eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unicorn

Create a .eslintrc.js file in your project root directory and use the extends attribute.

Paste this code to extend the ESLint ruleset:

module.exports = {
  extends: 'cecilia',
}

Optional - Override Rules

For more information, see "Configuring Rules" in the ESLint Help.

module.exports = {
  extends: 'cecilia',
  rules: {
    //
    // rules to override.
    //
  }
}

Pro tip

Check the list of available rules.

Optional - Specifying Environments

For more information, see "Specifying Environments" in the ESLint Help.

module.exports = {
  extends: 'cecilia',
  env: {
    browser: true,
    node: true,
    ...
  },
}

Create a .prettierrc.js file in your project root directory and change some rules.

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

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.

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