My ESLint config

Features

• Sort object keys
• Sort export statements
• Sort destructure keys
• Sort TypeScript interface/enum keys
• Newline between specific blocks (Make your code look more comfortable)
• Support enable typescript-eslint for .js files
• Markdown support
• Warn only (It should be distinguished from other syntax errors)
• Fixable rules only (All errors can be automatically fixed without any mental burden)
• ...

💡 A unified sorting keys rule can save you time from worrying about the order when writing code, allowing you to focus on development itself. It can also reduce merge conflicts.

Install

pnpm add eslint @u3u/eslint-config -D

Usage

In your .eslintrc

{
  "extends": "@u3u"
}

Add lint script to package.json

{
  "scripts": {
    "lint": "eslint --fix ."
  }
}

Then you can run pnpm lint to fix all errors.

TypeScript

By default, it reads the tsconfig.json file in the project root directory.
You can use the ESLINT_TSCONFIG environment variable to specify other configuration files.

In your .eslintrc.cjs

process.env.ESLINT_TSCONFIG = 'tsconfig.json'; // Optional

/** @type {import('eslint').Linter.Config} */
module.exports = {
  extends: ['@u3u'],
};

(v2.0.0+) You can also set process.env.USE_TS_FOR_JS = 'true' in .eslintrc.cjs to enable typescript-eslint for .js files, but you need to include them in tsconfig.json, or you can use @u3u/eslint-config/disable-type-aware to disable type checking rules.

process.env.USE_TS_FOR_JS = 'true';

/** @type {import('eslint').Linter.Config} */
module.exports = {
  extends: ['@u3u'],

  // If you don't want to include them in `tsconfig.json`, you can also disable type checking rules.
  overrides: [
    {
      extends: ['@u3u/eslint-config/disable-type-aware'],
      files: ['*.js', '*.jsx', '*.cjs', '*.mjs'],
    },
  ],
};

VS Code Auto fix

In your .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  "eslint.enable": true,

  "eslint.validate": [
    "astro",
    "javascript",
    "javascriptreact",
    "json",
    "jsonc",
    "markdown",
    "mdx",
    "typescript",
    "typescriptreact",
    "vue"
  ]
}

Custom config

The default configuration consists of the following components, which you can freely combine or disable some rules.

/** @type {import('eslint').Linter.Config} */
module.exports = {
  extends: [
    '@u3u/eslint-config/base',
    '@u3u/eslint-config/import',
    '@u3u/eslint-config/regexp',
    '@u3u/eslint-config/unicorn',
    '@u3u/eslint-config/react', // Enable if `react` is detected as installed.
    '@u3u/eslint-config/ts', // Enable if `typescript` is detected as installed and `tsconfig.json` exists.
    '@u3u/eslint-config/vue', // Enable if `vue` is detected as installed.
    '@u3u/eslint-config/astro', // Enable if `astro` is detected as installed.
    '@u3u/eslint-config/json',
    '@u3u/eslint-config/md',
    '@u3u/eslint-config/mdx',
  ],

  rules: {
    // Disable sort rules
    'sort-destructure-keys/sort-destructure-keys': 'off',
    'sort-exports/sort-exports': 'off',
    'sort-keys/sort-keys-fix': 'off',
  },
};

Lint Staged

If you want to apply lint and auto-fix before every commit, you can add the following to your package.json:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix"]
  },

  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  }
}

then install them

pnpm add lint-staged simple-git-hooks -D
npx simple-git-hooks

Related

• u3u/prettier-config - My Prettier config

License

MIT License © 2023 u3u