当前位置：首页 > news >正文

husky+lint-staged+eslint+prettier+stylelint+commitlint

news 2025/8/22 19:32:32

概念:

husky,暴露出git的hook钩子,在这些钩子执行一些命令,
lint-staged,只在git的暂存区有修改的文件进行lint操作,执行一些校验脚本
eslint,prettier,styelint有npm包还有对应的scode插件,其中npm包是用于执行那些诸如入eslint --fix "src/**/*.{js,jsx,…}"的脚本命令,所需要的包,每次修改要都要执行一次该命令才会格式化代码,而对应的vscode插件则可以通过vscode的工作区或者用户去设置settings.json来配置保存代码时执行校验,还可以通过.editorconfig来统一编辑器的代码风格.
eslint 代码质量检查,会与prettier配置冲突,通过extends配置eslint-config-prettier,eslint-plugin-prettier来覆盖掉与prettier冲突的规则
prettier,代码美化
stylelint,格式化css,还有scss等,会与prettier冲突,通过stylelint-config-prettier配置解决prettier冲突
commitlint,配置提交信息规范

husky

yarn add husky -D

npm set-script prepare "husky install"
npm run prepare
// -c指定了lint-staged的配置文件
npx husky add .husky/pre-commit "npx lint-staged -c ./.husky/lintstagedrc.js"
npx husky add .husky/commit-msg "npx commitlint --edit $1"

lint-staged

配置文件lintstagedrc.js

在这里插入代码片module.exports = {"**/*.{js,jsx}": ["eslint --fix"],"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],"*.vue": ["prettier --write", "eslint --fix", "stylelint --fix"]
}

eslint

eslint, eslint-config-prettier, eslint-plugin-prettier(默认调用prettier的配置文件)

module.exports = {extends:[...,'eslint-config-prettier','plugin:prettier/recommended'],//这里直接使用了插件eslint-plugin-prettier的配置,plugin:开头,那么就可以不用在plugins字段声明prettier插件了}

prettier

prettier

module.exports = {printWidth: 100, // 打印宽度tabWidth: 2, // tab 宽度useTabs: false, // 使用tabsemi: false, // 分号vueIndentScriptAndStyle: false, // vue indent <script/>  <style/>singleQuote: false, // 单引号quoteProps: "as-needed", // 对象key 引号bracketSpacing: true, // 导入对象和{}之间加空格trailingComma: "none", // 尾随逗号// jsxBracketSameLine: true, // 尖括号和结尾同一行 DeprecatedbracketSameLine: true, // 尖括号和结尾同一行jsxSingleQuote: false, // jsx 中使用单引号arrowParens: "avoid", //  x=>x , (x)=>insertPragma: false, // insert <!-- @format -->requirePragma: false, // 只在@format或者@prettier 文件格式proseWrap: "never", //  prose散文是否根据printWidth 格式换行htmlWhitespaceSensitivity: "strict", // HTML空白灵敏度endOfLine: "auto" // 结尾
}

stylelint

stylelint,stylelint-config-standard,stylelint-config-prettier(冲突以prettier由主),style-order(插件),

module.exports = {extends:['stylelint-config-standard','stylelint-config-prettier'],plugins:['stylelint-order']
}

commitlint

commitlint,@commitlint/cli,@commitlint/config-conventional

commitlint.config.js

module.exports = {extends: ["@commitlint/config-conventional"],rules: {"body-leading-blank": [2, "always"],"footer-leading-blank": [1, "always"],"header-max-length": [2, "always", 108],"type-empty": [2, "never"],"scope-empty": [0],"subject-empty": [2, "never"],"subject-full-stop": [0],"type-case": [0],"scope-case": [0],"subject-case": [0],"type-enum": [2,"always",["feat", "fix", "perf", "style", "docs", "test", "refactor", "build", "ci", "chore", "revert"]]}
}

.editorconfig

# http://editorconfig.org
root = true# 说明
## 设置文件编码为 UTF-8；
## 用两个空格代替制表符；
## 在保存时删除尾部的空白字符；
## 在文件结尾添加一个空白行；
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true[*.md]
trim_trailing_whitespace = false[Makefile]
indent_style = tab