eslint, prettier メモ

概念・言葉の定義・メリットデメリットなど

ESLint

JavaScript のための静的検証ツール

  • コードを実行する前に明らかなバグを見つける
  • 括弧やスペースの使い方などのスタイルを統一したりするのに役立つ。

Prettier(プリティア

コードフォーマッター(ソースコードを整形してくれるツール)のこと。

  • ソースコードの品質を保つ(コードのスタイルの一貫性を保つため)
  • コードレビュー時に、設計や命名などの重要な箇所に集中するため(コードのスタイルの指摘に時間を割くのを防ぐため)
  • 複数のメンバーが各自の整形ルールを適用し、更新する度に余計な差分が発生することを防ぐため
  • ソースコードを綺麗にするための労力(スタイル定義の議論や時間)を費やさなくて済むため ツールに任せられることはツールに任せてしまった方が今後楽になるため

Prettier をESLint と併用する理由

Prettier の方がコード整形が優れているから

  • ESLint では整形できないコードを整形できる
  • ESLint と比べて手軽で確実に整形できる(eslint --fixは設定に該当したエラーのみを整形するから、設定に依存してしまう。厳密に設定しようとすると設定ファイルの中身が膨大になる。これに対してprettierはデフォルトの成形ツールが存在するため、eslintのようなデメリットがない)

もっとも、Prettier はコードフォーマッタのため、ESLint のような構文チェック機能はない。

そこで、コードの整形は Prettier が行い、コードの構文チェックは ESLint が行うように併用する。

しかし、ESLint にもフォーマットのルールが存在するため、ESLint の整形と Prettier の整形が競合する可能性がある。

そのため、ESLint のフォーマットのルールを無効化にして、Prettier と ESLint を実行できるようにする。

使い方

ESlint

①eslintrc.jsonファイル作成
$ eslint ファイル名 を実行

.eslintrc.jsonファイル

{
    "extends": ["eslint:recommended"],
    "plugins": [],
    "parserOptions": {},
    "env": {"browser": true},
    "globals": {},
    "rules": {}
}

$ eslint ファイル名を実行 (ディレクトリで指定することも可能)

⇨コードで問題のある箇所が検出される

.eslintrc.jsonファイルの設定について

  • root:ESLint は実行時のカレントディレクトリを起点にして、上位のディレクトリの設定ファイル (.eslintrc.*)を探す⇨ root: true の指定があると、カレントディレクトリを探しに行ってくれる。
  • env:実行環境の指示 例えば、Web ブラウザ上で動作させる JavaScript コードであれば browser、Node.js 環境で動作させるコードであれば node を true に設定。 内部的には、選択した環境ごとに globals オプションの設定が行われます。
  • parser ESLint は標準で JavaScript コードのパースに対応しているが、TypeScript コード (.ts、.tsx) を扱えるようにするには、TypeScript 用のパーサー (@typescript-eslint/parser) をインストールして指定する必要あり。
例.
parser: '@typescript-eslint/parser'
  • parserOptions:パーサーの設定 ESLint のデフォルトパーサーは ECMAScript 5 の構文で記述されたコードを想定。 別のバージョンの ECMAScript 構文で記述したいときは、ecmaVersion でバージョンを設定する必要あり。
  • plugins:使用するプラグインの指定
ESLint の組込みルールは汎用的なもの。特定のライブラリやフレームワーク、または実行環境に特化した検証は行わない。そのような検証はプラグインとして提供される。

プラグインとは ESLint の追加ルールをまとめた npm パッケージ。
利用するには、npm install コマンドでインストールして、設定ファイルの "plugins" プロパティを指定する。


このプラグインは次のようなことをチェックしてくれます。

require() したファイルが存在するかどうか
require() したモジュールがきちんと package.json の dependencies に存在するかどうか
非推奨になった API を使っていないかどうか
指定したバージョンの Node.js でサポートされていない ECMAScript 構文を使っていないかどうか
Shebang (#!/usr/bin/env node) の使い方が誤っていないかどうか
"error" ... ルール違反を見つけるとエラーにする (赤くなる)。
"warn" ..... ルール違反を見つけると警告にする (黄色くなる)。
"off" ....... ルール違反を見つけても何もしない。

設定例
"rules": {
   "semi": "error"
 }

オプションも使える
オプションを利用するときは、各ルールの値が配列になる。

Prettier

.prettierrcファイルを作成

  • printWidth:折り返す行の長さを指定。(デフォルトは80)
  • tabWidth:インデントのスペースの数を指定(デフォルトは2)
  • useTabs:スペースではなくタブで行をインデントして、trueを設定することでタブを適用する(デフォルトはfalse)
  • semiステートメントの最後にセミコロンを追加する。trueを設定することで最後にセミコロンを追加する(デフォルトはtrue。falseにするとセミコロンが無いとエラーになる箇所にだけセミコロンを追加する。)
  • singleQuote:ダブルクォートの代わりにシングルクォートを使用する。JSX quotesはこの項目を無視する(trueを設定することでシングルクォートを使う。デフォルトはfalse)
  • quoteProps:オブジェクトのプロパティが引用されるときに変更する。

    • as-needed : 必要な場合にのみ、オブジェクトプロパティを引用符で囲む(デフォルト)
    • consistent: オブジェクトの少なくとも1つのプロパティに引用符が必要な場合は、すべてのプロパティを引用符で囲む
    • preserve : 入力された引用符を尊重する
  • jsxSingleQuote:JSXでダブルクォートの代わりにシングルクォートを使用する(デフォルトはfalse)

  • trailingComma:末尾のカンマの設定。
    • es5 : ES5で有効な末尾のカンマ(オブジェクト、配列など)
    • none : 末尾にカンマをつけない(デフォルト)
    • all : 可能な限り末尾にカンマを付ける(関数の引数含む)
  • bracketSpacing:オブジェクトリテラルの角かっこの内側にスペースを入れる(デフォルトはtrue)
  • bracketSameLine:複数行の要素の最終行の最後に「>」を置く。falseは次の行に置く(デフォルトはfalse)
  • arrowParens:アロー関数の()が省略可能でも常に書く。
    • always : ()を常に書く
    • avoid : 省略可能なときは()を書かない(デフォルト)
  • proseWrapmarkdownの折返しの設定
    • always : Print Widthで指定した値を超える時は折り返す
    • never : 折り返さないしない
    • preserve : そのまま折り返す(デフォルト)
  • htmlWhitespaceSensitivity:HTMLファイルのグローバルな空白の感度を指定
    • css : displayプロパティのデフォルト値を尊重(デフォルト)
    • strict : 空白を区別する
    • ignore : 空白は区別しない
  • endOfLine:改行の文字コードを指定
    • lf : LinuxMacOS、gitリポジトリで一般的な、ラインフィード(\n)のみ
    • crlf : Windowsで一般的な、キャリッジリターン + ラインフィード文字(\r\n)
    • cr : キャリッジリターン文字(\r)のみ
    • auto : 既存の行末を維持(デフォルト)
  • embeddedLanguageFormatting:Prettierがファイルに埋め込まれた引用コードをフォーマットするかどうかを制御
    • off : 埋め込まれたコードを自動的にフォーマットしない
    • auto : Prettierが自動的に識別できる場合、埋め込みコードをフォーマットする(デフォルト)