如何配置Eslint语法检查

前言

我们要使用一个插件，首先得知道它是什么、有什么作用。ESLint 是一款插件,主要用来检测编写的(JavaScript)代码是否符合规范。
本文将从 命令安装、VSCode、WebStorm 三个方面给大家介绍。
（ps： webstorm的后期补上）

eslint官网： https://zh-hans.eslint.org/docs/latest/use/getting-started

一、使用命令安装 ESLint

1.安装和初始化

1)安装 ESLint：

• 使用 npm 安装：

npm install eslint --save-dev

• 或使用 yarn 安装：

yarn add eslint --dev

2)初始化 ESLint：

在项目根目录下运行：

npx eslint --init

它会引导你进行一系列配置选择，例如：选择使用的环境 （浏览器、Node.js等）、风格指南（如：Airbnb、Standard等）、安装必要的插件等等。
按照自己的喜好来配置
记得在管理员权限下运行

关于具体的配置，可以参照一个大佬的文章内容： http://t.csdnimg.cn/QkTzU

2.基本配置项

1) env：定义运行环境。例如：

   "env": {
     "browser": true,
     "node": true,
     "es6": true
   }

2) extends：继承其他配置，可以是内置规则集或第三方规则集。例如：

 "extends": "eslint:recommended",
 "extends": "airbnb-base"

3) rules：自定义规则覆盖默认规则或扩展的规则集。例如：

   "rules": {
     "semi": ["error", "always"], // 要求分号
     "quotes": ["error", "single"] // 要求单引号
   }

一些常见规则及含义：

• no-console: 禁止使用 console.log 等控制台输出语句。可以设置为 off（不限制）、warn（警告）或 error（错误）。
• no-unused-vars: 检查未使用的变量。
• indent: 缩进风格，例如 ["error", 4] 表示使用四个空格缩进。

3.插件（Plugins）

1)安装插件，例如：

• 如果是 React 项目：

npm install eslint-plugin-react --save-dev

• 如果是 Vue 项目：

npm install eslint-plugin-vue --save-dev

2)在配置文件中引入插件：

   "plugins": [
     "react",
     "vue"
   ]

4.与构建工具集成

1)与 Webpack集成：

• 安装 eslint-loader：

npm install eslint-loader --save-dev

• 在 Webpack 配置文件中添加规则：

     module.exports = {
       //...
       module: {
         rules: [
           {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: {
               loader: 'eslint-loader',
             },
           },
         ],
       },
       //...
     };

2)与 Vue CLI 集成：

Vue CLI 内置了 ESLint 支持，可以在创建项目时选择启用 ESLint，并选择相应的规则集。
在项目中，可以通过修改 .eslintrc.js 文件来调整 ESLint 配置。

3)与 Create React App 集成：

Create React App 也可以通过 eject（弹出）配置来修改 ESLint 配置，或者使用一些第三方工具如 react-app-rewired 来覆盖默认配置而无需 eject。

二、在 VSCode中安装并配置 ESLint

1.ESLint 安装

在 VSCode 插件商店里搜索 ESLint ，并安装：

当然啦，你可以选择把其他的美化代码插件也安装了，例如：

注意注意！！！ 如果你的项目已经有 .eslintrc.js文件了，会出现两种情况：

• 第一种 – .eslintrc.js和babel.config.js文件点进去会挂红色波浪线。此时，你只需要重新打开项目文件夹，以该项目文件夹作为根目录就好。
• 第二种 – 芜湖，eslint 插件不起作用

2.VSCode 添加配置

1)我们先进入 VSCode 中，进行扩展配置。

点击 文件 > 首选项 > 设置 > 打开 VSCode 配置文件。当然啦，你从左下角的设置icon 点击进入 setting也是一样的啦

注意！！！这里默认的是用户区。
用户区：应用于当前操作系统用户，只要是在当前电脑上开发，任意项目都会生效该配置，需慎重哦。
工作区：只应用于当前项目，如果更换项目配置会失效。

2)可以按需添加如下配置：

我这里按照我的习惯，还有我看到的一些配置，给大家介绍一下。
在 settings.json文件下：


在项目中的 .eslintrc.js文件下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 缩进规则，使用2个空格的缩进
    indent: ['error', 2],
    // 严格模式下，方法名和括号之间需要有一个空格
    'space-before-function-paren': 0,
    'vue/max-attributes-per-line': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/no-v-html': 'off',
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      before: true,
      after: true
    }],
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs', {
      allowSingleLine: true
    }],
    camelcase: [0, {
      properties: 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
      before: false,
      after: true
    }],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    curly: [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
    eqeqeq: ['error', 'always', { null: 'ignore' }],
    'generator-star-spacing': [2, {
      before: true,
      after: true
    }],
    'handle-callback-err': [2, '^(err|error)$'],
    'jsx-quotes': [2, 'prefer-single'],
    'key-spacing': [2, {
      beforeColon: false,
      afterColon: true
    }],
    'keyword-spacing': [2, {
      before: true,
      after: true
    }],
    'new-cap': [2, {
      newIsCap: true,
      capIsNew: false
    }],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-class-assign': 2,
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-control-regex': 0,
    'no-delete-var': 2,
    'no-dupe-args': 2,
    'no-dupe-class-members': 2,
    'no-dupe-keys': 2,
    'no-duplicate-case': 2,
    'no-empty-character-class': 2,
    'no-empty-pattern': 2,
    'no-eval': 2,
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    'no-iterator': 2,
    'no-label-var': 2,
    'no-labels': [2, {
      allowLoop: false,
      allowSwitch: false
    }],
    'no-lone-blocks': 2,
    'no-mixed-spaces-and-tabs': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
    'no-multiple-empty-lines': [2, {
      max: 1
    }],
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-sparse-arrays': 2,
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef': 2,
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, {
      defaultAssignment: false
    }],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-unused-vars': [2, {
      vars: 'all',
      args: 'none'
    }],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-useless-escape': 0,
    'no-whitespace-before-property': 2,
    'no-with': 2,
    'one-var': [2, {
      initialized: 'never'
    }],
    'operator-linebreak': [2, 'after', {
      overrides: {
        '?': 'before',
        ':': 'before'
      }
    }],
    'padded-blocks': [2, 'never'],
    quotes: [2, 'single', {
      avoidEscape: true,
      allowTemplateLiterals: true
    }],
    semi: [2, 'never'],
    'semi-spacing': [2, {
      before: false,
      after: true
    }],
    'space-before-blocks': [2, 'always'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
    'space-unary-ops': [2, {
      words: true,
      nonwords: false
    }],
    'spaced-comment': [2, 'always', {
      markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    }],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    yoda: [2, 'never'],
    'prefer-const': 2,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }],
    'array-bracket-spacing': [2, 'never']
  }
}

更多配置可以去一个大佬的文章看： http://t.csdnimg.cn/FTsKT

3)设置完成后，重启 VSCode