Intellij 插件：AirBnB ESLint w/ React

Posted 2023-03-27

【中文标题】Intellij 插件：AirBnB ESLint w/ React

【英文标题】：Intellij plugin: AirBnB ESLint w/ React

【发布时间】：2016-04-14 11:52:04

【问题描述】：

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

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

Here's a screencap of my 语言和框架 > javascript > 代码质量工具 > ESLint 中的设置。 And here's a screencap 我在 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 版本之前，我使用的是 Github 的 .eslintrc，它在 IntelliJ 中引发了许多 ESLint 错误（即 @ 987654334@ 文件本身，而不是我的代码）。

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

【问题讨论】：

在代表限制的 OP b/c 中不能发布超过 2 个链接，所以：the .eslintrc from github 产生了错误 walkthrough on jetbrains 我跟着配置 ESLint IntelliJ 插件。

也许这会有所帮助themarketingtechnologist.co/…

哇。我怎么会错过-谢谢，我基本上已经放弃了。如果您想将其发布为答案，我将标记为已接受

【参考方案1】：

JetBrains (Idea, Webstorm) 设置

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

File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > 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'],
  

阅读：Turning off eslint rule for a specific line。

如果您不想使用 airbnb 配置（最流行的 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 中从 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

【讨论】：

您还必须使用babel-parer，否则 airbnb 扩展将无法正常工作

@BruceLee 你在谈论这个github.com/airbnb/javascript/issues/589#issuecomment-618436179 吗？