vue-cli使用vscode编辑器如何自动eslint检测

短命女 2022-12-08 05:28 213阅读 0赞

# [VSCode 保存时自动ESlint格式化][VSCode _ESlint] #

## Eslint 自动格式化 ##

"eslint": "^6.1.0",
    "eslint-friendly-formatter": "^6.4.1",
    "eslint-loader": "^6.4.1",
    "eslint-plugin-html": "^6.4.1",

## 首先安装ESLint插件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]

## 安装完成后，每次修改完代码都需要执行 "npm run lint"之后才能格式化 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1][]

## 打开设置选项 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 2][]

## 编辑代码settings.json ##

{
      "workbench.colorTheme": "Default Light+"  
      "workbench.activityBar.visible": true,
      "eslint.codeAction.showDocumentation": {
        "enable": true
      },
      "window.zoomLevel": 0,
      //-----------------------------新增加的配置---------------------------------
      //关闭VSCode在Save时候自动格式化，因为VSCode自带的格式化和ESlint规范并不兼容
      "editor.formatOnSave": false,
      //代码保存时，自动执行ESlint格式化代码
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
      },
      // 配置 ESLint 检查的文件类型
      "eslint.validate": [
        "javascript",
        "vue",
        "html"
      ]
    }

## 新建.eslintrc.js文件 ##

npm install -g eslint

eslint --init

根据eslint官网规则（[eslint官网][eslint]），编写eslintrc.js文件

