安装的插件
image.png
安装的依赖
全局安装的依赖 ：commitizen
image.png
项目结构及配置文件
image.png
配置文件说明
- .vscode/setting.json : 该配置的优先级高于vscode全局的setting.json
- 二个忽略文件，.eslintignore和.prettierignore。其中的如下配置无效，愿意待摸索。
!/src //忽略src目录之外的文件的规范检查
配置步骤
配置git全局配置
对于设置end_of_line为 lf 的项目，需要设置全局core.autocrlf，否则拉下来的项目默认会使用CRLF
git config --list --global 查看配置
git config --global set core.autocrlf false
配置EditorConfig
如果setting.json中打开了 Use Editor Config 开关，则prettier会解析项目根目录下的.editorconfig文件，支持的配置有：
- end_of_line
- indent_style
- indent_size/tab_width
- max_line_length
.editorconfig
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
# Tab indentation
[*]
indent_style = tab
trim_trailing_whitespace = true
# The indent size used in the `package.json` file cannot be changed
# https://github.com/npm/npm/pull/3180#issuecomment-16336516
[{*.yml,*.yaml,package.json}]
indent_style = space
indent_size = 2
end_of_line = crlf
配置prettier
https://prettier.io/playground
npm install prettier -D
$ .prettierrc
{
"arrowParens": "always",
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "none",
"useTabs": false,
"vueIndentScriptAndStyle": false
}
$ .vscode/setting.json
{
// 指定哪些文件不参与搜索
"search.exclude": {
"**/node_modules": true,
"dist": true,
"yarn.lock": true
},
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
配置eslint
安装eslint
npm install eslint -D
生成.eslintrc.js文件
npx eslint --init
Which style guide do you want to follow? 选择了Airbnb
会根据选择安装一些依赖,包括eslint-config-airbnb-base。
.eslintrc.js extends字段，默认使用的就是图片中配置的规则
// 使用aribnb-base的eslint规则,优先级比rules中低
// https://github.com/prettier/eslint-config-prettier
// 将prettier加在最后-Turns off all rules that are unnecessary or might conflict with Prettier.
extends: ['airbnb-base', 'prettier'],
image.png
$ .eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true
},
// 使用aribnb-base的eslint规则,优先级比rules中低
// https://github.com/prettier/eslint-config-prettier
// 将prettier加在最后-Turns off all rules that are unnecessary or might conflict with Prettier.
extends: ['airbnb-base', 'prettier'],
// extends: ['eslint:recommended'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
plugins: ['@typescript-eslint'],
settings: {
'import/resolver': {
node: {
extensions: ['.ts', '.js', '.tsx', '.jsx', 'json']
}
},
'import/extensions': ['.ts', '.js', '.tsx', '.jsx', 'json'],
'import/newline-after-import': 'off'
},
rules: {
quotes: ['off', 'any', { avoidEscape: true }],
'no-unused-vars': [
'off',
{ vars: 'all', args: 'after-used', ignoreRestSiblings: true }
],
'linebreak-style': ['error', 'windows'],
// 0 = off, 1 = warn, 2 = error
'import/prefer-default-export': 'off',
'import/extensions': [
'off',
'ignorePackages',
{
ts: 'never',
js: 'never',
mjs: 'never',
jsx: 'never'
}
],
'import/no-unresolved': [
'off',
{ commonjs: true, caseSensitive: true }
],
// 最后一行的逗号
'comma-dangle': ['error', 'never'],
'max-len': [
'error',
100,
2,
{
ignoreUrls: true,
ignoreComments: true,
ignoreRegExpLiterals: true,
ignoreStrings: true,
ignoreTemplateLiterals: true
}
],
'class-methods-use-this': ['off'],
'no-tabs': 'off',
'no-use-before-define': [
'off',
{ functions: true, classes: true, variables: true }
],
'no-useless-return': 'off',
'no-empty': 'off',
'max-classes-per-file': ['off', 5],
'no-console': 'off',
'no-shadow': 'off',
'no-new': 'warn',
'no-empty-function': 'off'
}
};
配置解决prettier 和 eslint冲突
npm install eslint-config-prettier -D
https://github.com/prettier/eslint-config-prettier
在.eslintrc.js 文件的extends 字段的最后添加prettier
extends: ['airbnb-base', 'prettier']
配置自动fix代码不规范问题
$ .vscode/setting.json 中添加如下配置
//eslint
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
"typescript.tsdk": "./node_modules/typescript/lib", // 代替 vscode 的 ts 语法智能提示
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
提交规范配置
参考网站
http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html
https://github.com/commitizen/cz-cli
https://dev.to/typicode/what-s-new-in-husky-5-32g5
https://typicode.github.io/husky/#/?id=migrate-from-v4-to-v6
// husky安装4.0的版本，后面的husky配置和版本对应，5.0之后的配置不同
npm install @commitlint/cli @commitlint/config-conventional husky@4.0.0-D
npm install -g commitizen
$ .commitlintrc.js
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'build',
'ci',
'chore',
'docs',
'feat',
'fix',
'perf',
'refactor',
'revert',
'style',
'test',
'anno'
]
]
}
};
$ .huskyrc.json
{
"hooks": {
"pre-commit": "npm test",
"commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS"
}
}
提交规范,建议使用如下命令:
git cz
若手动提交,则格式如下: 注意冒号前没有空格,冒号后有空格,refactor 是前缀,需是有效字段.
refactor: 代码规范&提交规范
commit-msg 的有效前缀在如下文件：
./commitlintrc.js 文件中
下一期：整理通用的规范发布npm包。使得在新项目中执行 init命令配置完成。
网友评论