0.0.9 • Published 9 months ago
@qiuxc/eslint-config v0.0.9
eslint-config
本项目 fork 自 eslint-config-alloy
ESLint 规则不仅是一套先进的适用于 React/Vue/Typescript 项目的 ESLint 配置规范，而且也是你配置个性化 ESLint 规则的最佳参考。
快速开始
请根据你的项目使用的技术栈选择以下配置：
设计理念
使用方法
内置规则
npm install --save-dev eslint @babel/core @babel/eslint-parser @qiuxc/eslint-config在你的项目的根目录下创建一个 .eslintrc.js 文件，并将以下内容复制进去：
module.exports = {
extends: ['@qiuxc'],
env: {
// 你的环境变量（包含多个预定义的全局变量）
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 你的全局变量（设置为 false 表示它不允许被重新赋值）
//
// myGlobal: false
},
rules: {
// 自定义你的规则
},
};React
npm install --save-dev eslint @babel/core @babel/eslint-parser @babel/preset-react@latest eslint-plugin-react @qiuxc/eslint-config在你的项目的根目录下创建一个 .eslintrc.js 文件，并将以下内容复制进去：
module.exports = {
extends: ['@qiuxc', '@qiuxc/eslint-config/react'],
env: {
// 你的环境变量（包含多个预定义的全局变量）
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 你的全局变量（设置为 false 表示它不允许被重新赋值）
//
// myGlobal: false
},
rules: {
// 自定义你的规则
},
};Vue
npm install --save-dev eslint @babel/core @babel/eslint-parser vue-eslint-parser eslint-plugin-vue @qiuxc/eslint-config在你的项目的根目录下创建一个 .eslintrc.js 文件，并将以下内容复制进去：
module.exports = {
extends: ['@qiuxc', '@qiuxc/eslint-config/vue'],
env: {
// 你的环境变量（包含多个预定义的全局变量）
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 你的全局变量（设置为 false 表示它不允许被重新赋值）
//
// myGlobal: false
},
rules: {
// 自定义你的规则
},
};TypeScript
npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @qiuxc/eslint-config在你的项目的根目录下创建一个 .eslintrc.js 文件，并将以下内容复制进去：
module.exports = {
extends: ['@qiuxc', '@qiuxc/eslint-config/typescript'],
env: {
// 你的环境变量（包含多个预定义的全局变量）
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 你的全局变量（设置为 false 表示它不允许被重新赋值）
//
// myGlobal: false
},
rules: {
// 自定义你的规则
},
};TypeScript React
npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react @qiuxc/eslint-config在你的项目的根目录下创建一个 .eslintrc.js 文件，并将以下内容复制进去：
module.exports = {
extends: ['@qiuxc', '@qiuxc/eslint-config/react', '@qiuxc/eslint-config/typescript'],
env: {
// 你的环境变量（包含多个预定义的全局变量）
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 你的全局变量（设置为 false 表示它不允许被重新赋值）
//
// myGlobal: false
},
rules: {
// 自定义你的规则
},
};TypeScript Vue
建议使用 npm init vue@3 创建集成了 Vue, TypeScript 和 ESLint 的项目，然后再参考此示例调整其 ESLint 配置。
常规方法如下：
npm install --save-dev @babel/core @babel/eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript eslint @qiuxc/eslint-config eslint-plugin-vue vue-eslint-parser在你的项目的根目录下创建一个 .eslintrc.js 文件，并将以下内容复制进去：
module.exports = {
extends: ['@qiuxc', '@qiuxc/eslint-config/vue', '@qiuxc/eslint-config/typescript'],
parser: 'vue-eslint-parser',
parserOptions: {
parser: {
js: '@babel/eslint-parser',
jsx: '@babel/eslint-parser',
ts: '@typescript-eslint/parser',
tsx: '@typescript-eslint/parser',
// Leave the template parser unspecified, so that it could be determined by `<script lang="...">`
},
},
env: {
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
rules: {
// Customize your rules
//
// Please keep this rule off because it requiresTypeChecking
// https://github.com/vuejs/vue-eslint-parser/issues/104
// https://github.com/typescript-eslint/typescript-eslint/pull/5318
'@typescript-eslint/prefer-optional-chain': 'off',
},
};custom
自定义规则，结合 react 使用。
自定义规则包括：
- jsx 中的 className 禁止含有多余空格
- react 组件中的 hooks 和方法必须要有注释说明
- 导入按规则排序
npm install --save-dev eslint @babel/core @babel/eslint-parser @babel/preset-react@latest eslint-plugin-react @qiuxc/eslint-config @qiuxc/eslint-plugin eslint-plugin-simple-import-sort在你的项目的根目录下创建一个 .eslintrc.js 文件，并将以下内容复制进去：
module.exports = {
extends: ['@qiuxc', '@qiuxc/eslint-config/react', '@qiuxc/eslint-config/custom'],
env: {
// 你的环境变量（包含多个预定义的全局变量）
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 你的全局变量（设置为 false 表示它不允许被重新赋值）
//
// myGlobal: false
},
rules: {
// 自定义你的规则
},
};常见问题
在 VSCode 中使用
在 VSCode 中安装 ESLint 扩展即可。
参考这里可以对扩展进行配置。
保存时自动修复 ESLint 错误
如果想要开启「保存时自动修复」的功能，你需要配置 .vscode/settings.json：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}如何结合 Prettier 使用
eslint-config 包含所有样式相关的规则，故不需要引入 eslint-config-prettier。只需要安装 prettier 及相关 VSCode 插件即可。
eslint-config 提供了一套 Prettier 配置，你可以创建一个 .prettierrc 文件，直接复用此配置：
"@qiuxc/eslint-config/.prettierrc.js"VSCode 的一个最佳实践就是通过配置 .vscode/settings.json 来支持自动修复 Prettier 和 ESLint 错误：
{
"files.eol": "\n",
"editor.tabSize": 2,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}常用命令
# 安装依赖
pnpm i
# 构建 index.js react.js 等 eslintrc 配置
pnpm build
# 执行测试
pnpm test
# 自动修复格式错误
pnpm prettier:fix
# 检查是否覆盖了所有的规则
pnpm rulesCoverage
# 发布新版本
npm version <major|minor|patch>
git push --follow-tags
npm publish