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

Preparation

There are major differences between ESLint Flat Config and traditional ESLint Config. Please do some preparations for your project first.

VS Code Setting

Through this setting, telling VS Code that the current project will use ESLint Flat Config, can solve the problem of VS Code reporting errors 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.

Package Setting

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.

ESLint Presets

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

@bassist/eslint

Most functionality is exported by the main package.

Category	Named
define	defineConfig, defineFlatConfig, FlatESLintConfig, Rules
JavaScript	js, jsx, imports, unicorn, importPlugin, unicornPlugin, antfuPlugin
Markdown	markdown, markdownPlugin
Prettier	prettier, prettierPlugin
React	react, reactPlugin
TypeScript	typescript, tsParser, tsPlugin
UnoCSS	unocss, unocssPlugin
Vue	vue, vueLegacy, reactivityTransform, vueParser, vuePlugin

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

For Example:

// eslint.config.js
import { defineConfig, prettier, vue } from '@bassist/eslint'

@bassist/eslint/svelte

Due to unknown conflicts with Vue rules (See #18 ), since 0.5.0, Svelte is released as a sub-package.

Category	Named
Svelte	svelte, svelteParser, sveltePlugin

For Example:

// eslint.config.js
import { defineConfig, prettier } from '@bassist/eslint'
import { svelte } from '@bassist/eslint/svelte'

Yeah, Svelte rules are includes TypeScript's rules.

In TypeScript projects, to support this import method, please check whether the moduleResolution field in tsconfig.json is set to Bundler or NodeNext .

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 .

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

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