Intellij插件：AirBnB ESLint w / React

Question

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

按照Jetbrains网站上的说明操作，但没有骰子。

语言和框架的

Here's a screencap of my设置＆gt; javascript＆gt;代码质量工具＆gt; ESLint。 IntelliJ中我的nodejs / npm设置的And here's a screencap。

我的<header class="navigationBar"> <nav> <ul> <li><a href="#">sssss</a></li> <li><a href="#functionsSection">sssssssssss</a></li> <li><a href="#form-main">sssssssss</a></li> </ul> </nav> <a href="#intro"><img class="logo" src="" alt="logo"></a> <div class="clear"></div> </header> 文件，位于根项目目录中：

.eslintrc

这是来自{ "extends": "airbnb", "rules": { "comma-dangle": 0 } } 的剪辑，在IntelliJ中不会产生任何错误或警告：

/index.js

这是我从终端运行var superman = { default: { clark: "kent" }, private: true }; 时的输出：

eslint index.js

注意：我相信ESLint正在运行，因为在我将 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 更改为AirBNB版本之前，我使用了来自Github的.eslintrc，它在IntelliJ中抛出了许多ESLint错误（即， .eslintrc文件本身的错误，而不是我的代码。

一旦我修正了这些错误，插件就会安静下来，并且在我通过产生错误进行测试时没有对我大喊大叫。

Answer 1

JetBrains（Idea，Webstorm）设置

档案＆gt;设置＆gt;插件＆gt;浏览存储库...＆gt;搜索：eslint＆gt;安装＆gt;重新启动WebStorm

档案＆gt;设置＆gt;语言与框架＆gt; JavaScript＆gt;代码质量工具＆gt; ESLint

之后它应该像这样工作：

ESLint config

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 config（最受欢迎的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 .

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

bundle.js

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

.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