eslint-相关规范配置(基于vue2项目)

自己一个人整前端开发的时候,规范都是想起哪是哪。现在人多了,不能一个人一个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: ''
});

你可能感兴趣的:(eslint-相关规范配置(基于vue2项目))