vscode 老项目添加 eslint

用vscode旧项目中添加eslint

1. 安装vscode的eslint插件
2. npm install -g eslint
3. eslint --init 配置生成..eslintrc文件
   或者手动创建.eslintrc文件
   写入

// https://eslint.org/docs/user-guide/configuring
module.exports = {
    //默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
    root: true,
    parser: 'babel-eslint',
    parserOptions: {
      sourceType: 'module'
    },
    env: {
      browser: true,
    },
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
      'html'
    ],
    // add your custom rules here
    'rules': {
      // allow paren-less arrow functions 要求箭头函数的参数使用圆括号
      'arrow-parens': 0,
      // allow async-await 强制 generator 函数中 * 号周围使用一致的空格
      'generator-star-spacing': 0,
      // allow debugger during development
      'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
    }
}

4. package.json的dependencies中添加eslint依赖

    "babel-eslint": "^7.1.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0"

5. webpack.base.conf的moudle下的rules添加

{
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
      formatter: require('eslint-friendly-formatter')
    }
}

6. npm install 安装一下依赖，就见报红了
7. 文件--首选项--设置--eslint配置文件

{
    // 窗口失去焦点自动保存
    "files.autoSave": "onFocusChange",
    // 编辑粘贴自动格式化
    "editor.formatOnPaste": true,
    // 字体大小
    "editor.fontSize": 14,
    // 行高
    "editor.lineHeight": 17,
    // 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体
    "editor.mouseWheelZoom": false,
    // 行太长自动换行
    "editor.wordWrap": "on",
    //Windows bash终端"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    // eslint设置
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // 保存自动修复
    "eslint.autoFixOnSave": true,
    // tab锁紧
    "editor.tabSize": 2,
    // 保存自动化
    "editor.formatOnSave": true,
    // 空格变成......
    "editor.renderWhitespace": "all",
    "window.zoomLevel": 0,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
}
或者
{
"files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}

8. 安装vetur 插件
9. npm install --save-dev eslint eslint-plugin-vue