@bassist/eslint

Flat ESLint config for ESLint by @chengpeiquan .

Usage

With npm(or yarn, or pnpm):

npm install -D eslint @bassist/eslint

Yeah, this is a ESLint configuration, so you need to install ESLint at the same time.

If using TypeScript's Lint configuration, also make sure TypeScript is installed.

Requires ESLint >= 8.0.0 , and TypeScript >= 5.0.0 .

Configuration File

Create a configuration file named eslint.config.js in the root path of the project.

If using another filename (e.g. eslint.config.cjs or eslint.config.mjs), please use the --config command line option to specify your config.

Simple Usage

You can import the desired presets depending on the type of project, please remember that each config is an array, and the default export is also an array.

// eslint.config.js
import { prettier, vue } from '@bassist/eslint'
export default [...prettier, ...vue]

Yeah, the config file cannot be a file name such as .eslintrc.js or .eslintrc.json and so on, see Migration .

Next, add the "type": "module" setting and a lint script in the project's package.json.

{
  "type": "module",
  "scripts": {
    "lint": "eslint src"
  }
}

In lint script, src is your source code folder, please adjust it according to the actual situation.

You can run npm run lint to start linting the code.

Usage with type checking

If you need to adjust or add configuration, it is recommended to wrap the configuration through the defineFlatConfig of defineConfig (Alias) API to get a better configuration experience.

Remember use // @ts-check at the first line in your eslint.config.js .

// @ts-check
import { defineFlatConfig, prettier, vue } from '@bassist/eslint'

export default defineFlatConfig([
  ...prettier,
  ...vue,
  {
    rules: {
      // By default, this rule is `off`
      'vue/component-tags-order': 'error',
    },
    ignores: ['examples'],
  },
])

See eslint-define-config to learn more.

VS Code Setting

Please turn on this setting, which can solve VS Code's error reporting to eslint.config.js.

{
  "eslint.experimental.useFlatConfig": true
}

In order not to affect other irrelevant projects, it is highly recommended that this setting only take effect in the workspace, not globally. So please fill it into .vscode/settings.json.

ESLint Config

This package exports some config of ESLint, which can be imported via named.

Helpers

Helper functions and types for type checking are provided here (See: Usage with type checking).

• Define

Languages

• JavaScript (with JSX)
• TypeScript
• Markdown

Frameworks

Typescript rules are built-in when using framework presets.

• React
• Vue (v2 and v3)
• Svelte (from @bassist/eslint/svelte)
• Uno CSS

Formatters

• Prettier

Others

• Imports
• Unicorn

Note

1. ESLint lower than 8.x does not support this configuration file.
2. In ESLint 8.x, VS Code needs to enable special configuration to use this configuration file normally, see: VS Code Setting
3. The lint script no longer supports the --ext option, see: #16991 .
4. Currently this package is not friendly to CommonJS, please enable "type": "module" to support ES Module, see: Configuration .

Migration

If you want to migrate your ESLint configuration file from the eslintrc format (typically configured in .eslintrc.js or .eslintrc.json files) to the new flat config format (typically configured in an eslint.config.js file).

See: Configuration Migration Guide

Related Reading:

• Configuration Files (New)
• ESLint's new config system, Part 1: Background
• ESLint's new config system, Part 2: Introduction to flat config
• ESLint's new config system, Part 3: Developer preview

Release Notes

Please refer to CHANGELOG for details.

License

MIT License © 2023-PRESENT chengpeiquan