module.exports = {
      "root": true,
      "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
      },
      "extends": [
        "plugin:vue/essential"
      ],
      // "extends": ['plugin:vue/recommended', 'eslint:recommended'], // 最严格模式，会在命令窗口打印错误提示
      // 在js里面有些时候用到一些全局变量，防止eslint无脑报错
      "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "process": false
      },
      "parserOptions": {
        "ecmaVersion": 2018
      },
      "rules": {
        'no-console': 0, // 禁用 console
        'no-unused-vars': [1, {
          'vars': 'all',
          'args': 'none'
        }], // 禁止出现未使用过的变量
        // 'semi': [2, 'never'], // 要求或禁止使用分号代替 ASI，分号设置：never 从不出现分号，always 必须分号结尾
        'semi': [1,'always'],
        'spaced-comment': [2, 'always', {
          'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
        }], // 强制在注释中 // 或 /* 使用一致的空格
        'array-bracket-spacing': [2, 'never'], // 强制数组方括号中使用一致的空格
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, // 禁用 debugger
        'no-with': 2, // 禁用 with 语句
        'no-unsafe-finally': 2, // 禁止在 finally 语句块中出现控制流语句
        'no-self-assign': 2, // 禁止自我赋值
        'no-self-compare': 2, // 禁止自身比较
        'no-eval': 2, // 禁用 eval()
        'no-implied-eval': 2, // 禁止使用类似 eval() 的方法 
        'no-duplicate-case': 2, // 禁止出现重复的 case 标签
        'no-fallthrough': 2, // 禁止 case 语句落空
        'no-dupe-keys': 2, // 禁止对象字面量中出现重复的 key
        'no-dupe-args': 2, // 禁止 function 定义中出现重名参数
        'block-spacing': [2, 'always'], // 禁止或强制在代码块中开括号前和闭括号后有空格
        'indent': [2, 2, {
          'SwitchCase': 1
        }], // 强制使用一致的缩进
        'quotes': [2, 'double', {
          'avoidEscape': true,
          'allowTemplateLiterals': true
        }], // 强制使用一致的反勾号、双引号或单引号 single  double
        'space-before-blocks': [2, 'always'], // 强制在块之前使用一致的空格
        'object-curly-spacing': [2, 'always', {
          objectsInObjects: false
        }], // 强制在大括号中使用一致的空格
        'space-infix-ops': 2, // 要求操作符周围有空格
        'space-unary-ops': [2, {
          'words': true,
          'nonwords': false
        }], // 强制在一元操作符前后使用一致的空格
        'space-in-parens': [2, 'never'], // 强制在圆括号内使用一致的空格
        'space-before-function-paren': [2, 'never'], // 强制在 function的左括号之前使用一致的空格
        'semi-spacing': [2, {
          'before': false,
          'after': true
        }], // 强制分号之前和之后使用一致的空格
        'padded-blocks': [1, 'never'], // 要求或禁止块内填充
        'operator-linebreak': [2, 'after', {
          'overrides': {
            '?': 'before',
            ':': 'before'
          }
        }], // 强制操作符使用一致的换行符
        'no-useless-escape': 0, // 禁用不必要的转义字符
        'no-whitespace-before-property': 2, // 禁止属性前有空白
        'no-unmodified-loop-condition': 2, // 禁用一成不变的循环条件
        'no-trailing-spaces': 1, // 禁用行尾空格
        'no-return-assign': [2, 'except-parens'], // 禁止在 return 语句中使用赋值语句
        'no-multiple-empty-lines': [2, {
          'max': 2,
          "maxEOF": 2,
          "maxBOF": 2,
        }], // 禁止出现多行空行（此处设置最多出现连续2个空行）
        'no-multi-spaces': 2, // 禁止使用多个空格
        'no-mixed-spaces-and-tabs': 2, // 禁止空格和 tab 的混合缩进
        'no-lone-blocks': 2, // 禁用不必要的嵌套块
        'no-irregular-whitespace': 2, // 禁止在字符串和注释之外不规则的空白
        'no-func-assign': 2, // 禁止对 function 声明重新赋值
        'no-extra-parens': [2, 'functions'], // 禁止不必要的括号
        'no-extra-boolean-cast': 2, // 禁止不必要的布尔转换
        'no-ex-assign': 2, // 禁止对 catch 子句的参数重新赋值
        'no-empty-character-class': 2, // 禁止在正则表达式中使用空字符集
        'no-dupe-class-members': 2, // 禁止类成员中出现重复的名称
        'no-delete-var': 2, // 禁止删除变量
        'no-const-assign': 2, // 禁止修改 const 声明的变量
        'new-cap': [2, {
          'newIsCap': true,
          'capIsNew': false
        }], // 要求构造函数首字母大写
        'keyword-spacing': [2, {
          'before': true,
          'after': true
        }], // 强制在关键字前后使用一致的空格
        'key-spacing': [2, {
          'beforeColon': false,
          'afterColon': true
        }], // 强制在对象字面量的属性中键和值之间使用一致的间距
        'dot-location': [2, 'property'], // 强制在点号之前和之后一致的换行
        'curly': [2, 'multi-line'], // 强制所有控制语句使用一致的括号风格
        'comma-style': [2, 'last'], // 强制使用一致的逗号风格
        'comma-spacing': [2, {
          'before': false,
          'after': true
        }], // 强制在逗号前后使用一致的空格
        'camelcase': [0, {
          'properties': 'always'
        }], // 强制使用骆驼拼写法命名约定
        'brace-style': [2, '1tbs', {
          'allowSingleLine': true
        }], // 强制在代码块中使用一致的大括号风格
        'arrow-spacing': [2, {
          'before': true,
          'after': true
        }], // 强制箭头函数的箭头前后使用一致的空格
        'accessor-pairs': 2, // 强制 getter 和 setter 在对象中成对出现
        'eqeqeq': [2, 'allow-null'], // 要求使用 === 和 !==
          'generator-star-spacing': [2, {
            'before': true,
            'after': true
        }], // 强制 generator 函数中 * 号周围使用一致的空格
        'constructor-super': 2, // 要求在构造函数中有 super() 的调用
        'no-extra-bind': 2, // 禁止不必要的 .bind() 调用
        'no-floating-decimal': 2, // 禁止数字字面量中使用前导和末尾小数点
        'no-redeclare': 2, // 禁止多次声明同一变量
        'no-unneeded-ternary': [0, {
          'defaultAssignment': false
        }], // 禁止可以在有更简单的可替代的表达式时使用三元操作符
        'no-unreachable': 2, // 禁止在return、throw、continue 和 break 语句之后出现不可达代码
        'no-useless-call': 2, // 禁止不必要的 .call() 和 .apply()
        'valid-typeof': 2, // 强制 typeof 表达式与有效的字符串进行比较
        'prefer-const': 0, // 要求使用 const 声明那些声明后不再被修改的变量
      }
    }

## 保存之后，今后在保存时就能自动ESLint格式化 ##

## 忽略整个文件 ##

解决方法一：

在压缩代码前后加上***/\* eslint-disable \*/***，生效

解决方法二：

在项目根目录建立***.eslintignore***文件，填上文件夹名就行

build/*.js
    config/*.js
    src/assets
    .eslintrc.js
    babel.config.js

[VSCode _ESlint]: https://www.cnblogs.com/fuhua/p/13425540.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: /images/20221123/00f5f513dffa4956949e3dbaae5065b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1]: /images/20221123/7bc7640a0bfd489aa1f1f10823f4b3a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 2]: /images/20221123/ba95b493060642acafd028a656564dc2.png
[eslint]: https://eslint.bootcss.com/docs/developer-guide/working-with-rules