ESLint + Prettier + husky + Lint
目前在多人项目开发时发现很多代码不规范的地方，因为每个项目都是多人维护，再加上各种历史代码的不同风格，这些情况很容易就造成了代码规范落地难，项目中出现大量低质量代码，代码格式难统一。
所以采用eslint+husky+prettier+lint-staged+commitlint这几个工具能够有效解决上述问题。
一.示例
1.如下图，由于pre-commit钩子捕获到eslint报错，所以会阻止commit提交
image
2.下面两图代码格式问题，多行空格，句尾无分号，双引号，看看提交后如下，husky会监听到pre-commit钩子，在 commit 之前，将暂存区的内容做一次 代码检查 和 代码美化，然后再添加到暂存区；然后再 commit
commit前：(多行空格，句尾无分号，双引号)
image
commit后: (完美格式化)
image
3.commitlint校验你的commit信息，提供多种共享配置
错误写法:
image
正确写法:
image
二.配置
安装依赖
npm install -D eslint prettier husky lint-staged@8 @commitlint/config-conventional @commitlint/cli eslint-config-prettier
1.eslint
参考官方文档配置好 .eslintrc .eslintignore文件
2.prettier
参考官方文档配置好 .prettierrc .prettierignore文件
3.husky
定义 ---> 是一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .git/ 目录下增加相应的钩子；比如 pre-commit 钩子就会在你执行 git commit 的触发。我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。
开始如下配置：
npx husky install
为了在安装后自动启动 Git hooks，package.json 需要添加 prepare 脚本：
{
"scripts": {
"prepare": "husky install"
}
}
做完以上工作，就可以使用 husky 创建一个 hook 了:
npx husky add .husky/pre-commit "npx lint-staged"
脚本如下：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
4.lint-staged
定义 ---> 是一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具；这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了，可能导致项目改动很大。所以这个 lint-staged，对团队项目和开源项目来说，是一个很好的工具，它是对个人要提交的代码的一个规范和约束。
此时我们已经实现了监听 Git hooks，接下来我们需要在 pre-commit 这个 hook 使用 Lint-staged 对代码进行 prettier 的自动化修复和 ESLint 的检查，如果发现不符合代码规范的文件则直接退出 commit。
并且 Lint-staged 只会对 Git 暂存区(git add 的代码)内的代码进行检查而不是全量代码，且会自动将 prettier 格式化后的代码添加到此次 commit 中。
开始如下配置：
在 package.json 中配置:
"lint-staged": {
"miniapp/**/*.{js,sjs,ts,tsx}": [
"prettier --write",
"eslint --fix --ext .js"
],
"miniapp/**/*.{css,less}": "prettier --write"
}
上面的配置是指对 js,sjs,ts,tsx进行 prettier 格式化，然后执行 eslint。对样式文件只需要 prettier 就足够了。
5.commitlint
定义 ---> 就是校验你的commit信息的，提供多种共享配置
开始如下配置：
添加commit-msg脚本
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
脚本如下：
#!/bin/sh
"$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"
然后生成配置文件commitlint.config.js，当然也可以是 .commitlintrc.js
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
常用的type类别如下：
-
upd：更新某功能（不是 feat, 不是 fix）
-
feat：新功能（feature）
-
fix：修补bug
-
docs：文档（documentation）
-
style： 格式（不影响代码运行的变动）
-
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
-
test：增加测试
-
chore：构建过程或辅助工具的变动
例如：
git commit -m 'feat(husky): 增加 xxx 功能'
git commit -m 'bug(husky): 修复 xxx 功能'
5.配合vscode插件配套使用
vscode安装eslint插件
在setting.json中配置：
{
"workbench.iconTheme": "vscode-icons",
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"explorer.confirmDragAndDrop": false,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"beautify.config": "",
"eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件
"eslint.validate": [
"javascript", // 用eslint的规则检测js文件
{
"language": "vue", // 检测vue文件
"autoFix": true // 为vue文件开启保存自动修复的功能
},
{
"language": "html",
"autoFix": true
},
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"javascript.updateImportsOnFileMove.enabled": "never",
"eslint.codeAction.disableRuleComment": {},
"editor.tabSize": 4,
"editor.detectIndentation": false,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"window.zoomLevel": 0,
"diffEditor.ignoreTrimWhitespace": false,
"terminal.integrated.rendererType": "dom",
"eslint.codeAction.showDocumentation": {
},
"eslint.migration.2_x": "off",
}
