References
内容主要是来自下面的地址结合自身工作习惯
- https://github.com/airbnb/javascript
- https://github.dev/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base
- https://github.com/scdt-china/eslint-config-scc
- https://zhuanlan.zhihu.com/p/366141969
- https://www.npmjs.com/package/eslint-prettier-config
- https://www.jianshu.com/p/2d6550a83f06 (ESLint 你可能不知道的知识点)
- https://typescript-eslint.io/rules/
- https://github.com/import-js/eslint-plugin-import
- http://eslint.cn/docs/user-guide/configuring
- https://zhuanlan.zhihu.com/p/386373956
项目说明
包含常用的 JS/TS + Node 以及
VUE
的规则验证 使用eslint-config-standard
就没有使用eslint-config-airbnb-base
eslint-config-standard
可以和 standard 对比看看
Package.json Dependencies
Package | Description |
---|---|
@typescript-eslint/eslint-plugin | 为 ESlint Rule 提供作用于 TS 源码的能力 |
@typescript-eslint/parser | 为 ESlint 提供解析 TS 源码的能力,也是 @typescript-eslint/eslint-plugin 的基础 |
confusing-browser-globals | 提供常见的全局属性,这里用在 no-restricted-globals ESlint rule 中,避免声明变量和全局变量冲突 |
eslint-config-prettier | 关掉 Prettier 中不需要或者会导致冲突的 rule,是为了解决 Prettier 和 ESlint 规则冲突的安装包之一 |
eslint-config-standard | ESLint 标准,与之常见的是 Airbnb 的,以 vue-cli 创建项目来说, 支持 Standard 、 Airbnb 、None (自定义) 三种 |
eslint-import-resolver-typescript | 为 eslint-plugin-import 提供作用于 TS 源码的能力 |
eslint-plugin-import | ESlint 关于 Import 的最佳实践集合 |
eslint-plugin-node | ESlint 关于 Node 的最佳实践(?)集合 |
eslint-plugin-prettier | 将 Prettier 像 ESlint Rules 使用,是为了解决 Prettier 和 ESlint 规则冲突的安装包之一 |
eslint-plugin-promise | ESlint 关于 Promise 的最佳实践(?)集合 |
eslint-plugin-vue | VUE 官方的关于 ESlint 的最佳实践集合 |
index.js Extends
extends
属性值可以省略包名的前缀eslint-config-
, 比如eslint-config-standard
可以直接写为extends:['standard']
Extend | Description |
---|---|
eslint:recommended | ESlint 最佳实践,启用的这些规则为规则页面中被标记为 |
plugin:@typescript-eslint/eslint-recommended | TS 下 ESlint 最佳实践; 对应 @typescript-eslint/eslint-plugin 、@typescript-eslint/parser
|
plugin:import/errors | 关于 import 的最佳实践; 对应 eslint-plugin-import
|
plugin:import/typescript | 为 eslint-plugin-import 提供 TS 能力; 对应 eslint-import-resolver-typescript
|
plugin:prettier/recommended | 为了解决 Prettier 和 ESlint 之间冲突; 对应 eslint-config-prettier 、eslint-plugin-prettier
|
eslint-plugin-vue | VUE 官方提供的 VUE ESlint 最佳实践; 对应 eslint-plugin-vue
|
VSCode
VSCode Extension
为了统一代码格式规范,以及提升代码可读性,推荐安装如下插件 下面插件安装均可以在 VScode 自身的插件管理中找到
编辑器配置,必须
- Prettier
- ESLint
- EditorConfig for VS Code
辅助检查,建议
- Code Spell Checker
- Error Lens
- indent-rainbow
- TSLint(如果不使用 TS 可以不安装)
VScode Settings
这里直接贴出对应的属性,可以在 setting 的图形化界面中显示
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript, javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
// 会覆盖掉全局的设置
// 可以针对语言设置不同的 brackets
// "editor.language.brackets": [],
// 可以指定 brackets 自定义颜色,因为默认 brackets 颜色是不开启的
// "editor.language.colorizedBracketPairs": []
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json, jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
// 以下是和 airbnb 的 eslint 保持一致
"prettier.arrowParens": "always", // 箭头函数如果只有一个参数,添加括号
"prettier.endOfLine": "lf",
"prettier.ignorePath": ".prettierignore",
"prettier.jsxSingleQuote": true,
"prettier.printWidth": 100,
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
// 行尾逗号,默认none,可选 none|es5|all
// es5 包括es5中的数组、对象
// all 包括函数对象等所有可选
"prettier.trailingComma": "all",
"prettier.useEditorConfig": false,
"prettier.useTabs": false // 插入空格而不是 tab
}
如何使用该项目
项目中安装必要依赖
yarn add @me-tool/eslint-prettier-ts-config --save-dev
#
yarn add eslint prettier husky lint-staged --save-dev
项目使用引用
ESLint
在项目的根目录下,创建
.eslintrc.js
文件
module.exports = {
extends: ['@me-tool/eslint-prettier-config'],
parserOptions: {
project: './tsconfig.json', // 如果不是 TS 项目可以忽略
},
rules: {
// 自定义规则
},
};
配置完成之后可以使用如下代码检查是否正确应用
npx eslint --print-config any_js_file
Prettier
配置文件格式优先级, Prettier 使用
cosmiconfig
支持配置文件
cosmiconfig
是一种常用的配置文件读取工具,按照下述顺序沿文件树寻找配置文件,找到则停止当同一个目录下有多个不同格式的配置文件时,Prettier 只会使用一个。
Notice
: 该项目使用 .prettierrc.js 只是为了更好的标注注释
Prettier 会按照以下优先级(从高到低)读取:
package.json 中的 `prettier` 字段
.prettierrc YAML 或 JSON 格式
.prettierrc.json
.prettierrc.yaml
.prettierrc.yml
.prettierrc.js
.prettier.config.js
.prettierrc.toml
在 package.json 中添加
prettier
字段
{
// ...
"prettier": "@me-tool/eslint-prettier-ts-config/.prettierrc.js",
}
husky
husky
主流是4.\*
和6.\*
两个版本,在 https://zhuanlan.zhihu.com/p/366786798 中有说明具体的区别和使用方式,这里只阐述6.\*
的配置
# 使用 husky 进行初始化
npx husky install
# 添加 git hooks,运行一下命令创建 git hooks
npx husky add .husky/pre-commit "npm run lint"
lint-staged
package.json
{
"scripts": {
"lint": "lint-staged"
},
"lint-staged": {
"*.ts": ["prettier --write", "eslint --fix", "git add"],
"*.js": ["prettier --write", "eslint --cache --fix", "git add"],
"*.vue": ["prettier --write", "eslint --cache --fix", "git add"],
"*.{json,md,yml,css}": ["prettier --write", "git add"]
}
}
Feature
[ ] 自动注入相应配置特别是 editor-config,这个应该放入到 @me-tool/cli 中
Tips
如何处理 ESLint 和 Prettier 的冲突问题
内容参考 https://juejin.cn/post/7012160233061482532
让
eslint
只负责代码质量检测而让prettier
负责美化呢:eslint-config-prettier
+eslint-plugin-prettier
-
eslint-config-prettier
的作用是关闭eslint
中与prettier
相互冲突的规则。 -
eslint-plugin-prettier
的作用是赋予eslint
用prettier
格式化代码的能力。
// 安装依赖
yarn add eslint-config-prettier eslint-plugin-prettier -D
// .eslintrc
{
// 其余的配置
- "extends": ["eslint:recommended", "standard"]
+ "extends": ["eslint:recommended", "standard", "plugin:prettier/recommended"]
// 其余的配置
}
关键在于新增加的 plugin:prettier/recommended
这个规则。让我们看看它具体做了什么
// node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
module.exports = {
// plugin:prettier/recommended 就是加载这个
configs: {
recommended: {
extends: ['prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error',
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off',
},
},
},
// 其他的
};
plugin:prettier/recommended
这个语法就是加载了 node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
文件导出的 configs
中的 recommended
配置项。下面解析他们分别做了什么。
-
extends: ['prettier']
: 通过eslint-config-prettier
关闭eslint
和prettier
相冲突的规则。 -
plugins: ['prettier']
: 加载eslint-plugin-prettier
,赋予eslint
用prettier
格式化文档的功能 -
'prettier/prettier': 'error'
: 让代码文件中不符合prettier
格式化规则的都标记为错误,结合vscode-eslint
插件便可以看到这些错误被标记为红色,当运行eslint --fix
命令时,将自动修复这些错误。 -
arrow-body-style
和prefer-arrow-callback
: 这两个规则在eslint
和prettier
中存在不可解决的冲突,所以关闭掉。
至此, prettier 和 eslint 便可以无冲突协作,保存时候也能自动修复并格式化代码了。