做什么事之前要考虑的是这个东西解决了什么？为什么要使用？
- 解决了团队之间代码不规范导致的可读性差问题;
- 解决了不同编辑器导致的编码规范不统一问题；
- 及时的给出对应规范提示，并且及时修复；
当然解决这些问题，理论上来讲，口头约定，代码审查可以处理，但是无可避免的一个问题，无法把控。显然这种方式无法实时反馈，而且还造成沟通成本过高，不够灵活，随着大前端的发展，自动化，工程化的配置已经是我们不可避免的一个过程，除非你想当一条咸鱼，或者纯业务大佬。
(本文使用编辑器vscode)
初始化项目
-
初始化工程
mkdir pck-name && npm init -y -
初始化仓库
git init初始化仓库后，创建.gitignore文件并添加对应的规则,现在整个项目大概就是这样
- .npmrc
个人习惯，为这个项目来配置一下npm源，添加.npmrc文件。
EditorConfig 介绍及配置
- 介绍
EditorConfig：跨IDE编辑器，保持编码风格一致
- 添加.editorconfig
# /.editorconfig
# 顶层editorconfig文件标识
root = true
# 针对所有文件适用
[*]
indent_style = space # 缩进符使用的风格 （tab ｜ space）
indent_size = 4 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
charset = utf-8 # 编码格式
trim_trailing_whitespace = true #行开始是不是清除空格
insert_final_newline = true #文件最后添加空行
[*.md]
trim_trailing_whitespace = false
激动的心颤抖的手，建一个/src/index.js看一下效果......
这里统一说一下，vscode配置 editorconfig ，prettier， eslint 都要去插件市场下载对应的插件，其他编辑器不熟。
- vscode插件下载
装完后怎么判断自己的配置是否生效呢？
1: 根据查看当前编辑器运用的配置文件
2: 可以自行修改自己的配置文件，然后去index文件任意编辑看是否生效，有几个属性可以看上图的右下角 Spaces:4 UTF-8。
Prettier 介绍及配置
- Prettier介绍
Prettier:格式化代码（An opinionated code formatter）
- vscode插件下载
- 添加.prettierrc.js
1: 配置文件其实可以是多种数据格式的风格，yaml，json，js....但是一般考虑到可拓展性一般会使用js格式。
2: 配置文件中会有一些属性的设置跟editorconfig表达的是同一个意思，那么这个时候尽量采取相同的配置，避免设置冲突，导致格式化的时候代码格式改动较大或配置不同引发的一系列问题。
// /.prettierrc.js
module.exports = {
printWidth: 100, // 一行的字符数，如果超过会进行换行，默认为80，官方建议设100-120其中一个数
tabWidth: 4, // 一个tab代表几个空格数，默认就是2
useTabs: false, // 启用tab取代空格符缩进，默认为false
semi: true, // 行尾是否使用分号，默认为true
singleQuote: true, // 字符串是否使用单引号，默认为false，即使用双引号，建议设true，即单引号
quoteProps: 'as-needed', // 给对象里的属性名是否要加上引号，默认为as-needed，即根据需要决定，如果不加引号会报错则加，否则不加
trailingComma: 'none', // 是否使用尾逗号，有三个可选值"<none|es5|all>"
jsxSingleQuote: true, // 在jsx里是否使用单引号，你看着办
bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
}
// /.prettierignore
*.md
-
保存时格式化
1: 在项目根目录添加/.vscode/settings.json文件
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
}
查看结果！！！(也可以看右下角是否有Prettier的配置，点开它如果output是你自己写的配置就没错)
Eslint介绍及配置
- Eslint介绍
Find and fix problems in your JavaScript code（照抄吧,这里英语解释更通俗）
- vscode 插件下载
- 安装依赖
npm i eslint -D
./node_modules/.bin/eslint --init
根据自己的选择执行完后会生成一份配置文件如下（选择不同会有略微差异）因为我选择了typescript，所以还得安装一下typescript
npm i typescript -D
一般到这里一些基本的提示已经ok了，不过可能要重启一下你的编辑器
- 官网地址 + 配置 Eslint 官网地址
由于Prettier的一些功能跟ESLint会存在冲突，那么如何让他们各司其职，形成良性循环呢？
1：去对比修改ESLint跟Prettier有冲突的项， 修改对应的配置。
2: 禁用掉ESLint和Prettier的冲突项，然后用Prettier的格式化规则代替ESLint的规则。
第一种方式...enenen 看你自己了，我是比较懒的，不手写的坚决不手写。
那么这里介绍一下第二种方式
npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
修改对应的配置文件
// /.eslintrc.js
module.exports = {
...
"extends":{
...
"prettier"
},
"plugins": [
...
"prettier"
],
"rules": {
...
'prettier/prettier': 1
}
}
再回到 index.js文件中查看错误提示，会发现不满足Prettier规则的错误也会添加到lint错误中了
- 指定后缀
打开/.vscode/setting.json添加指定后缀文件被eslint识别(不被识别的文件右下角没有ESlint)
// /.vscode/setting.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.options": {
//指定vscode的eslint所处理的文件的后缀
"extensions": [".js", ".vue", ".ts", ".tsx"]
}
}
husky + lint-staged
做完上面这些，到这里我们做到了编写代码时发现并修改错误，基本上算是达到了目标的90%了，可是扛不住一些顽固份子啊，对自己的代码极度自信，改完后也懒得运行了，** 代码天下无敌！不存在bug！！！ 结果照样提交，导致远程库代码存在问题。
这个时候就该用到 husky + lint-staged 来发挥作用了，通过pre-commit的钩子来进行代码的规则验证及抛出不能自动修复的bug
注意⚠️：我这里使用husky v4版本，因为 v5 版本跟 v4 配置完全不同，而且文档我半天进不去
npm i husky@4.3.0 -D
npm i lint-staged -D
// /package.json
{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*{.ts,.js}": [
"eslint --fix ./src",
"prettier --write"
]
}
}
故意去index.js中制造一点错误
到这里整个流程已走通，至于适配vue，react等其他配置，其实都大同小异，通过不同的plugin或parse来识别不同的文件，后续有时间，或者有这个需求我也会增量更新。
