关于javascript：Intellij插件：带有React的AirBnB ESLint


Intellij plugin: AirBnB ESLint w/ React

在Ubuntu 15.10上使用Intellij Idea 15.0.2并尝试配置ESLint以使其正常工作。

遵循Jetbrains网站上的指示，但没有骰子。

这是我的语言和框架> javascript>代码质量工具> ESLint的设置的屏幕截图。 这是IntelliJ中我的nodejs / npm设置的屏幕截图。

还有我的.eslintrc文件，位于根项目目录中：

1
2
3
4
5
6
{
 "extends":"airbnb",
 "rules": {
   "comma-dangle": 0
  }
}

这是/index.js的片段，在IntelliJ中不会产生任何错误或警告：

1
2
3
4
var superman = {
    default: { clark:"kent" },
    private: true
};

这是我从终端运行eslint index.js时的输出：

1
2
3
4
   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文件中的错误) 本身，而不是我的代码)。

但是，一旦我解决了这些错误，该插件就会安静下来，当我通过产生错误对其进行测试时，不会对我大喊大叫。

相关讨论

JetBrains(想法，Webstorm)设置

文件>设置>插件>浏览存储库...>搜索：eslint>安装>重新启动WebStorm

文件>设置>语言和框架> JavaScript>代码质量工具> ESLint

enter image description here

之后，它应该像这样工作：

enter image description here

ESLint配置

ESLint不附带配置。您必须创建自己的或使用预设：

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

然后在您的.eslintrc中

1
2
3
{
 "extends":"airbnb"
}

您还可以从预设中有选择地禁用/修改某些规则(0-禁用规则，1-警告，2-错误)：

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

阅读：关闭特定行的eslint规则。

如果您不想使用airbnb config(最受欢迎的javascript样式指南)，则可以创建自己的配置。这是react的说明：如何在Atom Editor上为React配置ESLint。

要创建自己的预设，您必须创建名为eslint-config-myname的npm软件包，然后使用'extends': 'myname', http://eslint.org/docs/developer-guide/shareable-configs

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

1
./node_modules/.bin/eslint .

不过，您可以在.eslintignore中排除某些文件(默认情况下不包括node_modules)：

1
bundle.js

还有一个用于的--fix开关。

.editorconfig

ESLint的好伴侣是editorconfig。这是在JetBrains产品中可用的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

相关讨论