项目规范说明
一、开发工具
统一为大家都在用的Visual Studio Code, 相关配置规范如下：
1.安装扩展插件ESLint
2.安装扩展插件Prettier
二、依赖安装
npm install -D babel-eslint eslint eslint-plugin-html eslint-plugin-vue prettier husky
注意：
- 首次引入
Husky注意完成相关配置 - 首次更新到
Husky配置完成的代码需要安装依赖 commit执行后，会执行部分代码自动修复，注意检查并提交相关修复
三、相关配置
1.Husky相关配置
- 参照
Husky技术分享 Git工具--husy介绍 - 在
package.json内配置lint-staged先执行prettier格式化，然后通过eslint检查修复
"lint-staged": {
"*.{js,vue,css}": [
"prettier --write"
]，
"*.{js,vue}": [
"eslint --fix",
"git add"
],
}
2.Eslint相关配置
注意：
- 项目根目录新建
.eslintrc.js也可配置.eslintignore过滤不需要lint的文件
module.exports = {
root: true,
env: {
browser: true,
node: true
},
globals: {
AMap: true,
AHAPP: true,
$: true,
trackCustomEvent: true,
google: true,
BMap: true,
BMapLib: true,
BMAP_STATUS_SUCCESS: true,
AHAPPCONFIG: true,
AHJavascriptBridge: true,
wx: true,
validate: true,
Autopay: true,
AutoCallApp: true,
TFT: true,
trackPageView: true,
ftwo: true,
PullToRefresh: true,
AHVP: true
},
extends: [
'plugin:vue/essential',
'eslint:recommended'
],
plugins: [
'vue'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'indent': [ // 缩进，2 个空格缩进
'error',
2,
{
'SwitchCase': 1,
'MemberExpression': 1 // 多行属性链缩进
}
],
'quotes': [ // 使用单引号
'error',
'single',
{
'allowTemplateLiterals': true
}
],
'no-console': 'off',
'no-debugger': 'error', // 禁止使用debugger语句
'for-direction': 'error', // 强制for循环更新子句将计数器移动到正确的方向
'getter-return': 'error', // 强制在属性 getter 中存在 return 语句
'no-await-in-loop': 'error', // 不允许await在循环内
'no-compare-neg-zero': 'error', // 不允许比较-0
'no-cond-assign': 'error', // 不允许在条件语句中使用赋值运算符
'no-constant-condition': 'error', // 不允许条件中的常量表达式
'no-control-regex': 'error', // 在正则表达式中禁止使用控制符
'no-dupe-args': 'error', // 函数参数禁止重名
'no-dupe-keys': 'error', // 在对象字面量中，禁止使用重复的key
'no-duplicate-case': 'error', // 在switch语句中禁止重复的case
'no-empty': [ 'error', { 'allowEmptyCatch': false } ],
'no-empty-character-class': 'error', // 禁止使用不匹配任何字符串的正则表达式
'no-ex-assign': 'error', // 禁止对catch语句中的参数进行赋值
'no-extra-boolean-cast': 'error', // 在一个本来就会自动转化为布尔值的上下文中就没必要再使用!! 进行强制转化了
'no-extra-parens': 'error', // 禁止使用多余的圆括号
'no-extra-semi': 'error', // 不允许使用不必要的分号
'no-func-assign': 'error', // 禁止对函数名重新赋值
'no-inner-declarations': 'error', // 禁止在代码块中定义函数
'no-invalid-regexp': 'error', // RegExp构造函数中禁止使用非法正则语句
'no-irregular-whitespace': [ // 禁止使用不规则的空白符
'error',
{
'skipStrings': true,
'skipTemplates': true,
'skipComments': true
}
],
'no-regex-spaces': 'error', // 正则表达式中不要使用空格
'no-sparse-arrays': 'error', // 禁止使用稀疏数组
'no-template-curly-in-string': 'error', // 不允许在常规字符串中使用模板文字占位符语法
'no-unexpected-multiline': 'error', // 禁止在不需要分行的时候使用了分行
'no-unreachable': 'error', // 没有执行不到的代码
'no-unsafe-finally': 'error', // 不允许块中的控制流语句finally
'no-unsafe-negation': 'error', // 不允许对关系运算符的左操作数求反
'use-isnan': 'error', // 推荐使用isNaN方法，而不要直接和NaN作比较
'valid-typeof': 'error', // 在使用typeof操作符时，作比较的字符串必须是合法字符串eg:'string' 'object'
'consistent-return': 'off', // 要求return语句始终或从不指定值
'no-empty-pattern': 'error', // 不允许空的解构模式
'no-fallthrough': 'error', // 在case语句中尽量加break
'no-implied-eval': 'error', // 禁止使用类eval的函数
'no-redeclare': 'error', // 不要重复申明一个变量
'no-self-assign': [ // 消除自我分配
'error',
{
'props': true
}
],
'arrow-parens': 'error', // 强制箭头函数参数用括号括起来
'arrow-spacing': 'error', // 箭头函数的箭头前和后各加一个空格
'array-bracket-spacing': [ // 数组前后增加空格
'error',
'always',
{
'singleValue': false
}
],
'block-spacing': [ // 如果代码块是单行的时候，代码块内部前后需要留一个空格
'error',
'always'
],
'comma-dangle': [ // 在定义对象或数组时，最后一项不能加逗号
'error',
'never'
],
'generator-star-spacing': [ 'error', { // 强制执行一个单独的位置*
'before': true,
'after': true
} ],
'no-class-assign': 'error', // 变量名不要和class名重名
'no-confusing-arrow': 'error',
'no-const-assign': 'error', // const申明的变量禁止修改
'no-dupe-class-members': 'error', // class中的成员禁止重名
'no-duplicate-imports': 'error', // 此规则要求从单个模块进行的所有导入都以单一import语句存在
'no-new-symbol': 'error', // 防止Symbol与new操作员的意外呼叫
'no-this-before-super': 'error', // 在调用super之前不能使用this对象
'no-useless-computed-key': 'error', // 禁止不必要地使用计算属性键
'no-useless-rename': 'error', // 不允许将导入、导出和解构分配重命名为相同的名称
'no-var': 'error', // 阻止var使用或鼓励改为使用const或let
'no-multiple-empty-lines': [ // 空行不能够超过2行
'error',
{
'max': 1,
'maxEOF': 1
}
],
'no-trailing-spaces': [ // 行末禁止加空格
'error',
{
'skipBlankLines': true
}
],
'no-whitespace-before-property': 'error', // 对象和属性之间留出一致空白
'space-before-blocks': 'error', // 代码块前面需要加空格
'key-spacing': [ // key和value之间的空白，冒号前不要空格，冒号后面需要一个空格
'error',
{
'beforeColon': false,
'afterColon': true
}
],
'keyword-spacing': [ // 关键字间距
'error',
{
'before': true,
'after': true
}
],
'space-unary-ops': [ // 一元操作符前后是否需要加空格，单词类操作符需要加，而非单词类操作符不用加
'error',
{
'words': true,
'nonwords': false
}
],
'spaced-comment': 'error', // 注释符号｀／*｀ ｀／／｀，后面需要留一个空格
'space-infix-ops': 'error', // 操作符前后需要加空格
'comma-spacing': [ 'error', { // 在写逗号时，逗号前面不需要加空格，而逗号后面需要添加空格
'before': false,
'after': true
} ],
'comma-style': [ // 如果逗号可以放在行首或行尾时，那么请放在行尾
'error',
'last'
],
'curly': [ // 不要在块周围省略花括号
'error',
'multi-line'
]
}
}
3.Prettier相关配置
注意：
- 项目根目录新建
.prettierrc.js也可配置.prettierignore过滤不需要格式化的文件
module.exports = {
printWidth: 120, // 一行最多 120 字符
tabWidth: 2, // 使用 2个tab 缩进
semi: false, // 行尾需要有分号
singleQuote: true, // 使用单引号
useTabs: false, // 关闭 tab 缩进
// 对象key是否使用引号 as-needed 仅在需要的时候使用 consistent 有一个属性需要引号，
// 就都需要引号 preserve 保留用户输入的情况
quoteProps: 'preserve',
bracketSameLine: true, // 将尖括号放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）
bracketSpacing: true, // 大括号内的首尾需要空格
vueIndentScriptAndStyle: false, // Vue 文件脚本和样式标签缩进
trailingComma: 'none' // 没有尾随逗号
}
