@exodus/eslint-config

@exodus/eslint-config

Config for eslint to use in Exodus projects

Development

For any addition or changes to the existing corpus of rules, please refer to the instructions in the pull request template.

Release

Any PR merged to master will be automatically versioned and published using semantic release. Therefore it is important that you stick to the conventional commits specification when writing your commit messages.

Usage

The config offers a few different flavors depending on your use-case:

Javascript

Config for vanilla JS projects

Use yarn add --dev @exodus/eslint-config eslint to install the required dependencies and the snippet below to initialize your .eslintrc.js

// .eslintrc.js
module.exports = {
  extends: ['@exodus/eslint-config/javascript'],
  // ... customization
}

Javascript with Babel

Config for JS projects using Babel.

Use yarn add --dev @exodus/eslint-config eslint @babel/eslint-parser to install the required dependencies and the snippet below to initialize your .eslintrc.js

// .eslintrc.js
module.exports = {
  extends: ['@exodus/eslint-config/javascript-babel'],
  // ... customization
}

Javascript with React

Config for JS projects using React and Babel.

Use

  yarn add --dev @exodus/eslint-config eslint \
            @babel/eslint-parser \
            @babel/preset-react \
            eslint-plugin-react \
            eslint-plugin-react-hooks

to install the required dependencies and the snippet below to initialize your .eslintrc.js

// .eslintrc.js
module.exports = {
  extends: ['@exodus/eslint-config/javascript-react-babel'],
  // ... customization
}

Typescript

Use

  yarn add --dev @exodus/eslint-config eslint \
            @typescript-eslint/parser \
            @typescript-eslint/eslint-plugin \
            eslint-import-resolver-typescript

and the snippet below to initialize your .eslintrc.js

// .eslintrc.js
module.exports = {
  extends: ['@exodus/eslint-config/typescript'],
  // ... customization
}

Typescript with React

Use

  yarn add --dev @exodus/eslint-config eslint \
            @typescript-eslint/parser \
            @typescript-eslint/eslint-plugin \
            eslint-plugin-react \
            eslint-import-resolver-typescript \
            @exodus/eslint-plugin-react-hooks

to install the required dependencies and the snippet below to initialize your .eslintrc.js

// .eslintrc.js
module.exports = {
  extends: ['@exodus/eslint-config/typescript-react'],
  // ... customization
}

Typescript and Javascript

Use

  yarn add --dev @exodus/eslint-config eslint \
            @typescript-eslint/parser \
            @typescript-eslint/eslint-plugin \
            eslint-import-resolver-typescript

and the snippet below to initialize your .eslintrc.js

// .eslintrc.js
module.exports = {
  overrides: [
    {
      files: ['*.{ts,tsx}'],
      extends: ['@exodus/eslint-config/typescript'],
    },
    {
      files: ['*.{js,jsx}'],
      extends: ['@exodus/eslint-config/javascript'],
    },
  ],
}

Suppressing Current Violations

When adding a new rule, you can capture the tech debt of fixing current violations by first whitelisting them with // eslint-disable-next-line <ruleName>. To generate these comments for an entire project, use our fork of suppress-eslint-errors:

# assuming you installed the tool globally
suppress-eslint-errors ./src/ --extensions=js,jsx --rules="no-restricted-imports"

This will generate comments of the form:

// eslint-disable-next-line no-restricted-imports -- TODO: Fix this the next time the file is edited.

For non-tech-debt exceptions to a rule, you can remove the TODO line.

Inspiration

• 10up
• Airbnb