自己一个人整前端开发的时候,规范都是想起哪是哪。现在人多了,不能一个人一个js规范。目前的项目基本都是基于VUE的项目,遂用eslint来约定项目中的js代码。
1.vue项目里 .eslintrc.js
vue本身有一些默认的规则,根据开发习惯,对一些规则做了补充。
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
'plugin:vue/essential',
'standard'
],
plugins: [
'vue'
],
// add your custom rules here 0-off 1-warn 2-error
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 要求使用分号代替 ASI
'semi': [2, 'always'],
// 禁止不必要的分号
'no-extra-semi': 2,
// function的左括号之前可以不使用空格
'space-before-function-paren': [0, 'always'],
// 禁止 if 语句中 return 语句之后有 else 块
'no-else-return': 2,
// 禁止出现空函数
'no-empty-function': 2,
// 强制对多行注释使用特定风格
'multiline-comment-style': 2,
// 禁止在代码后使用内联注释
'no-inline-comments': 2,
// 禁止 if 作为唯一的语句出现在 else 语句中
'no-lonely-if': 2,
// 禁止连续赋值
'no-multi-assign': 2,
// 禁止在注释块中使用空白符、允许在空行使用空白符(空格、tab 和其它 Unicode 空白字符)
'no-trailing-spaces': [2, {'skipBlankLines': true}],
// 禁止对象{后,}前有空格
'standard/object-curly-even-spacing': [2, 'never'],
// 禁止数组[后,]前有空格
'standard/array-bracket-even-spacing': [2, 'never']
}
}
2.vue项目入口函数main.js
main.js里面有这么一句new Vue({...})
,得到的实例,后续并没有使用,所以违反了eslint的no-new
规则,建议进行如下配置,比原有的vue配置更好。
-
/* eslint-disable no-new */
- 当前文件所有no-new规则都被禁用 -
// eslint-disable-next-line no-new
- 某个特定的行no-new规则都被禁用
// eslint-disable-next-line no-new
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
});