@bassist/eslint

@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 .

Presets

This package exports some presets, which can be imported via named.

Category	Named
define	defineConfig, defineFlatConfig
JavaScript	js, jsx, imports, unicorn
Markdown	markdown
Prettier	prettier
React	react
TypeScript	typescript
UnoCSS	unocss
Vue	reactivityTransform, vue, vueLegacy

Btw: Vue support 3.x (vue) and 2.x (vueLegacy) , and the Vue rules are includes TypeScript's rules, no need to import at the same time.

e.g. import { typescript } from '@bassist/eslint'

Configuration

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

Then you can import the desired presets depending on the type of project.

// 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.

Custom Rules

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 { defineConfig, prettier, vue } from '@bassist/eslint'

export default defineConfig([
  ...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.

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