prettier
一、介绍
prettier 代码格式化工具，利用prettier 的格式化可以对代码风格进行统一。对代码的美观和工整度做了把控。这样在看别人代码时不会因为格式的问题而难看懂了。
二、安装及配置
- 安装
// npm
npm install --save-dev --save-exact prettier
// yarn
yarn add --dev --exact prettier
- 配置
创建.prettierrc.js 及.prettierignore 文件
.prettierrc.js 文件参考
{
"tabWidth": 2, // 缩进长度
"useTabs": false, // 使用空格代替tab缩进
"semi": true, // 句末使用分号
"singleQuote": true, // 使用单引号
"bracketSpacing": true, // 对象前后添加空格
"jsxBracketSameLine": false, // 多属性html标签的‘>’折行放置
"arrowParens":"always", // 箭头函数只有一个参数时是否需要小括号
"trailingComma":"all",// 多行时是否携带逗号
"endOfLine":"auto", // 结尾是 \n \r \n\r auto
"printWidth": 120, // 单行最大长度
"experimentalBabelParserPluginsList": ["classProperties", "jsx", "typescript"] // 解析插件
}
三、代码格式化
- 对整个项目的文件做格式化
npx prettier —write .
2. 对指定的文件做格式化 (文件路径)
npx prettier --write ./xxx.js
四、安装插件
如果我们想在 ctrl + s 的时候就对代码进行格式化，那么怎么做呢，就需要安装 Prettier 的插件
然后在vscode 的setting 中设置自动保存就可以了。
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
eslint
一、介绍
ESLint 是一个开源的 JavaScript 代码检查工具。
- 对代码规范进行统一
2 . eslint 可以在开发过程中过滤一些低级的bug。 比如：
eslint 在开发中帮我们规避这些问题
二、 安装
npm install eslint -D
三、配置
初始化配置文件，配置文件的类型可以是：.js、.yml、json 等
npx eslint —init
初始化后的配置文件：
module.exports = {
"env": { // 环境，多个环境可共存
"browser": true,
"es2021": true
},
"extends": "eslint:recommended", // 扩展配置，规则合并
"parserOptions": {
"ecmaVersion": "latest", // 指使用的 ECMAScript 版本
"sourceType": "module" //"script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
},
"plugins":[],// 配置需要用到的Lint插件
"rules": { // 配置自定义规则
}
}
配置团队的代码规则：
可以参照 airbnb团队 的js 规范，然后制定适合自己团队的规则，附上参考链接：
eslint rules: eslint.org/docs/rules/
prettier rules: github.com/prettier/es…
airbnb rules:
eslint-config-alloy：github.com/AlloyTeam/e…
四、使用
校验单个文件
npx eslint ./xxx.js
校验整个文件夹
npx eslint src
校验并修复某个文件 加上 —fix 属性
npx eslint --fix src
借用vscode 插件 自动修复，可以在保存的时候对代码进行修复
安装 Eslint 插件，并在vscode setting 中开启保存是自动修复
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true, // 保存时自动修复
},
"eslint.validate": ["javascript", "jsx"], //需要检测的语言
}
四、解决eslint 和 prettier 冲突
- 安装 eslint-plugin-prettier
npm install eslint-plugin-prettier -D
- 在 eslint 中配置 prettier 插件
"extends": ["prettier"]
"rules": {
"prettier/prettier": "error"
}
// 或者
{
"extends": ["plugin:prettier/recommended"]
}
stylelint
一、安装：
npm install stylelint-config-standard stylelint -D
- 配置 .stylelintrc.js 文件
module.exports = {
extends: ['stylelint-config-standard'],
rules:{ // 设置自定义规则
'selector-class-pattern': null,
'no-descending-specificity': null,
'font-family-no-missing-generic-family-keyword': null,
'selector-pseudo-class-no-unknown': null,
indentation: 2,
'unit-case': null,
'color-hex-case': 'upper',
'color-hex-length': 'long',
'rule-empty-line-before': 'never',
'block-opening-brace-space-before': 'always',
'property-no-unknown': null,
'no-empty-source': null,
}
}
commit 限制提交信息规范
安装
npm install -g @commitlint/cli @commitlint/config-conventional
@commitlint/config-conventional 这是一个规范配置,标识采用什么规范来执行消息校验, 这个默认是Angular 的提交规
- build：打包配置修改
- ci：集成流程修改
- docs：文档相关修改
- feat：新功能添加
- fix：bug修改
- perf：性能优化
- refactor：重构代码
- revert：代码回滚
- style：格式修改
- chore：其他修改
提交格式：
git commit -m [optional scope]:
husky
git 工作流hook 配置。在git 命令之前做一些自定义配置，如在提交前检查代码规范，样式规范或单元测试等。可以借助eslint 逐次修改代码的格式和规范。
安装
npm install husky -D
安装完husky 会默认创建 .husky 文件夹 ，使用以下命令在.husky文件夹中创建chook校验执行脚本
// 添加pre-commit勾子
npx husky add .husky/pre-commit "npx lint-staged --allow-empty $1"
// 添加commit-msg勾子
npx husky add .husky/commit-msg "npx commitlint --edit $1"
package.json 中添加 husky
**"lint-staged": {
"src/**/*.js": [
"eslint --fix"
],
"src/**/*.less": [
"stylelint --fix"
]
},**
"husky": {
"hooks": {
"commit-msg": "commitlint -e HUSKY_GIT_PARAMS",
"pre-commit": "lint-staged"
}}
这样就可以在每次提交的时候做代码及commit 信息的校验了。
参考文章：
