工作中遇到的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插件安装

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

需要的项目环境

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

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

vscode个人设置

vscode插件安装

需要的项目环境

参考文档