现在最火的前端管理工具git。良好的代码有利于开发及项目维护。所以在commit的时候需要格式化。如果有自动格式化的工具开发起来更便利
我比较倾向于 husky
npm i husky lint-staged --save-dev
我们先安装
// prettier
npm install prettier --save-dev
// eslint 相关
npm install eslint eslint-config-airbnb eslint-plugin-vue eslint-plugin-standard eslint-plugin-promise eslint-plugin-prettier eslint-plugin-node eslint-plugin-import eslint-plugin-html eslint-plugin-compat eslint-loader eslint-friendly-formatter eslint-formatter-pretty eslint-config-standard eslint-config-prettier --save-dev
// 样式相关
npm install stylelint-config-standard stylelint-config-prettier stylelint stylelint-order stylelint-scss --save-dev
这里使用了eslint和prettier两种方式混合检测，先用eslint检测，再用prettier检查，并自动修复格式问题后提交
需要安装的插件都以完毕；
package 文件的配置
```
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"packages/*/src/**/*.js": [ // 文件夹路径
"prettier --write",
"eslint --fix",
"git add"
],
"packages/*/src/**/*.vue": [
"prettier --write",
"stylelint --fix",
"eslint --fix",
"git add"
],
"packages/*/src/**/*.{css,less,scss}": [
"prettier --write",
"stylelint --fix",
"git add"
]
},
```
此时我们还需要配置文件，来定义格式规则
1. .stylelintrc.js
```
module.exports = {
plugins: ['stylelint-order', 'stylelint-scss'],
extends: 'stylelint-config-standard',
rules: {
'at-rule-no-unknown': null,
'no-descending-specificity': null
}
}
```
2. .prettierrc.js
```
module.exports = {
// 分号
semi: false,
// 单引号
singleQuote: true,
}
```
3. .eslintrc.js
```
规则需要可自己添加
module.exports = {
root: true,
env: {
browser: true
},
extends: [
'plugin:vue/recommended',
'standard'
],
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
globals: {
'$': false,
'BMap': false
},
plugins: ['vue', 'html'],
rules: {
// js
'space-before-function-paren': 0, // 函数名与参数的空格
'camelcase': 0, // 变量必须用驼峰法
// vue
'vue/no-use-v-if-with-v-for': 0,
'vue/order-in-components': 0,
'vue/require-prop-types': 0,
'vue/no-v-html': 0,
'vue/singleline-html-element-content-newline': 0,
}
}
```
网友评论