Ultimate ESLint + Prettier setup

ultimate_eslint.md

The Ultimate ESLint and Prettier setup

Featuring:

• TypeScript support
• Prettier auto-formatting
• auto-removal of unused imports
• auto-sorting of all imports
• auto-consolidation of imports

Install deps

yarn add -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort eslint-plugin-unused-imports

Add .eslintrc.js

module.exports = {
  env: { browser: true, node: true },
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
    'import',
    'simple-import-sort',
    'unused-imports',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:import/typescript',
  ],
  rules: {
    // these rules are all dumb
    '@typescript-eslint/no-namespace': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-empty-interface': 'off',

    // no duplicates
    'no-duplicate-imports': 'off', // use import/no-duplicates instead
    'import/no-duplicates': 'warn', // capable of consolidating imports

    // import sorting
    'sort-imports': 'off', // we use eslint-plugin-import instead
    'simple-import-sort/imports': 'warn',
    'simple-import-sort/exports': 'warn',

    // remove unused imports
    '@typescript-eslint/no-unused-vars': 'off', // not capable of autofix
    'unused-imports/no-unused-imports': 'warn',
  },
};