eslint prettier husky代码规范配置

本文基于React 项目配置，可以使用 create-react-app 。

我们为什么需要eslint?

因为每个人的代码习惯不一样，每个开发人员都需要和他人协作或者项目需要交接给下一代开发者。保持统一的代码规范，可以极大地提高效率，降低沟通和理解代码的成本。
等等

一、Eslint

Eslint 它规范的是代码偏向语法层面上的风格，比如不能使用debugger、alert、。。。

1、安装Eslint

npm install eslint --save-dev
1

2、创建 .eslintrc.js文件，会有询问问题的过程。

npx eslint --init 
1

3、.eslintrc.js 配置项

module.exports = {
	"root": true, // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
    "env": { // 运行环境配置，预设browser、es6、node、mocha等变量。这些环境并不是互斥的，所以你可以同时定义多个。
        "browser": true,
        "es6": true,
        "node": true,
    },
    "extends": [ // 扩展第三方规则，可以被基础配置中的已启用的规则继承。
        "eslint:recommended", // 集成 Eslint 中推荐的（打勾的）规则项 https://eslint.bootcss.com/docs/rules/
        "plugin:react/recommended", // 用于React的ESLint规则
        "plugin:react/jsx-runtime", // React 17 版本之后需要引入，这个解决 https://github.com/jsx-eslint/eslint-plugin-react#configuration
        /*
        	Eslint 的三大通用规则,
	        1.Google标准: eslint-config-google 
	        2.Airbnb标准: eslint-config-airbnb
	        3.Standard标准 eslint-config-standard
        */ 
        "standard" 
    ],
    "globals": { // 定义全局环境变量。
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": { // 解析器配置项, 配置 JavaScript 语言选项
        "ecmaFeatures": {
            "jsx": true // 启用 JSX
        },
        "ecmaVersion": 2018, // ECMAScript 版本
        "sourceType": "module"
    },
    "plugins": [ // 第三方插件。需要在 rules、extends 中定义后才会生效，如果没有则不生效。
        "react"
    ],
    "rules": { 
    	/**
 			修改覆盖已经使用的规则。https://eslint.bootcss.com/docs/rules/
 			off | 0 :表示关闭规则
 			warn | 1 :表示将该规则转换为警告
 			error | 2 :表示将该规则转换为错误
		*/
        "semi":  ["error", "never"],
        "no-alert": 0, // 禁止使用alert
        "no-multi-spaces": 1, // 不能用多余的空格
        "no-console": 2, // 禁止使用console
    },
    "settings": { // 自定义信息，每个规则都可以访问到
        "react": {
            "version": "detect"
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

4、eslint命令

/**
* @name 检查命令
* @description  --ext：可以指定在指定目录/文件; .js .jsx： react文件; src/：检测范围在src目录下匹配
*/
npx eslint --ext .js --ext .jsx src/
/**
* @name 修复命令（官方规则集带(扳手)图标的可以自动修复）
* @description  --ext：可以指定在指定目录/文件; .js .jsx： react文件; src/：检测范围在src目录下匹配; --fix 检测完自动修复
*/
npx eslint --fix --ext .js --ext .jsx src/
1
2
3
4
5
6
7
8
9
10

5、package.json 中配置检查命令行

每次输入eslint命令比较繁琐，可以在package.json 中配置这个脚本：

// npm run lint 或 npm run lint-fix
"scripts": {
	"lint": "eslint --ext .js --ext .jsx src/",
	"lint-fix": "eslint --fix --ext .js --ext .jsx src/",
}
1
2
3
4
5

6、配置 .eslintignore

根目录新建 .eslintignore 文件，把想要屏蔽的文件或目录名称添加上即可:

.eslintrc.js
.prettierrc.js
babel.config.js
vetur.config.js
/node_modules/
1
2
3
4
5

二、Prettier

Prettier规范的是代码偏向于排版层面上的风格，比如缩进、一行代码太长了换不换行之类的代码排版问题等

1、安装 Prettier

// --save-exact 锁死版本
npm install --save-dev --save-exact prettier
1
2

2、手动创建 .prttierrc.js文件

// 此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
    printWidth: 80, //单行长度
    tabWidth: 2, //缩进长度
    useTabs: false, //使用空格代替tab缩进
    semi: false, //句末使用分号
    singleQuote: false, //使用单引号
    arrowParens: "avoid",//单参数箭头函数参数周围使用圆括号-eg: (x) => xavoid：省略括号
    bracketSpacing: true,//在对象前后添加空格-eg: { foo: bar }
    insertPragma: false,//在已被preitter格式化的文件顶部加上标注
    jsxBracketSameLine: false,//多属性html标签的‘>’折行放置
    rangeStart: 0,
    requirePragma: false,//无需顶部注释即可格式化
    trailingComma: "none",//多行时尽可能打印尾随逗号
    useTabs: false//使用空格代替tab缩进
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3、prettier修复命令

npx prettier --write src/
1

4、package.json 中配置检查命令行

// npm run prettier
"scripts": {
	"lint": "eslint --ext .js --ext .jsx src/",
	"lint-fix": "eslint --fix --ext .js --ext .jsx src/",
	"prettier": "prettier --write src/"
}
1
2
3
4
5
6

5、配置 .prettierignore

根目录新建 .prettierignore 文件，把想要屏蔽的文件或目录名称添加上即可:

/.vscode
/dist
*.png
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
.history
CNAME
/build
/public
1
2
3
4
5
6
7
8
9
10
11
12
13

比如说上文咱们写了好多这种bug，一个一个手动修复，太麻烦了。eslint提供了一个–fix的命令行，可以实现自动修复不符合规范的代码，但是这种修复不是万能的，官网中说，有这个（扳手）🔧的图标对应的规则才是可以修复的。

6、vscode eslint 插件自动检查的好处？为什么存在eslint插件

先不考虑debugger这种只能手动修复的，在实际写代码中，更多时候遇到的是分号啦，单双引号啦这些可以被自动修复的错误，那么，我们还需要每次去手动敲npm run lint-fix嘛？那同样效率很低。现在利用vscode的eslint插件我们已经能一写完代码，就知道是否符合规范了。然而我们还想实现的是每次写完代码，按下ctrl+s保存时，它能够自动修复。
在vscode中按快捷键ctrl+shift+p，输入setting,打开setting.json
增加这段配置即可（如果未生效重启vscode）：

//配置保存时按照eslint文件的规则来处理一下代码

"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "eslint.autoFixOnSave" : true,
},
1
2
3
4

7、配置eslintignore

有些文件，我们不希望它受eslint管辖，可以在根目录新建.eslintignore文件，把想要自由的文件或目录丢进去即可：

.eslintrc.js
.prettierrc.js
babel.config.js
vetur.config.js
/node_modules/
1
2
3
4
5

三、Git hooks 工具

husky是git hooks 工具。可以防止使用 Git hooks 的一些不好的 commit 或者 push。

1、Husky

1.1、安装 Husky

// 需要注意安装对应版本。（没有效果，换个版本试试）
npm install husky --save-dev
1
2

1.2、pageage.json 配置

git commit 的时候先去执行 pre-commit 里面的命令：我们在这里输出 husky 并且执行 npm run lint (我们在上文第一章，第4点加上的验证eslint的命令)。如果eslint验证通过了，则会进行commit 操作，否则会报eslint的错误提示

"husky": {
    "hooks": {
      "pre-commit": "echo 'husky' && npm run lint"
    }
  }
1
2
3
4
5

2、lint-staged

新项目以上配置就可以了
老项目新增 Eslint 验证规则，则会执行全局检查，会发现一堆报错信息。这个就慌了。修改可能带来其他问题。
lint-staged的作用是只对 git add 缓存区的代码进行 eslint 代码规范验证。这样只会对改动的代码进行验证，其它代码不做 eslint 校验。

1、安装 lint-staged

npm install --save-dev lint-staged
1

2、package.json 中配置

"lint-staged": {
    "src/**/*.{js,jsx,vue}": [ // 执行对js jsx vue 文件验证,执行流程可以自定义，具体查看官网
      "eslint",
    ]
}
1
2
3
4
5

四、VScode编辑器集成插件

既然已经有vscode的eslint插件帮助我们自动检查和修复代码了，为什么还需要在 pakage.json 中配置eslint 命令?

因为每个开发人员使用的开发工具存在差异，就算使用同样的开发工具 vscode，我们也不能保证他安装了eslint插件。
可以使用 pakage.json 中配置的命令来检查和修复代码。因为项目中肯定需要安装eslint依赖，也肯定有我们配置的.eslintrc.js规则文件，这样依旧能保证代码的统一规范。

1、安装Eslint插件

1.1 vscode应官方市场搜索Eslint插件

vscode官方市场Eslint插件

1.2 安装完之后的效果。

（1）不规范的代码会有红色波浪线。
（2）控制台会有输出
![在这里插入图片描述](https://img-blog.csdnimg.cn/0e512c34300e436daf2650c11274bbf7.png

1.3 vscode 配置 ctrl + s 自动格式化代码

在vscode中，使用快捷键 ctrl + shift + p，搜索Settings.json，打开Settings.json文件

再settings.json 里面添加这段代码（如果未生效重启vscode或者升级一下vscode版本）。

 // 配置保存时按照eslint文件的规则来处理一下代码
 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "eslint.autoFixOnSave": true
 }
1
2
3
4
5

2、安装Prettier插件

2.1 vscode应官方市场搜索 Prettier 插件

在这里插入图片描述

2.2 vscode 配置 ctrl + s 自动格式化代码

 //prettier可以格式化很多种格式，所以需要在这里对应配置下
 "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //这个设置在ctrl+s的时候，会启用默认的格式化，这里是prettier
  "editor.formatOnSave": true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3 让 vscode 能报prettier的错

3.1 安装依赖

npm i -D eslint-plugin-prettier
1

3.2 eslintrc.js 增加配置

// .eslintrc.js
{
	"plugins": ["prettier"], // 可以忽略 eslint-plugin- 部分，直接输入 prettier
	"rules": {
	 	"prettier/prettier": "error"
	}
}
1
2
3
4
5
6
7

3.3 查看控制台同事输出 eslint 、prttier 报错