免费网站建设专业的公司,超能力联盟网站,windows优化大师好用吗,网页链接制作软件概念:
husky,暴露出git的hook钩子,在这些钩子执行一些命令,lint-staged,只在git的暂存区有修改的文件进行lint操作,执行一些校验脚本eslint,prettier,styelint有npm包还有对应的scode插件,其中npm包是用于执行那些诸如入eslint --fix src/**/*.{js,jsx,…}的脚本命…概念:
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 $1lint-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, // xx , (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
