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.