工作中遇到的vscode配合eslint完成保存为eslint格式

vscode个人设置

// vscode的个人设置配置
{
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "Dracula Italics",
  "vetur.format.defaultFormatter.js": "prettier",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "eslint.autoFixOnSave": true,
  // "eslint.nodePath": "D:/develop/nvm/nodejs",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "eslint.options": {
    "plugins": [
      "html"
    ],
    "configFile": "项目目录下.eslintrc.js绝对路径"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "prettier.disableLanguages": [
    "vue",
    "js"
  ],
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.stylelintIntegration": true,
}

// eslintrc.js配置
module.exports = {
  root: true,
  // EsLint默认使用esprima做脚本解析，也可以切换他，比如切换成babel-eslint解析
  parser: 'babel-eslint',
  parserOptions: {
    //指定来源的类型，有两种”script”或”module”
    sourceType: 'module'
  },
  // Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等
  env: {
    browser: true
  },
  // Extends是EsLint默认推荐的验证，你可以使用配置选择哪些校验是你所需要的，可以登录npmjs.com查看
  extends: 'standard',
  // required to lint *.vue files
  plugins: ['vue', 'html'],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // 箭头函数的参数使用圆括号,0是关闭规则"off"，1是警告"warn"，2是报错"error"
    'arrow-parens': 0,
    // 强制 generator 函数中 * 号周围使用一致的空格
    'generator-star-spacing': 0,
    // 函数周围空格的设置
    'space-before-function-paren': [
      'error',
      {
        anonymous: 'never',
        named: 'never',
        asyncArrow: 'always'
      }
    ],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 要求使用error对象作为promise拒绝的原因
    'prefer-promise-reject-errors': 'off',
    'padded-blocks': 0
  }
}

vscode插件安装

1. beautify 美化代码 好像没用到 安全起见先加上
2. Bracket Pair Colorizer 美化括号 让你的括号看起来更好看
3. Dracula theme 一个主题 随便装不装
4. Dracula Theme with Italic keywords 刚才那个主题的配套设施，内容看起来是斜体，有点意思
5. EditorConfig for Visual Studio Code 代码风格配置插件
6. eslint 不多说 就装吧
7. JavaScript standard style standard标准编码风格
8. Path Intellisense 自动完善路径
9. prettier 代码格式化
10. veture vue大礼包
11. vscode-icons 美化图标

需要的项目环境

1. npm install eslint eslint-plugin-html babel-eslint eslint-plugin-vue eslint-config-standard eslint-friendly-formatter --save-dev
2. npm install eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise --save-dev
3. 可以全局装 也可以项目装，不要全局安装和本地安装混合，那样在执行命令的时候全局容易找不到本地的配置，本地找不到全局的包
4. node_modules/.bin/eslint --fix path/to/要eslint的文件 可以对文件进行eslint规则修复

参考文档

1. eslint中文官网
2. 语言检测配置说明博客
3. eslint入门博客