フロントエンドのフの字も知らない私がESLintとPrettierを使ってみる

JavaにはソースフォーマッターにはCheckStyle、静的解析にはSpotBugがある。
TypeScriptも同様にフォーマッターを使って、コーディングのフォーマットを統一し静的解析によって 未然に不正なコーディングをチェックすることでソースコードの品質をあげたい。

フォーマッターと静的解析の使い方を学ぶことにする。

どんなツールがあるのか？

Prettier

Prettierは、非常に厳しい評価をするコードフォーマッターである。
サポートしている言語は、HTML、CSS、TypeScript、JavaScriptなど複数ある。

ESlint

JavaScriptの静的解析ツール。
TSLintが静的解析ツールとして使用されていたが廃止され、ESLintに統一されるとのこと。

github.com

使うための準備

Prettier

prettierのパッケージをインストールする

$ yarn add prettier --dev --exact

ESLint

ESLintのパッケージをインストールする。

$ yarn add eslint --dev

設定ファイルを作成する。

$ ./node_modules/.bin/eslint --init

設定ファイルの作成は、対話形式となっている。 選択は以下のものを選択した。

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? Yes
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Standard: https://github.com/standard/standard
? What format do you want your config file to be in? JSON

? What type of modules does your project use? CommonJS (require/exports)

tsconfig.json のmoduleでcommonjsを設定しているので、CommonJSを選択。

ESLintのルールは自分で設定する必要がある。

"extends": "eslint:recommended" を指定することでESLintで推奨されているルールが適用される。

eslint.org

recommendedで不足しているルールは、追加する必要がある。

"rules": {
    "indent": ["error", 4]
}

Googleが使用しているESLintのルールもあれば、 github.com

JavaScript Standard Styleもある。 github.com

GoogleまたはStandardのルールをベースに不足しているルールを追加するのが良いと思う。
ルールについては、時間がある時に調べたい。

PrettierとESLintをなぜ併用するのか？

Prettierが提供するのはコーディングルールの適用であり、コードに含まれるバグの指摘は含まれてない。
コードのバグを見つけるのは、Linterの役割なので併用が必要。

PrettierとESLintを連携するには

必要なパッケージのインストールと.eslintrcのカスタマイズが必要。

$ yarn add -D eslint-config-prettier eslint-plugin-prettier

パッケージ名	説明
eslint-config-prettier	不要なルールとPrettierと競合するかもしれないルールを全て無効にする
eslint-plugin-prettier	ESLintでPrettierを適用する

.eslintrcを変更する

{
    //......
    "extends": [
        "standard",
        "plugin:prettier/recommended"
    ],
    //......
    "plugins": [
        "prettier",
        "@typescript-eslint"
    ],
    "rules": {
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true
            }
        ]
    }
}

これで、eslint --fix でESLintとPrettierが併用できる。

--fix オプションなしだとPrettierが効いている？

--fix を付けずにバグの箇所だけを確認したいときがあるかもしれないが、eslint-config-prettierを 適用していることでPrettierのルールが優先されてしまうようです。 併用しているので、コーディングしては--fixオプションつけて修正してもらうのが良さそう。

まとめ

ESLintとPrettierを併用することで、コーディングルールのチェックと静的解析が同時に実行できるので効率的に 作業ができると思う。 静的解析ルールなどは細かく見れていないので、また時間を見つけて確認しようと思う。

参考

qiita.com