我们提供了一个 CLI 工具来帮助您设置项目,或者使用一个命令从旧配置迁移到新的平面配置
pnpm dlx @2030/eslint-config@latest
如果您更喜欢手动设置:
pnpm i -D eslint @2030/eslint-config
并在您的项目根目录中创建: eslint.config.mjs
// eslint.config.mjs
import jun from '@2030/eslint-config'
export default jun()
package.json
例如:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
将以下设置添加到您的 .vscode/settings.json
:
{
// 禁用prettier格式,使用eslint替代
"prettier.enable": false,
"editor.formatOnSave": false,
// 自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
// 在IDE中保持默认规则,但仍然会自动修复它们
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off", "fixable": true },
{ "rule": "format/*", "severity": "off", "fixable": true },
{ "rule": "*-indent", "severity": "off", "fixable": true },
{ "rule": "*-spacing", "severity": "off", "fixable": true },
{ "rule": "*-spaces", "severity": "off", "fixable": true },
{ "rule": "*-order", "severity": "off", "fixable": true },
{ "rule": "*-dangle", "severity": "off", "fixable": true },
{ "rule": "*-newline", "severity": "off", "fixable": true },
{ "rule": "*quotes", "severity": "off", "fixable": true },
{ "rule": "*semi", "severity": "off", "fixable": true }
],
// 开启eslint的语言支持
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"svelte",
"css",
"less",
"scss",
"pcss",
"postcss"
]
}
通常,您只需导入预设 jun
:
// eslint.config.js
import jun from '@jun/eslint-config'
export default jun()
就是这样。或者您可以单独配置每个集成,例如:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
/**
* 项目的类型,'lib' 为库, 默认为 'app'
* @default 默认值: 'app'
*/
type: 'lib',
/**
* 是否启用 stylistic 格式化规则
* @default 默认值: true
* @example 可选: false | { indent?: number | 'tab'; quotes?: 'single' | 'double'; jsx?: boolean; semi?: boolean; lessOpinionated?: boolean; }
*/
stylistic: {
indent: 2, // 4, or 'tab'
quotes: 'single', // or 'double'
},
/**
* 是否启用 typescript 规则
* @default 默认值: 检测是否安装typescript依赖
* @example 可选: false | true | { parserOptions: {}; files?: string[] }
*/
typescript: true,
/**
* 是否启用 vue 规则
* @default 默认值: 检测是否安装vue依赖
* @example 可选: false | true | { files?: string[]; sfcBlocks: boolean }
*/
vue: true,
/**
* 是否启用 jsx 规则
* @default 默认值: true
* @example 可选: false
*/
jsx: true,
/**
* 是否启用 react 规则
* @default 默认值: 检测是否安装react依赖
* @example 可选: false | true | { jsx?: boolean; version?: string; files?: string[] }
*/
react: true,
/**
* 是否启用 unocss 规则
* @default 默认值: false,
* @example 可选: true | { attributify?: boolean; strict?: boolean }
*/
unocss: true,
/**
* 是否启用 jsonc 规则
* @default 默认值: true
* @example 可选: false | { files?: string[] }
*/
jsonc: false,
/**
* 是否启用 yaml 规则
* @default 默认值: true
* @example 可选: false | { files?: string[] }
*/
yaml: false,
/**
* 是否启用 .gitignore 文件
* @default 默认值: true
* @example 可选: false | { ignores?: string[] }
*/
ignores: [
'**/fixtures',
// ...globs
]
})
工厂函数还接受任意数量的任意自定义配置覆盖 jun
:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun(
{
// 原始库(jun)配置
},
// 从第二个参数开始,它们是 ESLint 扁平配置,可做多个设置
{
files: ['**/*.ts'],
rules: {},
},
{
rules: {},
},
)
更高级地说,你还可以导入细粒度的配置并根据需要组合它们:
除非你确切地知道它们在做什么,否则我们通常不建议使用这种样式,因为配置之间存在共享选项,可能需要格外小心才能使它们保持一致
// eslint.config.js
import {
combine,
comments,
ignores,
imports,
javascript,
jsdoc,
jsonc,
markdown,
node,
sortPackageJson,
sortTsconfig,
stylistic,
toml,
typescript,
unicorn,
vue,
yaml,
} from '@2030/eslint-config'
export default combine(
ignores(),
javascript(/* Options */),
comments(),
node(),
jsdoc(),
imports(),
unicorn(),
typescript(/* Options */),
stylistic(),
vue(),
jsonc(),
yaml(),
toml(),
markdown(),
)
由于平面配置要求我们显式提供插件名称(而不是 npm 包名称中的强制性约定),因此我们重命名了一些插件,以使整体范围更加一致且更易于编写。
New Prefix | Original Prefix | Source Plugin |
---|---|---|
import/* |
import-x/* |
eslint-plugin-import-x |
node/* |
n/* |
eslint-plugin-n |
yaml/* |
yml/* |
eslint-plugin-yml |
ts/* |
@typescript-eslint/* |
@typescript-eslint/eslint-plugin |
style/* |
@stylistic/* |
@stylistic/eslint-plugin |
test/* |
vitest/* |
@vitest/eslint-plugin |
test/* |
no-only-tests/* |
eslint-plugin-no-only-tests |
当您想要覆盖规则或内联禁用它们时,您需要更新到新前缀:
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// eslint-disable-next-line ts/consistent-type-definitions
type foo = { bar: 2 }
某些规则将仅在特定文件中启用,例如,规则将仅在文件中启用,而规则将仅在文件中启用。如果要覆盖规则,则需要指定文件扩展名, ts/*
.ts
vue/*
.vue
:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun(
{
vue: true,
typescript: true
},
{
// 请记住在这里指定文件 glob,否则它可能导致 vue 插件处理非 vue 文件
files: ['**/*.vue'],
rules: {
'vue/operator-linebreak': ['error', 'before'],
},
},
{
// 没有 `file`,它们就是所有文件的一般规则
rules: {
'style/semi': ['error', 'never'],
},
}
)
我们还在每个集成中提供了选项,以使其更容易 overrides
:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
vue: {
overrides: {
'vue/operator-linebreak': ['error', 'before'],
},
},
typescript: {
overrides: {
'ts/consistent-type-definitions': ['error', 'interface'],
},
},
yaml: {
overrides: {
// ...
},
},
})
通过检查您的项目中是否安装了 Vue 支持,会自动检测到 Vue 支持。您还可以显式启用/禁用它:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
vue: true
})
我们对 Vue 2 的支持有限。如果你仍在使用 Vue 2,你可以通过设置为:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
vue: {
vueVersion: 2
},
})
使用外部格式化程序来格式化 ESLint 还无法支持的文件 (.css
, .html
, etc)。eslint-plugin-format
。
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
formatters: {
/**
* Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
* By default uses Prettier
*/
css: true,
/**
* Format HTML files
* By default uses Prettier
*/
html: true,
/**
* Format Markdown files
* Supports Prettier and dprint
* By default uses Prettier
*/
markdown: 'prettier'
}
})
运行 npx eslint
应该会提示你安装所需的依赖项,否则你可以手动安装它们:
npm i -D eslint-plugin-format
要启用 React 支持,你需要显式地打开它:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
react: true,
})
运行 npx eslint
应该会提示你安装所需的依赖项,否则你可以手动安装它们:
npm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
要启用 svelte 支持,您需要显式打开它:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
svelte: true,
})
运行 npx eslint
应该会提示你安装所需的依赖项,否则你可以手动安装它们:
npm i -D eslint-plugin-svelte
要启用 astro 支持,你需要显式地打开它:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
astro: true,
})
运行 npx eslint
应该会提示你安装所需的依赖项,否则你可以手动安装它们::
npm i -D eslint-plugin-astro
要启用 Solid 支持,你需要显式地打开它:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
solid: true,
})
运行 npx eslint
应该会提示你安装所需的依赖项,否则你可以手动安装它们:
npm i -D eslint-plugin-solid
要启用 UnoCSS 支持,您需要显式地打开它:
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
unocss: true,
})
运行 npx eslint
应该会提示你安装所需的依赖项,否则你可以手动安装它们:
npm i -D @unocss/eslint-plugin
此配置还提供了一些可选的插件/规则以扩展使用
command
由 eslint-plugin-command
提供支持
对于一些触发器,例如:
/// to-function
- 将箭头函数转换为普通函数/// to-arrow
- 将普通函数转换为箭头函数/// to-for-each
- 将 for-in/for-of 遍历转换为 .forEach()/// to-for-of
- 将 .forEach() 转换为 for-of/// keep-sorted
- 对对象/数组/接口进行排序例如,您可以在要转换的代码上方一行添加触发器注释(注意三斜杠):
/// to-function
const foo = async (msg: string): void => {
console.log(msg)
}
当您使用编辑器点击保存或运行 eslint . --fix
时,将转换为此格式:
async function foo(msg: string): void {
console.log(msg)
}
命令注释通常是一次性的,并且将随转换一起删除
// eslint.config.js
import jun from '@2030/eslint-config'
export default jun({
typescript: {
tsconfigPath: 'tsconfig.json',
},
})
如果要在每次提交之前应用 lint 和 auto-fix, 可以将以下内容添加到您的 package.json
中:
{
"simple-git-hooks": {
"pre-commit": "pnpm lint-staged"
},
"lint-staged": {
"*": "eslint --fix"
}
}
然后
npm i -D lint-staged simple-git-hooks
// to active the hooks
npx simple-git-hooks
我构建了一个可视化工具来帮助您查看项目中启用了哪些规则并将其应用于哪些文件, @eslint/config-inspector, 转到包含并运行以下项目的根目录 eslint.config.js
然后执行以下命令即可:
npx @eslint/config-inspector
Thanks to antfu/eslint-config for the inspiration and reference.
MIT License © 2022-PRESENT Jun2030