1）全局安装相关依赖包

  1. $ npm -g install \
  2. babel-core@^6.22.1 \
  3. babel-eslint@^8.2.1 \
  4. eslint@^4.15.0 \
  5. eslint-config-standard@^10.2.1 \
  6. eslint-friendly-formatter@^3.0.0 \
  7. eslint-loader@^1.7.1 \
  8. eslint-plugin-import@^2.7.0 \
  9. eslint-plugin-node@^5.2.0 \
  10. eslint-plugin-promise@^3.4.0 \
  11. eslint-plugin-standard@^3.0.1 \
  12. eslint-plugin-vue@^4.0.0 \
  13. standard

2）设置全局配置文件

全局配置文件.eslintrc.js
我这边存放的目录是D:\WorkSpace\.eslintrc.js
相关报错信息已经写明了注释

  1. module.exports = {
  2.   'env': {
  3.     'browser': true,
  4.     'commonjs': true,
  5.     'es6': true
  6.   },
  7.   'extends': [
  8.     'eslint:recommended',
  9.     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  10.     'plugin:vue/essential', 
  11.     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  12.     'standard'
  13.   ],
  14.   'parserOptions': {
  15.     'parser': 'babel-eslint',
  16.     'ecmaVersion': 6,
  17.     'sourceType': 'module',
  18.     'ecmaFeatures': {
  19.       'jsx': true
  20.     }
  21.   },
  22.   'globals': {
  23.     'native': true,
  24.     'callNative': true,
  25.     'process': true,
  26.     '$': true,
  27.     'encryptUtil': true,
  28.     'CryptoJS': true,
  29.     'wx': true,
  30.     'getApp': true,
  31.     'mpvuePlatform': true,
  32.     'mpvue': true
  33.   },
  34.   'plugins': ['vue'],
  35.   'rules': {
  36.     // 强制使用一致的缩进
  37.     'indent': ['error', 2, { 'SwitchCase': 1 ,'ArrayExpression': 'off'}],
  38.     // 要求或禁止使用分号代替 ASI
  39.     'semi': ['error', 'always'],
  40.     // 警告 禁用 console , 仅允许使用 console.warn()和console.error()
  41.     'no-console': ['warn', { 'allow': ['warn', 'error'] }],
  42.     // 禁止条件表达式中出现赋值操作符
  43.     'no-cond-assign': ['error', 'always'],
  44.     // 禁止不必要的分号
  45.     'no-extra-semi': 'error',
  46.     // 禁止在return、throw、continue 和 break 语句之后出现不可达代码
  47.     'no-unreachable': 'error',
  48.     // 要求使用 isNaN() 检查 NaN
  49.     'use-isnan': 'error',
  50.     // 强制所有控制语句使用一致的括号风格
  51.     'curly': 'error',
  52.     // 警告 要求使用 === 和 !==
  53.     'eqeqeq': 'warn',
  54.     // 警告 强制尽可能地使用点号
  55.     'dot-notation': 'warn',
  56.     // 要求 switch 语句中有 default 分支
  57.     'default-case': 'error',
  58.     // 冒号左右的空格可以提高 case 和 default 子句的可读性。
  59.     'switch-colon-spacing': ['error', {'after': true, 'before': false}],
  60.     // 警告 alert、confirm 和 prompt
  61.     'no-alert': 'warn',
  62.     // 禁止出现空函数
  63.     'no-empty-function': 'error',
  64.     // 禁止多次声明同一变量
  65.     'no-redeclare': 'error',
  66.     // 禁止自身比较
  67.     'no-self-compare': 'error',
  68.     // 警告 要求使用 let 或 const 而不是 var，在使用 var 时
  69.     'no-var': 'warn',
  70.     // 禁止在变量定义之前使用它们
  71.     'no-use-before-define': 'error',
  72.     // 警告 未使用的变量
  73.     'no-unused-vars': 'warn',
  74.     // 警告 未在逗号周围使用空格
  75.     'comma-spacing': 'warn',
  76.     // 警告 在注释前没有空白
  77.     'spaced-comment': ['warn', 'always'],
  78.     // 警告 函数圆括号之前有一个空格
  79.     'space-before-function-paren': 'off',
  80.     // 警告 语句块之前的空格
  81.     'space-before-blocks': 'warn',
  82.     // 强制使用一致的反勾号、双引号或单引号
  83.     'quotes': ['error', 'single', { 'allowTemplateLiterals': true ,'avoidEscape':true}],
  84.     // 警告 关键字周围使用空格
  85.     'keyword-spacing': 'warn',
  86.     // 警告 函数中的变量分开声明
  87.     'one-var': ['warn', {'initialized': 'consecutive'}],
  88.     // 警告 文件末尾保留一行空行
  89.     'eol-last': ['warn', 'always'],
  90.     // iview 标签报错
  91.     'vue/no-parsing-error': ['warn', { 'x-invalid-end-tag': false }],
  92.     // 警告 禁止出现空函数
  93.     'no-empty-function': 'warn',
  94.     // 警告 禁用行尾空白
  95.     'no-trailing-spaces': ['warn',{'ignoreComments': true}],
  96.     // 警告 禁用稀疏数组，数组中有空元素
  97.     'no-sparse-arrays': 'warn',
  98.     // 强制操作符使用一致的换行符风格
  99.     'operator-linebreak': ['error', 'before'],
  100.     // 强制把object，array的props默认值转换为带有返回值的函数
  101.     'vue/require-valid-default-prop': 'off'
  102.   }
  103. }

3）设置VSCode配置文件

文件—》首选项—》设置—》{}（在这个图标在右上角）
完成后进入VSCode的配置文件settings.json
添加以下设置
以下设置依赖于VSCode的插件eslint、prettier、vetur

  1. {
  2.   "eslint.options": {
  3.     "configFile": "D:/WorkSpace/.eslintrc.js"
  4.   },
  5.   // "eslint.autoFixOnSave": true,
  6.   // 专门写Vue的eslint配置
  7.   "eslint.validate": [
  8.     "javascript",
  9.     "javascriptreact",
  10.     "html",
  11.     "vue",
  12.     {
  13.       "language": "html",
  14.       "autoFix": true
  15.     },
  16.     {
  17.       "language": "vue",
  18.       "autoFix": true
  19.     }
  20.   ],
  21.   "files.associations": {
  22.     "*.vue": "vue"
  23.   },
  24.   "editor.renderWhitespace": "all",
  25.   "editor.tabSize": 2,
  26.   "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  27.   "prettier.printWidth": 180,
  28.   "prettier.singleQuote": true,
  29.   "prettier.jsxSingleQuote": true,
  30.   "prettier.trailingComma": "es5",
  31.   "vetur.format.defaultFormatter.js": "vscode-typescript",
  32.   "emmet.triggerExpansionOnTab": true,
  33.   "vetur.format.defaultFormatter.html": "js-beautify-html",
  34.   // 关闭VUE中HTML标签语法报错
  35.   "vetur.validation.template": false,
  36.   // vetur设置html默认格式化为js-beautify-html，如下设置可保证格式化vue文档时，template中的标签属性不换行
  37.   "vetur.format.defaultFormatterOptions": {
  38.     "js-beautify-html": {
  39.       "wrap_line_length": 120,
  40.       "end_with_newline": false,
  41.       "wrap_attributes": "auto" // 是否进行属性强制换行[auto|force|force-aligned|force-expand-multiline]
  42.     }
  43.   },
  44. }