Intellij插件:AirBnB ESLint w/React

Question

在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文件本身的错误,而不是我的代码).

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

Answer 1

JetBrains(Idea,Webstorm)设置

文件>设置>插件>浏览存储库...>搜索: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样式指南),您可以创建自己的.以下是反应指令:如何在Atom编辑器上为React配置ESLint.

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

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

./node_modules/.bin/eslint .

您可以在.eslintignore中排除某些文件中的eslinting(默认情况下排除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