vue 项目添加 Eslint

收集到了大约3种方式：

1.自动安装Eslint 插件，执行后，就会让你选择Eslint的验证风格，然后什么时候验证。

vue add @vue/eslint

2.自动vue Eslint插件，执行后，就会让你选择Eslint的验证风格，然后什么时候验证。

vue add @vue/cli-plugin-eslint

上两种会自动创建 .eslintrc.js 文件，并使用里面所选的验证风格，如果需要排除一些其他插件语法可以在文件里加上下面的配置：

{
"globals": {
   "wx": "readonly",
   "uni": "readonly"
}

3.手动安装vue的Eslint插件。这种安装要自己手写插件风格

yarn add --dev eslint eslint-plugin-vue eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

手动创建.eslintrc.js 文件在文件里写入：

module.exports = {
    extends: [
        'plugin:vue/recommended'
    ],
    rules: {
        "no-alert": 0,
        "no-multi-spaces": "error", // 禁止多个空格 
        //"semi": [2, "always"] ,// 自动补充分号
       "quotes": ["error", "single"] // 使用单引号
    }
}

手动装Eslint插件一些其他规则：

{
  //在computed properties中禁用异步actions
  'vue/no-async-in-computed-properties': 'error',
  //不允许重复的keys
  'vue/no-dupe-keys': 'error',
  //不允许重复的attributes
  'vue/no-duplicate-attributes': 'error',
  //在 <template> 标签下不允许解析错误
  'vue/no-parsing-error': ['error',{
      'x-invalid-end-tag': false,
  }],
  //不允许覆盖保留关键字
  'vue/no-reserved-keys': 'error',
  //强制data必须是一个带返回值的函数
  // 'vue/no-shared-component-data': 'error',
  //不允许在computed properties中出现副作用。
  'vue/no-side-effects-in-computed-properties': 'error',
  //<template>不允许key属性
  'vue/no-template-key': 'error',
  //在 <textarea> 中不允许mustaches
  'vue/no-textarea-mustache': 'error',
  //不允许在v-for或者范围内的属性出现未使用的变量定义
  'vue/no-unused-vars': 'error',
  //<component>标签需要v-bind:is属性
  'vue/require-component-is': 'error',
  // render 函数必须有一个返回值
  'vue/require-render-return': 'error',
  //保证 v-bind:key 和 v-for 指令成对出现
  'vue/require-v-for-key': 'error',
  // 检查默认的prop值是否有效
  'vue/require-valid-default-prop': 'error',
  // 保证computed属性中有return语句 
  'vue/return-in-computed-property': 'error',
  // 强制校验 template 根节点
  'vue/valid-template-root': 'error',
  // 强制校验 v-bind 指令
  'vue/valid-v-bind': 'error',
  // 强制校验 v-cloak 指令
  'vue/valid-v-cloak': 'error',
  // 强制校验 v-else-if 指令
  'vue/valid-v-else-if': 'error',
  // 强制校验 v-else 指令 
  'vue/valid-v-else': 'error',
  // 强制校验 v-for 指令
  'vue/valid-v-for': 'error',
  // 强制校验 v-html 指令
  'vue/valid-v-html': 'error',
  // 强制校验 v-if 指令
  'vue/valid-v-if': 'error',
  // 强制校验 v-model 指令
  'vue/valid-v-model': 'error',
  // 强制校验 v-on 指令
  'vue/valid-v-on': 'error',
  // 强制校验 v-once 指令
  'vue/valid-v-once': 'error',
  // 强制校验 v-pre 指令
  'vue/valid-v-pre': 'error',
  // 强制校验 v-show 指令
  'vue/valid-v-show': 'error',
  // 强制校验 v-text 指令
  'vue/valid-v-text': 'error'
}

其他Rules，官网都有。比如：

{
 "indent": ["error", 2]  //2 个空格缩进
}