IDEA ESlint使用详解

ESlint是一个针对JavaScript代码的静态分析工具，可以检查代码的规范性，如语法、代码风格等错误，在不同的编辑器中集成ESlint可以大大提高代码规范性检查的效率。在本文中，我们将详细介绍IDEA ESlint的使用。

一、安装IDEA ESlint插件

首先需要安装IDEA ESlint插件，打开IDEA软件，点击File顶部菜单栏中的Settings，在打开的Settings面板中，点击左侧的Plugins选项，搜索“ESlint”，点击右侧Install按钮完成插件的安装。

二、配置IDEA ESlint

配置IDEA ESlint可以让我们对ESlint的检查规则进行个性化设置，定制化自己的规则。

首先需要打开IDEA的Settings面板，在左侧选中ESlint，可以看到右侧的配置项，并进行个性化的设置。其中比较重要的几个配置项如下：

1、ESlint package: ESlint的执行路径，一般情况下，使用默认的即可。默认为：node_modules\.bin\eslint

2、Configuration file: ESlint的配置文件路径，可以根据需要修改为自己的配置文件路径。默认为：项目根目录\.eslintrc.json

3、Disable all ESlint rules: 是否禁用所有的ESlint规则，默认为不禁用，如果不需要进行ESlint检查，可以打开此选项。

三、使用IDEA ESlint

1、配置ESLint快捷键

配置ESLint快捷键可以方便我们快速检查代码规范。

首先需要打开IDEA的Settings面板，在左侧选中Keymap，可以看到右侧的快捷键配置列表，并进行个性化的设置。

找到ESLint的相关命令，如“Fix ESLint Problems”、“Reanalyze the File with ESLint”等，可以双击相应命令后，按下自己想设置的快捷键，即可设置完成。

2、代码规范性检查

在代码编辑区域，右键点击，可以看到菜单中有“ESlint”的选项，通过点击选项，可以进行代码规范性检查。

{
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module"
  },
  "rules": {
      "no-console": "off",
      "no-alert": "error",
      "quotes": ["error", "single"],
      "semi": ["error", "always"]
  }
}

我们可以看到，配置文件内容包含三个部分，分别是“extends”，“parserOptions”，“rules”。

其中，“extends”可以引用其他的eslint规则文件，扩展自己的规则。如“eslint:recommended”是一个官方推荐的规则文件。

“parserOptions”用于指定ESlint解析器的版本和类型，例如上面的配置中使用的是ES6和module模块类型。

“rules”用于指定具体的规则，例如上面的配置中指定对控制台中的日志输出进行禁用，“no-console": "off”；指定对警告类型的弹框进行报错处理，“no-alert": "error”， etc.