使用 eslint 让代码更规范

原创已于 2023-09-21 10:08:17 修改 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2020-12-30 09:52:31 首次发布

前端专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中利用vue-cli的eslint功能提高代码质量。通过配置vue.config.js启用lintOnSave实现保存时代码检查，使用vue-cli-service lint进行自动代码修复。讨论了eslint的规则设置，包括错误级别、通用规则及Vue特有规则，并展示了部分规则示例，如禁止console.log、禁用debugger、驼峰命名等。同时，强调了全局变量声明和解析器选项的配置。

由于开发人员经验,编码习惯不同,造成维护成本上升,容易产生bug

1. 现有的vue-cli 自带eslint代码规范控件,只需对其规则进行配置.通过修改vue.config.js 文件内的 lintOnSave 属性为true来设置是否在保存代码的时候进行代码检测,这个一个人编码习惯自行设置.

2. 通过eslint插件进行代码修复,在vue-cli的项目中只需运行vue-cli-service lint 指令即可进行自动代码修复,自动修复有一定风险.

3. 规则包括必须规则,vue推荐规则,通用规则,通过设置error 进行开启规则,设置off关闭规则,设置warn进行规则警告.

4. 以下是现有的规则列表

module.exports = {
  root: true,

  env: {
    node: true
  },

  rules: {
    'no-console':  process.env.NODE_ENV === 'production'?'error':'off',
    'no-debugger': process.env.NODE_ENV === 'production'?'error':'off',
    'vue/camelcase': 'off', // 驼峰命名
    'vue/space-infix-ops': 'off',
    'no-unused-vars':'off',
    'no-useless-escape':'off',
    'vue/no-use-v-if-with-v-for':'off',  //v-for,v-if 不能同时用在一个元件上
    'vue/no-parsing-error':'off',
    'vue/no-boolean-default': 'off', // 布尔值属性默认值必须是false
    'vue/max-attributes-per-line': 'off', // 一行一个属性
    'vue/eqeqeq': 'off', // 要用===
    'no-empty':'warn', // 不允许有空的代码段
    'vue/require-v-for-key':'warn', // v-for必须要有key
    'vue/require-default-prop': 'warn',// 组件prop 必须有默认值
    'vue/require-prop-types': 'warn',  //  组件prop 必须有类型
    'vue/valid-v-for':'error',  // v-for 有效检测
    'vue/no-confusing-v-for-v-if': 'error', // v-if 必须在v-for之后 因为v-for 优先级大于v-if
    'no-constant-condition':'error',
    'vue/attribute-hyphenation': 'error',
    'vue/html-closing-bracket-newline': 'error',
    'vue/html-closing-bracket-spacing': 'error',
    'vue/html-end-tags': 'error',
    'vue/html-indent': 'error',
    'vue/html-quotes': 'error',
    'vue/html-self-closing': 'error',
    'vue/multiline-html-element-content-newline': 'error',
    'vue/mustache-interpolation-spacing': 'error',
    'vue/name-property-casing': 'error',
    'vue/no-multi-spaces': 'error',
    'vue/no-spaces-around-equal-signs-in-attribute': 'error',
    'vue/no-template-shadow': 'error',
    'vue/prop-name-casing': 'error',
    'vue/singleline-html-element-content-newline': 'error',
    'vue/v-bind-style': 'error',
    'vue/v-on-style': 'error',
    'vue/attributes-order': 'error',
    'vue/no-v-html': 'error',
    'vue/order-in-components': 'error',
    'vue/this-in-template': 'error',
    'vue/array-bracket-spacing': 'error',
    'vue/arrow-spacing': 'error',
    'vue/block-spacing': 'error',
    'vue/brace-style': 'error',
    'vue/comma-dangle': 'error',
    'vue/component-name-in-template-casing': 'error',
    'vue/key-spacing': 'error',
    'vue/match-component-file-name': 'error',
    'vue/no-restricted-syntax': 'error',
    'vue/object-curly-spacing': 'error',
    'vue/require-direct-export': 'error',
    'vue/script-indent': 'error',
    'vue/space-unary-ops': 'error',
    'vue/v-on-function-call': 'error'
  },
  globals: { // 声明全局变量不需要检测
    "uni": "writable",
    "wx": "writable",
    "_hmt": "writable",
    "BMap": "writable",
  },

  parserOptions: {
    parser: 'babel-eslint'
  },

  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ]
}