eslint-config-torchbox

Shareable ESLint config following Torchbox’s code style

Usage no npm install needed!

<script type="module">
  import eslintConfigTorchbox from 'https://cdn.skypack.dev/eslint-config-torchbox';
</script>

README

eslint-config-torchbox ESLint

eslint-config-torchbox on npm Build status

Shareable ESLint config following Torchbox’s code style.

Usage

Install the config along with its peer dependencies:

# npm v7:
npm install --save-dev eslint-config-torchbox@latest
# npm v6 and below:
npx install-peerdeps --dev eslint-config-torchbox@latest

Then configure ESLint to use this config. As a .eslintrc.js in the root of your project:

module.exports = {
  // See https://github.com/torchbox/eslint-config-torchbox for rules.
  extends: 'torchbox',
};

Tips

  • Use ESLint’s --report-unused-disable-directives flag to ensure you do not use more eslint-disable comments than needed.
  • This config is Prettier-compatible, but it is still usable by projects which do not wish to use Prettier.
  • We recommend using a .eslintignore so ESLint can be targeted at all files, with a blacklist of files to ignore.
  • If relevant, use ESLint’s overrides feature to make it more permissive for certain files – for example Storybook stories or unit tests, where code standards are different.

Here’s a package.json run script and an ignore file to get you started:

"lint:js": "eslint --report-unused-disable-directives .",

.eslintignore (adapt to your project):

.git
node_modules
coverage
static_compiled
venv

Note the point of the ignore file isn’t just to determine which JS files we don’t want to be linted, but also speed up linting by excluding large folders.

Here is an example of using overrides to disable a few specific rules for stories:

module.exports = {
  // […]
  overrides: [
    {
      files: ['*.stories.tsx'],
      rules: {
        // Don’t mandate typing for Storybook stories.
        '@typescript-eslint/explicit-module-boundary-types': 0,
        '@typescript-eslint/explicit-function-return-type': 0,
      },
    },
  ],
};

TypeScript

This config doesn’t include TypeScript support out of the box. We can install and configure a TypeScript parser and ESLint plugin to make it compatible. Here is how to proceed:

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

And update your ESLint configuration to:

module.exports = {
  // See https://github.com/torchbox/eslint-config-torchbox for rules.
  extends: 'torchbox',
  // Using Babel parser for experimental syntax
  parser: 'babel-eslint',
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      extends: [
        'torchbox',
        'plugin:import/typescript',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
      ],
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      rules: {
        'react/jsx-filename-extension': [
          2,
          // Allow mixed JSX in JavaScript files.
          { extensions: ['.js', '.tsx'] },
        ],
        'import/extensions': [
          2,
          'always',
          {
            ignorePackages: true,
            pattern: {
              js: 'never',
              jsx: 'never',
              ts: 'never',
              tsx: 'never',
            },
          },
        ],
      },
    },
  ],
};

As of ESLint v6, you will also need to tell ESLint to parse TypeScript files with the --ext flag:

eslint --report-unused-disable-directives --ext .js,.jsx,.ts,.tsx .

Note that the TypeScript-friendly rules included in the config above aren’t as strict as our baseline config. To bridge this gap, consider using --max-warnings 0 to treat all warnings as errors:

eslint --max-warnings 0 --report-unused-disable-directives --ext .js,.jsx,.ts,.tsx .

React

This config is meant first and foremost for React projects, where it will detect which rules to apply based on the version of React used on the project. The config can also be used on non-React projects – just make sure to disable the version check by adding: the following in your config:

module.exports = {
  // [...]
  settings: {
    // Manually set the version to disable automated detection of the "react" dependency.
    react: { version: 'latest' },
  },
};

Vue

We do not include linting for Vue out of the box. Have a look at the eslint-plugin-vue user guide, in particular:

  1. Choose the right predefined configuration based on the Vue version and desired level of strictness
  2. Use the --ext flag to lint .vue files.
  3. Make sure pre-commit hooks are configured to run ESLint on .vue files.
  4. If using a custom parser (for example TypeScript’s), make sure to set it up alongside vue-eslint-parser as documented.

Experimental syntax

By default, this config uses ESLint’s built-in parser, which doesn’t support experimental ECMAScript features. If your code uses experimental syntax transpiled with Babel, make sure to set the ESLint parser to babel-eslint:

module.exports = {
  // See https://github.com/torchbox/eslint-config-torchbox for rules.
  extends: 'torchbox',
  // Support non-standard, experimental JS features that Babel knows how to process.
  parser: 'babel-eslint',
};

What’s included

See config.js for the config definition, and semver.test.js.snap for the whole set of rules and settings.

Extends

Custom rules

Inherited rules

Contributing

See the contribution guidelines for guidance and setup instructions.