vscode自动保存eslint | vue配置eslint规则

默认eslint规则：

代码末尾不能加分号 ;
代码中不能存在多行空行；
tab键不能使用，必须换成两个空格；
代码中不能存在声明了但未使用的变量；

方法就是把不符合自己习惯的规则去掉，找到配置文件，名字以.eslintrc.*为名。

module.exports = {
  /**
   * 文件内局部设置
   * 【】eslint可以具体文件中设置特定代码的规则，常用于跳过某条语句的检测。
   * 【】注销全部规则，在代码前新建一行，添加注销 /* eslint-disable *\/  。如果没有恢复设置的语句，则下列全部代码都会跳过检测。
   * 【】恢复eslint，在代码前新建一行，添加注销 /* eslint-enable *\/
   * 【】指定忽略的规则，/* eslint-disable no-alert, no-console *\/
   * 【】在特定行禁用，// eslint-disable-line
   * 【】在下一行禁用，// eslint-disable-next-line
   */

  // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
  root: true,
  // 此项指定环境的全局变量，下面的配置指定为浏览器环境
  env: {
    node: true,
    jquery: true
  },
  // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  /*
   下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
    主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
    "off" -> 0 关闭规则
    "warn" -> 1 开启警告规则
    "error" -> 2 开启错误规则
  */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren': 0, // 函数左边不要有括号
    'indent': 0, // script的缩进
    'no-unused-vars': 1, // 不能有声明后未被使用的变量或参数
    'eqeqeq': 0 // 允许使用双等号
  },
  parserOptions: { // eslint解析器配置项 
    // 解析器是用于解析js代码的，怎么去理解每一个表达式，有点C++中编译器的概念，会对js进行一些语法分析，语义分析什么的，才能判断语句符不符合规范。而不是通过简单的字符串对比。
    parser: 'babel-eslint'// 指定eslint解析器：babel-eslint是围绕Babel解析器的包装器使其与ESLint兼容；可能值espree、esprima
  }
}

Eslint中文文档
vue中eslintrc.js配置最详细介绍

---

配置 VScode格式化ESlint-方法（最全最好用方法！）

// {
// “files.autoSaveDelay”: 2000,
// “eslint.autoFixOnSave”: true
// },

//     {
//       "language": "html",
//       "autoFix": true
//     },
//     {
//       "language": "vue",
//       "autoFix": true
//     }

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,

  //  #让prettier使用eslint的代码格式进行校验 
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号 
  "prettier.semi": false,
  //  #使用单引号替代双引号 
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "workbench.colorTheme": "Visual Studio Dark",
  "editor.fontSize": 15
}