typescript-eslint

ESLint integration

Disabling problematic rules

A handful of ESLint rules are not compatible with the TypeScript plugin, or they cause serious performance degradation, and should be disabled entirely. According to the official typescript-eslint.io documentation, most of these rules come from the eslint-plugin-import plugin.

.eslintrc.js

module.exports = {
  // ...
  rules: {
    'import/default': 'off',
    'import/named': 'off',
    'import/namespace': 'off',
    'import/no-cycle': 'off',
    'import/no-deprecated': 'off',
    'import/no-named-as-default': 'off',
    'import/no-named-as-default-member': 'off',
    'import/no-unused-modules': 'off',
  },
};

Running from the command line

Running within editors

ESLint

Use the dbaeumer.vscode-eslint extension. Too avoid poor performance, do not use ESLint for formatting code (via the eslint-plugin-prettier plugin or something similar), and only use it for linting. The difference in speed is comparable to 100ms vs 2000ms.

.vscode/settings.json

{
  // Automatically run all linting fixes on save as a concurrent code action,
  // and avoid formatting with ESLint. Use another formatter, like Prettier.
  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
  "eslint.format.enable": false,

  // If linting is *too slow* while typing, uncomment the following line to
  // only run the linter on save only.
  // "editor.run": "onSave",

  // Your package manager of choice.
  "eslint.packageManager": "yarn",

  // Use the newer and more performant `ESLint` class implementation.
  "eslint.useESLintClass": true,

  // List of directories that that linter should operate on.
  "eslint.workingDirectories": [{ "pattern": "apps/*" }, { "pattern": "packages/*" }]
}

Prettier

Use the esbenp.prettier-vscode extension.

.vscode/settings.json

{
  // Use Prettier as the default formatter for all file types. Types not
  // supported by Prettier can be overridden using bracket syntax, or ignore files.
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}