目前已集成为vue-cli-plugin，可以直接使用自动化配置，无需手动配置。
--以下正文--
以往在使用eslint对代码进行规范的时候，经常遇到校验与自动化格式化规则不同的问题，比如eslint中规定末尾必须使用分号，那么你开发工具中代码美化插件也需要配置相应的格式化规则，这是比较麻烦的，所以standard规范太霸道了，大家开发基本都不会去用。
这里我们使用别的团队封装好的车轮，他们去掉了eslint中的代码风格的校验，只专注于代码逻辑的校验，而代码美化部分则交给了prettier来做，这样就避免了上述冲突。
首先安装
yarn add eslint-config-alloy -Dvue2:
yarn add eslint-config-alloy@3 -D安装eslint校验以及vue工具:
yarn add eslint babel-eslint vue-eslint-parser eslint-plugin-vue -D安装typescript支持:
yarn add typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin -D根目录创建：.eslintrc.js
module.exports = {
extends: ['alloy', 'alloy/vue', 'alloy/typescript'],
env: {
// 你的环境变量（包含多个预定义的全局变量）
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 你的全局变量（设置为 false 表示它不允许被重新赋值）
//
// myGlobal: false
},
rules: {
// 自定义你的规则，这里我把以前tslint的规则直接搬过来了，还没排查未生效项
'no-empty': false,
'only-arrow-functions': [false, 'allow-declarations', 'allow-named-functions'],
quotemark: [false, 'single'],
indent: [true, 'spaces', 2],
'interface-name': false,
'ordered-imports': false,
'object-literal-sort-keys': false,
'no-consecutive-blank-lines': false,
semicolon: false,
'max-line-length': false,
'prefer-for-of': false,
'trailing-comma': false,
'arrow-parens': false,
'no-console': false,
},
}根目录创建 .vscode/settings.json （这是为项目配置保存自动格式化）
{
"files.eol": "\n",
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}根目录创建 .prettierrc.js
// .prettierrc.js 代码美化规则配置
module.exports = {
// 一行最多 n 字符
printWidth: 1000,
// 使用 2 个空格缩进
tabWidth: 2,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾需要有分号
semi: false,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾需要有逗号
trailingComma: 'all',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// vue 文件中的 script 和 style 内不用缩进
vueIndentScriptAndStyle: false,
// 换行符使用 lf
endOfLine: 'lf',
// 格式化嵌入的内容
embeddedLanguageFormatting: 'auto',
}以上方式配置只在项目中生效，编辑器为vscode，与个人配置(user->settings.json)不冲突，如果你是用vetur对vue代码进行格式化，可以额外配置自己的风格，本人经常使用如下配置：
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
}
}这是单独为vue中的html配置的attributes规则，因为我不想标签每个属性都换行，而prettier则对此无能为力。
husky 一个git钩子插件
husky经常配合lint-staged一起使用，在git提交的钩子中用lint-staged做一些操作，例如让你提交前运行vue自带的代码格式化工具：vue-cli-service lint，或者运行prettier --write，它的作用是可以配置一些规则，且只对本次提交的各种文件进行检查而不是整个项目。
但是我们已经做到了自动保存格式化，这种方式明显是多余的，所以我们现在只需要一个husky，来对commit提交做些规范工作。
安装
yarn add husky -D新版使用方法：
package.json中添加脚本
"scripts": {
"prepare": "husky install",
}执行初始化
npm run prepare会在根目录生成一个目录，使用命令往git钩子中添加要执行的命令：
npx husky add .husky/pre-commit "npm test"git commit时对应的生命周期会触发对应的命令。
如果你想使用旧版的配置，需要指定版本安装：
yarn add husky@3.0.9 -Dpackage.json配置
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
"pre-commit": "xxx" // pre-commit，提交前的钩子
}
},Commitize 统一代码提交信息
安装：
yarn add commitizen cz-conventional-changelog @commitlint/cli @commitlint/config-conventional -Dpackage.json添加如下配置
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
}
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
},在根目录创建 commitlint.config.js 配置我们的commit规则
/**
* feat 新功能
* fix 修补bug
* docs 文档修改
* style 样式修改
* build 代码编译
* refactor 代码重构
* code 代码优化
* test 测试用例
*/
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'build', 'refactor', 'test', 'code']],
},
}最终不符合规范的git commit将会被拦截。
package.json添加
"scripts": {
"c": "git add . && git-cz"
}提交代码使用 yarn c 或 npm run c，即可使用命令行工具以Angular规范(社区使用最广泛的规范)进行代码提交。
终端工具选择：
mac：无所谓 ，自带终端就很强大。
windows：我遇到过还有在使用CMD的同事，曾经也用过一段时间装git附赠的gitBash工具，这些都不太好用，建议使用vsCode自带的Terminal工具就很好。
