目录

• prettier + husky
• commitlint
• stylelint
• eslint

项目地址 github.com/rootjser/es…

先建个空项目

git init
npm init -y

prettier + husky

prettier 是代码格式化工具，有两种使用方式，先说编辑器插件方式（简单说），重点是npm装包方式（推荐）

方式一：编辑器插件，如vscode插件Prettier - Code Formatter，

设置（settings.json）

全局设定

VSCode -> 首选项 -> 设置（settings.json）

或者只项目设定

项目中根目录  .vscode文件夹  ->  设置（settings.json）文件

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置编辑器的默认格式化工具为 prettier
  "editor.formatOnSave": true, // 保存的时候自动格式化
  // prettier 选项配置，也可不配用默认的
  "prettier.semi": false, // 语句末尾不添加分号
  "prettier.singleQuote": true, // 使用单引号
  "prettier.printWidth": 80, // 单行最大长度80
  "prettier.trailingComma": 'none', // 多行逗号分割语法中，最后不尾随逗号
  "prettier.bracketSpacing": true, // 在对象文字中的括号之间打印空格
  "prettier.arrowParens": 'avoid', // 在唯一的箭头函数参数周围不用包含括号
  "prettier.requirePragma": false, // 取消限制仅格式化文件顶部包含@prettier特殊注释的文件
  "prettier.proseWrap": 'preserve', // 对于markdown文件配合printWidth长度是否换行，什么都不做
  "prettier.endOfLine": 'lf', // 文件结尾统一用lf，不然windows和linux结尾方式可能不一样
}

注意：prettier 选项配置也可以在项目根目录建立.prettierrc.js，module.exports 导出，不需要prettier前缀了。

方式二：npm装包，git钩子中自动格式化

过程是：

• 装包prettier并配置规则
• 装包husky和lint-staged
• git提交代码时pre-commit钩子自动执行装包prettier并配置规则格式化

注意：后面commitlint,eslint,stylelint都依赖husky的钩子

装包prettier并配置规则

1、装包

npm install --save-dev --save-exact prettier

2、配置规则

echo module.exports={semi:false,singleQuote:true,printWidth:80,trailingComma:'none',bracketSpacing:true,arrowParens:'avoid',requirePragma:false,proseWrap:'preserve',endOfLine:'lf'}> .prettierrc.js

3、配置忽略文件

echo dist> .prettierignore

注意： npx prettier --write . 本地执行格式化

装包husky和lint-staged

注意检查node版本 ^14.13.1 || >=16.0.0

直接执行下面这句会装husky和lint-staged并配置

npx mrm@2 lint-staged

注意必须先执行上面 prettier安装，否则会报错 Cannot add lint-staged: only eslint, stylelint, prettier or custom rules are supported.

解释：

上面这一句命令相当于以下多句

npm install --save-dev husky lint-staged\
npx husky install\
npm set-script prepare "husky install"\
npx husky add .husky/pre-commit "npx lint-staged"

package.json增加节点
{ "lint-staged": { "**/*": "prettier --write --ignore-unknown" } }

husky-init 脚本的作用如下：

1. 在 package.json 中新增 husky 依赖："husky": "^8.0.0"，并在 package.json 的 scripts 中新增脚本："prepare": "husky install"；
2. 生成 .husky/_/.husky.sh 文件，以及一个简单的 hooks demo（pre-commit）；
3. 执行脚本：git config core.hooksPath .husky；这就是项目git hooks新目录执行.husky

配置完毕可以看到增加了文件配置

正常提交代码时会在pre-commit执行prettier格式化

package.json中自动增加了

"prepare": "husky install"

"lint-staged": {
    "*.{js,css,md}": "prettier --write"
}

husky 增加了pre-commit文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

解释： npx 就是在当前根目录下找node_module中找 lint-staged.cmd 文件执行，如果没有就全局目录找，没有就从服务器找

commitlint

commitlint也是依赖husky，目的是git commit -m "说明文字" 中这段说明文字，做commit-msg提交时git message格式化校验

装包

前面已经装过husky了，这里只装commitlint

npm install -D @commitlint/cli @commitlint/config-conventional

配置文件

echo 'module.exports = {extends: ["@commitlint/config-conventional"]}' > commitlint.config.js

配置commit-msg钩子

npx husky add .husky/commit-msg "npx commitlint -e"

完成了验证下

执行 git commit -m "feat: 配置完毕"，类型为build, chore, ci, docs, feat, fix, perf, refactor, reve rt, style, test

stylelint

听名字就知道，做css样式规范检查的

装包

npm install --save-dev stylelint stylelint-config-standard

配置文件

echo module.exports = {extends: ['stylelint-config-standard']} > stylelint.config.js

注意： npx stylelint "**/*.css" 本地执行验证

项目配置settings.json

// .vscode/settings.json
"stylelint.validate": ["css", "scss"],
"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
},

eslint

做代码规范检查

方式一：eslint编辑器插件方式

1、vscode安装eslint插件

2、setting.json内容改为

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "eslint.format.enable": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置编辑器的默认格式化工具为 prettier
  "editor.formatOnSave": true // 保存的时候自动格式化
}

3、可以看到编辑器中报错

方式二：npm装包方式

装包

npm install eslint --save-dev

初始化配置文件

npx eslint --init

或者搭配webpack配置eslint eslint-webpack-plugin

配置忽略文件

echo dist/*> .eslintignore

注意： npx eslint . 本地运行eslint

解决eslint和prettier格式冲突

eslint和prettier都会检查代码格式，安装eslint-config-prettier，extends:最后配置prettier,相当于用prettier来做格式化

npm i -D eslint-config-prettier

解决stylelint与prettier格式冲突

npm install --save-dev stylelint-config-prettier

echo module.exports = {extends: ['stylelint-config-standard', 'stylelint-config-prettier']} > stylelint.config.js

eslint、stylelint与prettier一起在ling-staged中使用

去掉package.json中lint-staged节点

增加lint-staged配置文件

于是，在git提交是，pre-commit会执行eslint和prettier命令

echo module.exports = {'**/*.{vue,js,jsx}': ['eslint --fix', 'prettier --write'],'**/*.{css,less,scss}': ['stylelint', 'prettier --write'],'**/*.{json,html}': ['prettier --write']} > .lintstagedrc.js

至此，完毕