原理
- 使用 eslint 检查代码
- 使用 prettier 作为 eslint 的插件来格式化代码
安装 VSCode 插件
直接通过商店安装即可,这里附上官网链接:
项目中的配置
配置 ESLint
-
安装
eslint
、prettier
、babel-eslint
、eslint-plugin-react
、eslint-plugin-react-hooks
以及与 prettier 相关的扩展eslint-plugin-prettier
和eslint-config-prettier
npm install --save-dev babel-eslint eslint eslint-plugin-react prettier eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier
-
规则方面有很多,各家有各家的规则,如
airbnb
、Google
等。这里以企鹅家的为例:https://github.com/AlloyTeam/eslint-config-all-alloynpm install --save-dev eslint-config-alloy
-
在项目根目录创建文件
.eslintrc
,下面是我自己的默认配置://.eslintrc { // 使用babel-eslint作为解释器 "parser": "babel-eslint", "parserOptions": { "sourceType": "module", "allowImportExportEverywhere": false, "codeFrame": false }, // alloy是企鹅家的eslint规则扩展 // plugin:prettier/recommended是集成prettier的扩展 "extends": ["alloy", "alloy/react", "plugin:prettier/recommended"], "plugins": ["react"], // 运行环境 "env": { "browser": true, "jest": true }, // 这里可以自定义 "rules": { "max-len": ["error", { "code": 100 }], "prefer-promise-reject-errors": ["off"], "react/jsx-filename-extension": ["off"], "react/prop-types": ["warn"], "no-return-assign": ["off"] } }
配置 Prettier
一些与样式相关的规则(比如 tab 长度、分号等)直接用Prettier
来处理
在项目根目录创建.prettierrc
,下面是我的一份简单的默认配置:
//.prettierrc
{
"printWidth": 100,
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
VSCode 的 Workspace 配置
{
...
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true
...
}
在 VSCode 中,默认 ESLint 并不能识别 .vue
、.ts
或 .tsx
文件,所以需要做如下配置:
{
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"typescript",
"typescriptreact"
]
}
如果需要针对 .vue
、.ts
和 .tsx
文件开启 ESLint 的 autoFix,则需要如下配置:
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]
}
可能遇到的问题
1. ESLint 和 Prettier 冲突
在前面的命令中我已经做了处理了
官方给了很好的解决办法:https://prettier.io/docs/en/integrating-with-linters.html
eslint-plugin-prettier
exposes a recommended configuration that configures botheslint-plugin-prettier
andeslint-config-prettier
in a single step. Add botheslint-plugin-prettier
andeslint-config-prettier
as developer dependencies, then extend the recommended config:yarn add --dev eslint-config-prettier eslint-plugin-prettier
Then in
.eslintrc.json
:{ "extends": ["plugin:prettier/recommended"] }
2. VSCode 中 Prettier 插件报错
暂时我还没解决… 但是貌似不影响正常格式化使用。
发表评论