Intellij插件：带React的AirBnB ESLint

小编典典

Intellij插件：带React的AirBnB ESLint

reactjs

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

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

这是我的语言和框架> javascript>代码质量工具> 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版本之前，我使用的是.eslintrc来自Github的，它在IntelliJ 中引发了许多ESLint错误（即.eslintrc文件本身的错误，而不是我的代码）。

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

阅读 361

2020-07-22

共1个答案

小编典典

JetBrains（想法，Webstorm）设置_File>设置>插件>浏览存储库…>搜索：eslint>安装

重新启动WebStorm_

文件>设置>语言和框架> JavaScript>代码质量工具>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'],
  }
}

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

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

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

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

./node_modules/.bin/eslint .

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

bundle.js

还有一个–fix用于eslint 的开关。

.editorconfigESLint的好伴侣是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

I also have a github repository which already has these files set
https://github.com/rofrol/react-starter-kit/

Based on this https://www.themarketingtechnologist.co/how-to-get-airbnbs- javascript-code-style-working-in-webstorm/

More here https://www.jetbrains.com/webstorm/help/using-javascript-code- quality-tools.html

2020-07-22