eslint config prettier
1.0.0
不要なルール、または Prettier と競合する可能性のあるルールをすべてオフにします。
これにより、Prettier を使用するときにスタイルの選択を妨げることなく、お気に入りの共有可能な構成を使用できるようになります。
この設定はルールをオフにするだけであるため、他の設定と併用する場合にのみ意味があることに注意してください。
eslint-config-prettier をインストールします。
npm install --save-dev eslint-config-prettier
eslint-config-prettier を ESLint 構成 (eslintrc または eslint.config.js (フラット構成)) に追加します。
eslintrc: .eslintrc.*ファイルの「extends」配列に"prettier"を追加します。他の設定をオーバーライドできるように、必ず最後に配置してください。
{
"extends" : [
" some-other-config-you-use " ,
" prettier "
]
}eslint.config.js (フラット構成): eslint-config-prettier をインポートし、オーバーライドする他の構成の後に構成配列に配置します。
import someConfig from "some-other-config-you-use" ;
import eslintConfigPrettier from "eslint-config-prettier" ;
export default [
someConfig ,
eslintConfigPrettier ,
] ;最後に、CLI ヘルパー ツールを実行して、構成の"rules"セクションの問題を見つけます。
eslint-plugin-prettier を使用していますか? eslint-plugin-prettier の推奨構成を確認してください。
eslint-config-prettier は、コアルールだけでなく、次のプラグインの一部も自動的にオフにします。
注: インターネット上で、
"prettier/react"のようなものも拡張する必要があると記載されているガイドを見つけることがあります。 eslint-config-prettier のバージョン 8.0.0 以降、拡張する必要があるのは"prettier"だけです。これにはすべてのプラグインが含まれます。
フラット構成では、プラグイン名を自分で決めることができます。例えば：
import typescriptEslint from "@typescript-eslint/eslint-plugin" ;
import eslintConfigPrettier from "eslint-config-prettier" ;
export default [
{
plugins : {
// You’d typically use one of the following two:
// typescriptEslint: typescriptEslint,
// typescriptEslint,
// But in this example we give it another name.
// It might be tempting to use something shorter like “ts”:
ts : typescriptEslint , // Don’t do this!
} ,
rules : {
// With eslintrc, this is _always_ called:
// @typescript-eslint/indent
// But in eslint.config.js (flat config), the name chosen above in `plugins` is used.
"ts/indent" : "error" , // Don’t do this!
} ,
} ,
eslintConfigPrettier ,
] ; eslint-config-prettier がts/indentオフにすることを期待するかもしれませんが、そうではありません。 eslint-config-prettier は@typescript-eslint/indentのみをオフにするためです。ユーザーがプラグインの呼び出しに何を選択したかを知ることはできません。 CLI ヘルパー ツールについても同じです。
公式のプラグイン名をそのまま使用すれば大丈夫です。
標準以外のプラグイン名を使用する共有設定が見つかった場合は、代わりに標準名を使用するように依頼してください。
eslint-config-prettier がオフにするルールの一部は非推奨になるか、ESLint から削除される可能性があります。これはまったく問題ありませんが、非推奨および削除されたルールを本当に省略する必要がある場合は、 ESLINT_CONFIG_PRETTIER_NO_DEPRECATED環境変数を空ではない値に設定することで実行できます。例えば：
env ESLINT_CONFIG_PRETTIER_NO_DEPRECATED=true npx eslint-find-rules --deprecated index.js
eslint-config-prettier には、構成に不要なルールや Prettier と競合するルールが含まれているかどうかを確認するのに役立つ小さな CLI ツールも付属しています。実行方法は次のとおりです。
npx eslint-config-prettier path/to/main.js
( path/to/main.jsプロジェクト内に存在するファイルに変更します。)
それでは、それが何をするのか、そしてなぜそれを使用したいのかを見てみましょう。
この eslintrc の例では、競合するルール"indent"が有効になっています。
{
"extends" : [
" some-other-config-you-use " ,
" prettier "
],
"rules" : {
"indent" : " error "
}
} eslintrc の場合、 "prettier"構成は"some-other-config-you-use"の問題のあるルールを無効にすることができますが、 "rules"には影響しません。 (これが ESLint の仕組みです。拡張した構成をオーバーライドできます。) CLI ヘルパー ツールは"indent" Prettier と競合することを報告するため、削除できます。 (これは素晴らしいことです - 構成が簡素化されます!)
この eslint.config.js (フラット構成) の例では、競合するルール"indent"も有効になっています。
import someConfig from "some-other-config-you-use" ;
import eslintConfigPrettier from "eslint-config-prettier" ;
export default [
someConfig ,
eslintConfigPrettier ,
{
rules : {
indent : "error" ,
} ,
} ,
] ;新しい ESLint の「フラット構成」形式を使用すると、何をオーバーライドするかを自分で制御できます。上記の競合を解決する 1 つの方法は、eslint-config-prettier が最後になるように構成オブジェクトを並べ替えることです。
import someConfig from "some-other-config-you-use" ;
import eslintConfigPrettier from "eslint-config-prettier" ;
export default [
someConfig ,
{
rules : {
indent : "error" ,
} ,
} ,
eslintConfigPrettier , // eslint-config-prettier last
] ;ただし、上記の構成を見ると混乱を感じるかもしれません。 indentルールを有効にしているように見えますが、実際にはその下のeslintConfigPrettier行のおかげで無効になっています。代わりに、実際に eslint-config-prettier の後に独自のルールを設定し、CLI ヘルパー ツールを実行して問題を調べ、競合するルールを構成ファイルから完全に削除する (構成を簡素化する) ことができます。
ESLint はファイルごとに異なるルールをサポートしているため、理論的には、競合するルールがないことを 100% 確認するには、プロジェクト内のすべてのファイルに対してツールを実行する必要があります。通常、すべてのファイルに対してほぼ同じルールが適用されるため、1 つのファイルに対してコマンドを実行するだけで十分です。ただし、複数の構成ファイルまたはオーバーライドを使用する場合は、チェックするためにいくつかのファイルを指定できます。
npx eslint-config-prettier index.js test/index.js legacy/main.js
ESLint 自体と同様に、 ESLINT_USE_FLAT_CONFIG環境変数を使用して eslint-config-prettier CLI ヘルパー ツールを制御できます。
ESLINT_USE_FLAT_CONFIG=true : eslint.config.js (フラット構成) のみを使用します。ESLINT_USE_FLAT_CONFIG=false : eslintrc ファイルのみを使用します。警告
eslint.config.js (フラット構成) の場合、CLI ヘルパー ツールはeslint/use-at-your-own-riskをインポートしますが、これはいつでも壊れる可能性があります。
7.0.0 より前の eslint-config-prettier バージョンには、異なる方法で実行される若干異なる CLI ツールがありました。例えば：
npx eslint --print-config index.js | npx eslint-config-prettier-check
チュートリアルでそのようなものを見つけた場合、7.0.0 以降のコマンドは次のようになります。
npx eslint-config-prettier index.js
eslint-config-prettier が無効にするルールがいくつかありますが、場合によっては実際には有効にすることができます。
--fix使用すると、問題が発生する可能性があります。使いやすさを最大限に高めるため、特別ルールはデフォルトで無効になっています (必要なものをすべて"extends"に含める場合)。それらが必要な場合は、ESLint 構成で明示的に指定する必要があります。
eslint-plugin-prettier および--fixを使用する場合、これらのルールにより問題が発生する可能性があります。
詳細については、 arrow-body-styleおよびprefer-arrow-callback問題を参照してください。
これらのルールをオフにするには、いくつかの方法があります。
"extends"に"plugin:prettier/recommended"を入れます。これは、eslint- plugin- prettier の推奨構成です。"extends"に"prettier/prettier"を入れます。 (はい、 "prettier/prettier"というルールと"prettier/prettier"という構成の両方があります。)どのアプローチを使用するかは関係ありません。 "plugin:prettier/recommended"が一番簡単かもしれません。
注: CLI ツールは、同じファイルに対して"prettier/prettier"ルールが有効になっている場合にのみ、これらを問題として報告します。
eslint-plugin-prettier を使用しない場合、これらのルールは安全に使用できます。つまり、 eslint --fixとprettier --write別のステップとして実行する場合です。
このルールには特定のオプションが必要です。
ブロック (たとえば、 if 、 else 、 forまたはwhileの後) にステートメントが 1 つだけ含まれている場合、JavaScript ではそのステートメントを囲む中括弧を省略できます。このルールは、これらのオプションの中括弧を省略する必要があるかどうか、またはいつ省略するかを強制します。
"multi-line"または"multi-or-nest"オプションを使用すると、ルールが Prettier と競合する可能性があります。
たとえば、 "multi-line"オプションでは次の行が許可されます。
if ( cart . items && cart . items [ 0 ] && cart . items [ 0 ] . quantity === 0 ) updateCart ( cart ) ;ただし、Prettier は行が長すぎると判断し、次のように変更する可能性があります。これは"multi-line"オプションでは許可されません。
if ( cart . items && cart . items [ 0 ] && cart . items [ 0 ] . quantity === 0 )
updateCart ( cart ) ;このルールが気に入った場合は、 "multi-line"または"multi-or-nest"オプションを使用しない限り、Prettier で問題なく使用できます。
ESLint 構成の例:
{
"rules" : {
"curly" : [ " error " , " all " ]
}
}(以下は @typescript-eslint/lines-around-comment にも当てはまります。)
このルールは特定のオプションとともに使用できます。
このルールでは、コメントの前後に空行が必要です。 Prettier では、次の 2 つの例外を除いて空行が保持されます。
デフォルトでは、ESLint ではコメントの上に空白行が必要です。この場合は次のようになります。
if ( result ) {
/* comment */
return result ;
}ただし、Prettier は空白行を削除します。
if ( result ) {
/* comment */
return result ;
}このルールが気に入った場合は、ブロック、オブジェクト、配列の先頭と末尾にコメントを許可する追加の構成を追加する限り、Prettier で問題なく使用できます。
ESLint 構成の例:
{
"rules" : {
"lines-around-comment" : [
" error " ,
{
"beforeBlockComment" : true ,
"afterBlockComment" : true ,
"beforeLineComment" : true ,
"afterLineComment" : true ,
"allowBlockStart" : true ,
"allowBlockEnd" : true ,
"allowObjectStart" : true ,
"allowObjectEnd" : true ,
"allowArrayStart" : true ,
"allowArrayEnd" : true
}
]
}
}(以下は vue/max-len にも当てはまります。)
このルールは、コードを記述するときに特別な注意を必要とします。
通常、Prettier は行の最大長を自動的に追跡します。ただし、長い文字列、正規表現、コメントなど、Prettier では何もできない場合があります。それらは人間によって分割される必要があります。
Prettier が自動的に提供できる最大行長ポリシーよりもさらに厳格な最大行長ポリシーを適用したい場合は、このルールを有効にすることができます。 max-lenのオプションと Prettier のprintWidthオプションの同期を保つことを忘れないでください。
Prettier がmax-lenルールが承認しない方法で行をフォーマットする場合は、コードを若干リファクタリングする必要がある可能性があることに注意してください。
ESLint 構成の例:
{
"rules" : {
"max-len" : [ " error " , { "code" : 80 , "ignoreUrls" : true }]
}
}このルールには特定のオプションが必要です。
たとえば、ルールは次の行について警告できます。
var x = a => 1 ? 2 : 3 ; {allowParens: true} (ESLint 6.0.0 以降のデフォルト) では、矢印の混乱を避けるためにかっこを追加することが有効な方法とみなされます。
var x = a => ( 1 ? 2 : 3 ) ;Prettier はこれらの括弧を保持しますが、行が改行を導入するほど長い場合は括弧を削除します。
EnterpriseCalculator . prototype . calculateImportantNumbers = inputNumber =>
1 ? 2 : 3 ; {allowParens: false}を使用すると、ESLint は代わりに明示的な return に切り替えることを提案します。
var x = a => { return 1 ? 2 : 3 ; } ;Prettier では問題は発生しません。
このルールが気に入った場合は、 allowParensオプションがオフである限り、Prettier で問題なく使用できます。
ESLint 構成の例:
{
"rules" : {
"no-confusing-arrow" : [ " error " , { "allowParens" : false }]
}
} (注: CLI ヘルパー ツールでは{allowParens: true}デフォルトであると見なされます。これは、ESLint 6.0.0 以降のケースです。古いバージョンの ESLint を使用している場合でも、デフォルトを使用すると、ツールは警告を生成します。技術的には冗長ですが、明示的に{allowParens: false}を設定しても問題はありません。これにより、将来の ESLint アップグレードに備えることができ、CLI ツールをシンプルに保つことができます。)
このルールは、コードを記述するときに特別な注意を必要とします。
このルールでは、 &&や||などの特定の演算子を混合することが禁止されています。 。
たとえば、ルールは次の行について警告できます。
var foo = a + b * c ;ルールでは、次のように括弧を追加することが推奨されています。
var foo = a + ( b * c ) ;ただし、Prettier は多くの「不要な」括弧を削除し、次のように戻します。
var foo = a + b * c ;Prettier でこのルールを使用する場合は、式を別の変数に分割する必要があります。
var bar = b * c ;
var foo = a + bar ;ただし、Prettier は「不必要な」括弧をいくつか出力することに注意してください。
var foo = ( a && b ) || c ;ESLint 構成の例:
{
"rules" : {
"no-mixed-operators" : " error "
}
}このルールには特定のオプションが必要です。
このルールではタブ文字の使用が禁止されています。デフォルトでは、ルールはすべてのタブ文字を禁止します。タブを使用してインデントするように Prettier を設定しない限り、これは Prettier で問題なく使用できます。
幸いなことに、Prettier がスペースまたはタブを使用するかどうかに関係なく機能するようにルールを構成することができます。allowIndentationTabs allowIndentationTabs trueに設定します。このようにして、Prettier がインデントを処理し、 no-tabsコード内の他の場所にある潜在的なタブ文字を処理します。
ESLint 構成の例:
{
"rules" : {
"no-tabs" : [ " error " , { "allowIndentationTabs" : true }]
}
}このルールは、コードを記述するときに特別な注意を必要とします。
このルールでは、改行がステートメントを終了しているように見えてそうではない、混乱を招く複数行の式を禁止します。
たとえば、ルールはこれについて警告できます。
var hello = "world"
[ 1 , 2 , 3 ] . forEach ( addNumber )Prettier は通常、セミコロンが欠落していることが明らかな方法でこれをフォーマットします。
var hello = "world" [ ( 1 , 2 , 3 ) ] . forEach ( addNumber ) ;ただし、Prettier が複数行に分割して、 no-unexpected-multiline競合する場合があります。
const value = text . trim ( ) . split ( "n" ) [ position ] . toLowerCase ( ) ;ただし、Prettier はそれを複数の行に分割しており、競合が発生します。
const value = text
. trim ( )
. split ( "n" )
[ position ] . toLowerCase ( ) ;このルールが気に入った場合は、通常は Prettier で問題なく使用できますが、場合によっては、ルールを一時的に無効にするか、コードをリファクタリングする必要がある場合があります。
const value = text
. trim ( )
. split ( "n" )
// eslint-disable-next-line no-unexpected-multiline
[ position ] . toLowerCase ( ) ;
// Or:
const lines = text . trim ( ) . split ( "n" ) ;
const value = lines [ position ] . toLowerCase ( ) ;注:このルールを有効にする場合、そこから値を取得するには、ESLint と Prettier を 2 つの別々のステップとして (ESLint を最初に) 実行する必要があります。そうしないと、Prettier がコードを再フォーマットして、ESLint が何もレポートする機会が得られなくなる可能性があります (最初の例で見られるように)。
構成例:
{
"rules" : {
"no-unexpected-multiline" : " error "
}
}(以下は babel/quotes と @typescript-eslint/quotes にも当てはまります。)
このルールには、特定のオプションと特定の Prettier オプションが必要です。
通常、このルールはまったく必要ありません。ただし、それが役立つ場合が 2 つあります。
すべての文字列でバックティックを使用する (引用符を使用しない) 場合は、 "backtick"オプションを有効にします。
ESLint 構成の例:
{
"rules" : {
"quotes" : [ " error " , " backtick " ]
}
}次の例では、最初の配列項目はバッククォートの代わりに引用符を使用して記述できます。
const strings = [
`could have been a regular string` ,
`
multiple
lines
` ,
`uses ${ interpolation } ` ,
String . raw `tagged/` ,
] ; ESLint に`could have been a regular string`を強制的に"could have been a regular string"または'could have been a regular string'たい場合は、特定の設定を使用する必要があります。 quotesルールには、文字列オプションとオブジェクト オプションの 2 つのオプションがあります。
"single"または"double"に設定し、Prettier の singleQuote オプションと同期を保つ必要があります。"avoidEscape": true 。"allowTemplateLiterals": false不要なバッククォートを禁止します。 ESLint:
{
"rules" : {
"quotes" : [
" error " ,
" double " ,
{ "avoidEscape" : true , "allowTemplateLiterals" : false }
]
}
}Prettier (これはデフォルトなので追加する必要はありません):
{
"singleQuote" : false
}ESLint:
{
"rules" : {
"quotes" : [
" error " ,
" single " ,
{ "avoidEscape" : true , "allowTemplateLiterals" : false }
]
}
}より美しい:
{
"singleQuote" : true
}このルールは特定のオプションとともに使用できます。
このルールは、複数行の文字列テンプレートのインデントを自動的に修正し、テンプレートが含まれるコードと一致するようにします。構成可能なホワイトリストを使用して、空白を含む文字列が編集されないようにします。
Prettier は次のことを扱います。
さまざまなタグ、関数、コメントを使用します。
unicorn/template-indentデフォルトで同じタグ付きテンプレートの一部をフォーマットするため、競合が発生する可能性があります。たとえば、三項のインデントについては、ルールと Prettier の意見が一致していません。
condition
? null
: html `
< p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
mauris.
</ p >
` ;このルールが気に入った場合は、Prettier と同じテンプレートを処理しないようにルールを設定する限り、Prettier で問題なく使用できます。
ESLint 構成の例:
{
"rules" : {
"unicorn/template-indent" : [
" error " ,
{
"tags" : [
" outdent " ,
" dedent " ,
" sql " ,
" styled "
],
"functions" : [
" dedent " ,
" stripIndent "
],
"selectors" : [],
"comments" : [
" indent "
]
}
]
}
}注: "selectors"使用する場合、CLI ヘルパー ツールは、セレクターが競合を引き起こす可能性があるかどうかを検出できません。
このルールには特定のオプションが必要です。
このルールは、要素が自己終了するかどうかを強制します。
Prettier は通常、要素の記述方法を保持します。
< div />
< div ></ div >
< MyComponent />
< MyComponent ></ MyComponent >
< svg >< path d = " " /></ svg >
< svg >< path d = " " ></ path ></ svg >ただし、既知のvoid HTML 要素の場合、Prettier は常に自己終了スタイルを使用します。たとえば、 <img>は<img />に変わります。
このルールが気に入った場合は、 html.void "any"に設定する限り、Prettier で問題なく使用できます。
ESLint 構成の例:
{
"rules" : {
"vue/html-self-closing" : [
" error " ,
{
"html" : {
"void" : " any "
}
}
]
}
}これらのルールは Prettier と競合しませんが、Prettier と一緒に使用する場合には注意点がいくつかあります。
このルールは、JavaScript の紛らわしいカンマ演算子 (シーケンス式) の使用を禁止します。このコード部分は次のような動作をしていません。
matrix [ 4 , 7 ] ;Prettier は、シーケンス式が使用されていることを明確にするために上記に括弧を追加します。
matrix [ ( 4 , 7 ) ] ;ただし、 no-sequencesシーケンスが明示的にかっこで囲まれている場合、コンマ演算子を許可します。 Prettier はそれらを自動的に括弧で囲むため、ESLint からカンマ演算子に関する警告が表示されることはありません。
リファクタリング中に、偶発的なシーケンス式が発生することが簡単に発生します。 ESLint にそのような間違いを検出させたい場合は、( no-sequencesドキュメントで説明されているように) no-restricted-syntax を使用してシーケンス式を完全に禁止することをお勧めします。
{
"rules" : {
"no-restricted-syntax" : [ " error " , " SequenceExpression " ]
}
}特殊なケースでカンマ演算子を使用する必要がある場合は、式の上の行に// eslint-disable-next-line no-restricted-syntaxコメントを配置できます。 no-restricted-syntaxアプローチを使用する場合、 no-sequences安全に無効にすることができます。
必要に応じて、カスタム メッセージを指定することもできます。
{
"rules" : {
"no-restricted-syntax" : [
" error " ,
{
"selector" : " SequenceExpression " ,
"message" : " The comma operator is confusing and a common mistake. Don’t use it! "
}
]
}
}eslint-config-prettier がテストされている ESLint、Prettier、および ESLint プラグインの正確なバージョンについては、package.json を参照してください。
これらのバージョン以降、新しいルールが追加されましたか?何かルールを見逃していませんか？除外したいプラグインはありますか?イシューまたはプル リクエストを開いてください。
eslint-plugin-foobar のサポートを追加したい場合は、次のようにします。
まず、 index.jsにルールを追加します。
"foobar/some-rule" : "off"次に、 test-lint/foobar.jsを作成します。
/* eslint-disable quotes */
"use strict" ;
// Prettier does not want spaces before the parentheses, but
// `plugin:foobar/recommended` wants one.
console . log ( ) ; test-lint/foobar.js eslint-config-prettier が ESLint 構成に追加されるまで、eslint-plugin-foobar と eslint-plugin-prettier を同時に使用すると失敗する必要があります。ファイルは Prettier に従ってフォーマットされている必要があり、そのフォーマットはプラグインと一致しない必要があります。
最後に、いくつかの場所でプラグインについて言及する必要があります。
package.jsonの「devDependency」フィールドに eslint-plugin-foobar を追加します。.eslintrc.base.jsおよびeslint.base.config.jsで使用されていることを確認してください。README.mdのサポートされているプラグインのリストに追加してください。完了したら、 npm test実行して、すべてが正しく行われたことを確認します。他のいくつかの npm スクリプトを実行します。
"test:prettier" 、Prettier がすべてのファイルに対して実行されたことを確認します。"test:eslint" 、eslint-config-prettier からの除外が使用されている場合に、 test-lint/内のファイルが ESLint に合格することを確認します。また、eslint-config-prettier 自体のコードもリントします。"test:lint-verify-fail" test/lint-verify-fail.test.jsのテストによって実行されます。"test:lint-rules" test/rules.test.jsのテストによって実行されます。"test:jest"さまざまなことをチェックする単体テストを実行します。"test:cli-sanity"および"test:cli-sanity-warning" CLI の健全性チェックです。 マサチューセッツ工科大学
