Intellij 插件：帶 React 的 AirBnB ESLint

Question

在 Ubuntu 15.10 上使用 Intellij Idea 15.0.2 並嘗試配置 ESLint 以使其工作。

按照 Jetbrains 網站上的說明進行操作，但沒有骰子。

這是我在 languages&frameworks > javascript > code quality tools > ESLint 中的設置的屏幕截圖。 這是我在 IntelliJ 中的 nodejs/npm 設置的屏幕截圖。

還有我的.eslintrc文件，在根項目目錄中：

{
  "extends": "airbnb",
  "rules": {
    "comma-dangle": 0
  }
}

這是來自/index.js的一個片段，它在 IntelliJ 中不會產生任何錯誤或警告：

var superman = {
    default: { clark: "kent" },
    private: true
};

這是我從終端運行eslint index.js時的輸出：

   4:1   error    Unexpected var, use let or const instead                      no-var
   5:5   error    Expected indentation of 2 space characters but found 4        indent
   5:23  error    Strings must use singlequote                                  quotes
   6:5   error    Expected indentation of 2 space characters but found 4        indent

注意：我相信 ESLint 正在運行，因為在我將.eslintrc更改為 AirBNB 版本之前，我使用的是來自 Github 的.eslintrc ，它在 IntelliJ 中引發了一些 ESLint 錯誤（即.eslintrc文件本身的錯誤，而不是我的代碼）。

但是，一旦我修復了這些錯誤，當我通過產生錯誤來測試它時，插件就會安靜下來並且不會對我大喊大叫。

Answer 1

JetBrains（創意、Webstorm）設置

File > Settings > Plugins > Browse repositories... > Search: eslint > Install > Restart WebStorm

File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint

之后它應該像這樣工作：

ESLint 配置

ESLint 沒有配置。 您必須創建自己的或使用預設：

npm install --save-dev eslint-config-airbnb eslint

然后在你的.eslintrc

{
  "extends": "airbnb"
}

您還可以有選擇地禁用/修改預設的一些規則（0 - 禁用規則，1 - 警告，2 - 錯誤）：

{
  'extends': 'airbnb',
  'rules': {
    'indent': [2, 'tab', { 'SwitchCase': 1, 'VariableDeclarator': 1 }],
    'react/prop-types': 0,
    'react/jsx-indent-props': [2, 'tab'],
  }
}

閱讀： Turning off eslint rule for a specific line 。

如果您不想使用 airbnb 配置（最流行的 javascript 樣式指南），您可以創建自己的配置。 這是反應的說明： How to config ESLint for React on Atom Editor 。

要創建自己的預設，您必須創建名為 eslint-config-myname 的 npm 包，然后使用'extends': 'myname', http://eslint.org/docs/developer-guide/shareable-configs

您可以使用命令行來檢查 eslint 是否有效：

./node_modules/.bin/eslint .

你可以從 eslinting 中排除一些文件（默認情況下排除 node_modules）in.eslintignore：

bundle.js

還有一個用於 eslint 的--fix開關。

.editorconfig

ESLint 的好搭檔是 editorconfig。 這是一個在 JetBrains 產品中有效的示例：

root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true


# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,jsx,html,sass}]
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true

# don't use {} for single extension. This won't work: [*.{css}]
[*.css]
indent_style = space
indent_size = 2

我還有一個 github 存儲庫，其中已經設置了這些文件https://github.com/rofrol/react-starter-kit/

基於此https://www.themarketingtechnologist.co/how-to-get-airbnbs-javascript-code-style-working-in-webstorm/

更多信息在這里https://www.jetbrains.com/webstorm/help/using-javascript-code-quality-tools.html