Intellij插件：AirBnB ESLint w / React [英] Intellij plugin: AirBnB ESLint w/ React

问题描述

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

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

之后它应该是这样的：

ESLint config

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

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

然后在你的.eslintrc

  {
extends：airbnb
} 
  

您还可以选择性地禁用/修改预设中的某些规则（0 - 禁用规则，1 - 警告，2 - 错误）：

  {
'extens'：'airbnb'，
'规则'：{
'缩进'：[2，'tab'，{'SwitchCase'：1，'VariableDeclarator'： 1}]，
'alaction / prop-types'：0，
'reaction / jsx-indent-props'：[2，'tab']，
} 
} 
  

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

如果你不想使用airbnb config（最受欢迎的javascript风格指南）你可以创建自己的。以下是反应说明：如何为反应配置ESLint 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 
  

还有一个 - 修复开关用于eslint。

.editorconfig

ESLint的好伴侣是editorconfig。以下是一个适用于JetBrains产品的示例：

  root = true 
 
 #Unix-style newlines换行每个文件的换行符
 [*] 
 end_of_line = lf 
 insert_final_newline = true 
 
 
＃匹配带括号扩展表示法的多个文件
＃设置默认字符集
 [*。{js，jsx，html，sass}] 
 charset = utf-8 
 indent_style = tab 
 indent_size = 4 
 trim_trailing_whitespace = true 
 
＃不使用{}进行单一扩展。这不起作用：[*。{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

Using Intellij Idea 15.0.2 on Ubuntu 15.10 and trying to configure ESLint to work.

Followed the instructions on Jetbrains' site, but no dice.

Here's a screencap of my settings at languages&frameworks > javascript > code quality tools > ESLint. And here's a screencap of my nodejs/npm settings within IntelliJ.

And my .eslintrc file, in the root project directory:

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

Here's a snip from /index.js that produces no errors or warnings in IntelliJ:

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

Here's the output when I run eslint index.js from the terminal:

   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

Note: I believe ESLint is running, since before I changed my .eslintrc to the AirBNB version, I was using an .eslintrc from Github that threw a number of ESLint errors in IntelliJ (that is, errors in the .eslintrc file itself, not my code).

Once I fixed those errors, though, the plugin quieted down and didn't yell at me when I tested it by producing mistakes.

解决方案

JetBrains (Idea, Webstorm) settings

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

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

After that it should work like this:

ESLint config

ESLint doesn't come with a config. You have to create your own or use a preset:

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

Then in your .eslintrc

{
  "extends": "airbnb"
}

You can also selectively disable/modify some rules from preset (0 - disable rule, 1 - warning, 2 - error):

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

Read: Turning off eslint rule for a specific line.

If you don't want to use airbnb config (most popular javascript style guide) you can create your own. Here is the instruction for react: How to config ESLint for React on Atom Editor.

To create your own preset you have to create npm package named eslint-config-myname and then use 'extends': 'myname', http://eslint.org/docs/developer-guide/shareable-configs

You can use command line to check if eslint works:

./node_modules/.bin/eslint .

You may though exclude some files from eslinting (node_modules are excluded by default) in .eslintignore:

bundle.js

There is also a --fix switch for eslint.

.editorconfig

Good companion for ESLint is editorconfig. Here is an example which works in JetBrains products:

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

这篇关于Intellij插件：AirBnB ESLint w / React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！