web-dev-qa-db-ja.com

きれいな+ AirbnbのESLint設定

最近、エディターにVisual Studio Codeの使用を開始し、Prettier-JavaScriptフォーマッターを見つけました。私のコードを見栄えよく保つのに役立つので、素晴らしいプラグインだと思います。

AirbnbのESLint構成をセットアップしましたが、これが非常に役立つことがわかりました。

これがキャッチです。現在実行中のAirbnb ESLint構成は、PrettierでNiceを再生しません。たとえば、JavaScript文字列の場合、Prettierは、ダブルティックとAirbnbのESLintをシングルティックのようにフォーマットします。 Prettierを使用してコードをフォーマットすると、AirbnbのESLintは同意しません。

Kent DoddsがESLintの設定、特に ここの例 でいくつかの作業を行ったことを知っています。

しかし、Prettierの魔法を使ってコードをAirbnbのESLintにフォーマットできるソリューションを見つけることはできません。

javascriptvisual-studioeslinteslint-config-airbnbprettier
26
Jiovan Melendez

eslint-config-prettier はこの目的のためだけに作成されたと思います： https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting -rules

基本的には オフ コードスタイリングに関係するすべてのルールは、prettierがそれを処理するためです。

したがって、このプラグインを他の必要なeslintプラグイン（eslint-config-airbnbなど）とともにインストールし、eslintの設定でextendsフィールドに追加するだけです。例えば：

{
  "extends": ["airbnb", "prettier"]
}
31
timetowonder

以下に、推奨される順序でいくつかの方法を示します。将来競合する可能性のある他のルールを気にする必要がないため、最初のアプローチをお勧めします。

i） eslint-config-prettier をインストールし、.eslintrcで拡張します。これを行うと、ESLint内のPrettierと競合する可能性のあるフォーマット関連のルールの一部がオフになります。

{
  "extends": [
    "airbnb",
    "prettier"
  ]
}

ii）"singleQuote": true構成ファイルに.prettierrcを追加します。

{
  "singleQuote": true,
  ...
}

iii）Prettierを起動するときに--single-quoteコマンドラインオプションを追加します。

$ prettier --single-quote ...

iv）.eslintrc設定ファイル（および競合する可能性のある他のファイル）内のESLintのquotesルールをオフにします。

{
  "rules": {
    "quotes": "off",
    ...
  }
}
9
Yangshun Tay

よりクリーンな方法 ：

yarn add --dev eslint-plugin-prettier eslint-config-prettier

   // .eslintrc
   {
     "extends": ["airbnb", "plugin:prettier/recommended"]
   }

plugin:prettier/recommendedつのことを行います ：

  • Eslint-plugin-prettierを有効にします。
  • きれいな/きれいなルールを「
  • Eslint-config-prettier構成を拡張します。

そして、あなたが反応している場合は、prettier/reactも追加できます：

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ]
}
5
kyw

したがって、プロパティ"extends": "airbnb"が追加された.eslintrcファイルがあります。別のプロパティ、ルールを追加し、そこに書き込むルールはairbnbから継承されたルールを上書きします

"extends": "airbnb",
"rules": {
    "eqeqeq": 2,
    "comma-dangle": 1,
}

ここで、2つのランダムルールを上書きしています。必要なルールを探す必要があります:)

1
Fabio Lolli

ここに少しインタラクティブがあります CLIツール 私はPrettierでESLintをセットアップするために構築しました。インストールして実行するだけです：

npx eslint-prettier-init

これで問題が解決します。

0
Philip Schönholzer