ESlintとは
ESlintはJavaScriptやTypeScriptなどの静的解析ツール
ESLint公式ドキュメント
導入方法
以下を実行すると、設定のためのいくつかの質問が表示される
npm init @eslint/config@latest詳細設定
ESlintで細かいルールを決めたいときはrulesに記述する（ルールは全部で200以上存在するので、細かくすべて指定しようとは思わないほうがいい）
詳しくは公式ドキュメントをご覧ください。
Prettierとは
コードフォーマッター（ソースコードを整形してくれるツール）
Prettier公式ドキュメント
導入方法
まず、Prettier をインストールする。
npm install --save-dev --save-exact prettier.prettierrc または prettier.config.js をプロジェクトルートに自身で作成
ファイルを作成せず、何も設定しなければ、公式のデフォルトが設定される
以下サンプル
export default {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: true,
singleQuote: false,
quoteProps: "as-needed",
jsxSingleQuote: false,
trailingComma: "es5",
bracketSpacing: true,
bracketSameLine: false,
arrowParens: "always",
proseWrap: "preserve",
htmlWhitespaceSensitivity: "css",
endOfLine: "lf",
embeddedLanguageFormatting: "off",
}prettierの設定項目
printWidth
折り返す行の長さを指定（Default:80）
tabWidth
インデントのスペースの数を指定（Default:2）
useTabs
スペースではなくタブで行をインデントして、trueを設定することでタブを適用する（Default:false）
semi
ステートメントの最後にセミコロンを追加する。trueを設定することで最後にセミコロンを追加する（Default:true）
singleQuote
ダブルクォートの代わりにシングルクォートを使用する。JSX quotesはこの項目を無視する。trueを設定することでシングルクォートを使う（Default:false）
quoteProps
オブジェクトのプロパティが引用されるときに変更する（Default:as-needed ）
- as-needed : 必要な場合にのみ、オブジェクトプロパティを引用符で囲む
- consistent: オブジェクトの少なくとも1つのプロパティに引用符が必要な場合は、すべてのプロパティを引用符で囲む
- preserve : 入力された引用符を尊重する
jsxSingleQuote
JSXでダブルクォートの代わりにシングルクォートを使用する（Default:false）
trailingComma
末尾のカンマの設定（Default:none ）
- es5 : ES5で有効な末尾のカンマ(オブジェクト、配列など)
- none : 末尾にカンマをつけない
- all : 可能な限り末尾にカンマを付ける(関数の引数含む)
bracketSpacing
オブジェクトリテラルの角かっこの内側にスペースを入れる（Default:true）
bracketSameLine
複数行の要素の最終行の最後に「>」を置く。falseは次の行に置く（Default:false）
arrowParens
アロー関数の()が省略可能でも常に書く（Default:avoid ）
- always : ()を常に書く
- avoid : 省略可能なときは()を書かない
proseWrap
markdownの折返しの設定（Default:preserve ）
- always : Print Widthで指定した値を超える時は折り返す
- never : 折り返さないしない
- preserve : そのまま折り返す
htmlWhitespaceSensitivity
HTMLファイルのグローバルな空白の感度を指定（Default:css）
- css : displayプロパティのデフォルト値を尊重
- strict : 空白を区別する
- ignore : 空白は区別しない
endOfLine
改行の文字コードを指定（Default:auto）
- lf : Linux、MacOS、gitリポジトリで一般的な、ラインフィード(\n)のみ
- crlf : Windowsで一般的な、キャリッジリターン + ラインフィード文字(\r\n)
- cr : キャリッジリターン文字(\r)のみ
- auto : 既存の行末を維持
embeddedLanguageFormatting
Prettierがファイルに埋め込まれた引用コードをフォーマットするかどうかを制御（Default:auto ）
- off : 埋め込まれたコードを自動的にフォーマットしない
- auto : Prettierが自動的に識別できる場合、埋め込みコードをフォーマットする
コメント