Eslint|Eslint + Prettier + VScode 规范代码风格（针对react+typescript） Eslint+Prettier+VScode规范代码风格

近期有做 eslint 统一代码风格的事情，结合自己的沉淀和网上的解决方案，分享一套针对 react + typescript的 eslint 配置方案，配置完成后可以检测代码，统一代码风格，VScode 保存自动格式化代码。
1、使用 Eslint 来规范 typescript 代码
安装依赖：

npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

这三个依赖分别是：
eslint: ESLint 的核心代码
@typescript-eslint/parser：ESLint 的解析器，用于解析typescript ，从而检查和规范 Typescript代码
@typescript-eslint/eslint-plugin：这是一个 ESLint 插件，包含了各类定义好的检测 Typescript 代码的规范
在项目根目录下新建 .eslintrc.js 文件,代码暂时如下

module.exports = { env:{//指定代码的运行环境 browser: true, node: true, }, parser:'@typescript-eslint/parser', //定义ESLint的解析器 extends: ['plugin:@typescript-eslint/recommended'],//定义文件继承的子规范 plugins: ['@typescript-eslint'],//定义了该eslint文件所依赖的插件 }

由于是 typescript 项目,所以 parser 需要配置成 @typescript-eslint/parser 才能正确检测代码。
其次 env 是配置环境，比如 console 只有在 browser 环境才存在，如果不配置的话可能会标红报错。
2、使用 Eslint 规范 React 代码
安装依赖：

npm i -D eslint-plugin-react

接着在 .eslintrc.js 中配置如下：

module.exports = { env:{ browser: true, node: true, }, parser:'@typescript-eslint/parser', extends: [ 'plugin:react/recommended' 'plugin:@typescript-eslint/recommended' ],//使用推荐的React代码检测规范 plugins: ['@typescript-eslint'], settings: {//自动发现React的版本，从而进行规范react代码 "react": { "pragma": "React", "version": "detect" } }, parserOptions: {//指定ESLint可以解析JSX语法 "ecmaVersion": 2019, "sourceType": 'module', "ecmaFeatures":{ jsx:true } }, rules: { // 可以定义react 编码规则 } }

3、结合 Prettier 规范代码
安装依赖

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

Prettier：Prettier插件的核心代码
eslint-config-prettier：解决 ESLint 中的样式规范和 Prettier 中样式规范的冲突，以 Prettier的样式规范为准
eslint-plugin-prettier：将 Prettier 作为 ESLint 规范来使用
根目录下创建 .prettierrc.js 文件，配置如下：

module.exports ={ "eslintIntegration": true, "printWidth": 150, // 每行代码长度（默认80） "tabWidth": 2, // 每个tab相当于多少个空格（默认2） "useTabs": false, // 是否使用tab进行缩进（默认false） "singleQuote": true, // 使用单引号（默认false） "semi": true, // 声明结尾使用分号(默认true) "trailingComma": "none", // 多行使用拖尾逗号（默认none） "bracketSpacing": true, // 对象字面量的大括号间使用空格（默认true） "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false） "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid） };

修改 .eslintrc.js 文件，引入 Prettier

module.exports = { env: { browser: true, node: true }, parser: '@typescript-eslint/parser', extends: [ 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier/@typescript-eslint', 'plugin:prettier/recommended', ], //使用推荐的React代码检测规范 plugins: ['@typescript-eslint'], settings: { //自动发现React的版本，从而进行规范react代码 react: { pragma: 'React', version: 'detect' } }, parserOptions: { //指定ESLint可以解析JSX语法 ecmaVersion: 2019, sourceType: 'module', ecmaFeatures: { jsx: true } }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', semi: ['error', 'always'], eqeqeq: 'off', 'linebreak-style': ['error', 'unix'], 'no-useless-call': 'off', 'space-before-function-paren': ['error', { anonymous: 'always', named: 'never', asyncArrow: 'always' }] } };

4、结合VScode
安装 VScode 插件 ESlint Prettier
然后配置 setting.json

"editor.tabSize": 2, "editor.detectIndentation": false, // 全部统一成2空格缩进 "eslint.enable": true,//是否开启vscode的eslint "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.options": {//指定vscode的eslint所处理的文件的后缀 "extensions": [ ".js", ".jsx", ".ts", ".tsx" ] }, "eslint.validate": [//确定校验准则 "javascript", "javascriptreact", "html", "typescript", "typescriptreact" ],

至此，重新启动 VScode 就能看到效果，command + s 保存文件的时候回自动补全代码。
5、兼容老项目
针对老项目中有 .js 和 .jsx 混合的文件，可以在根目录下新建 .eslintignore 配置如下：

**/*.js **/*.jsx

这样下来， eslint 就会忽略所有的 .js 和 .jsx 文件的校验。
6、使用 husky lint-staged 来控制 git 提交之前的校验
其中 husky 可以配置git 提供的钩子，比如 pre-commit pre-push 等。
lint-staged 是 git add . 之后“暂存” 状态的文件，也就是本次 git 提交的文件
安装依赖

npm i -D husky lint-staged

在 package.json 文件配置如下：

"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx,ts,tsx}": "eslint" }

这样配置好之后，在提交 git 的时候，修改的文件如果没有修复 eslint 的报错，就会无法提交。
坑："*.{js,jsx,ts,tsx}": "eslint" 这里的配置{js,jsx,ts,tsx} 逗号后面不能空格，否则匹配不到文件,逗号后面不能空格，否则匹配不到文件,逗号后面不能空格，否则匹配不到文件!!!
【Eslint|Eslint + Prettier + VScode 规范代码风格（针对react+typescript）】特殊办法：可以在后面加 --no-verify 跳过验证