More than 3 years have passed since last update.

ESLint / Prettier について学んだことまとめ

Last updated at 2019-12-13Posted at 2019-12-09

今回の学習のゴール

Prettier/ESLintとは何か、何ができるかを知る
実際の使い方について知る

1. ESLintとは

JavaScriptのための静的検証ツール
ファイル内のバグを見つけたり、括弧やスペースの使い方などのスタイルが統一されているかチェックしてくれる
特徴
- プロジェクトに合わせたルールを設定できる
- ECMAScriptを標準サポートしている
  - ECMAScriptとは、JavaScriptの標準規格のこと
  - JavaScriptはNetscape社のブラウザで使われる言語として開発され、他のブラウザではJavaScriptを独自に拡張して使用されたため、標準化なされていない言語であった
- 複数のエディタとの統合が可能（Sublime、Atom、Visual Studio Codeなど）

2. ESLintの使い方

Node.jsのパッケージ管理ツールnpmを利用してローカルにインストール

$ npm install -D eslint    # -Dは--save-devの略

ESLintの設定ファイルを作成
- JavaScript, YAML, JSONのファイル形式で記述できる
- ESLintのルール項目一覧は Rules - ESLint - Pluggable JavaScript linter を参照
- プロパティ名（ルールの名前）と値（以下のようなルール）を設定する
  - "error"　ルール違反を見つけるとエラーがでる（赤くなる）
  - "warn"　ルール違反を見つけると警告がでる（黄色くなる）
  - "off"　ルール違反を見つけても何もしない

.eslintrc.json

{
  "rules": {
    "semi": ["error", "always"],    // セミコロンをつけるかつけないか
    "semi-style": ["error", "last"],    // セミコロンを行末に書くか、次の文の行頭に書くか
    "no-extra-semi": "error"    // 余分なセミコロンを禁止する
  }
}

eslintコマンドを実行

$ eslint <対象ファイル>    # 警告やエラーがでて修正箇所を教えてくれる

3. Prettierとは

ソースコードを整形してくれるツールのこと
メリット
- コードのスタイルの一貫性が保たれる
- コードレビューの際にコードのスタイルの指摘に時間を割くのを防ぐことができる
- プロジェクト単位でコードフォーマットを統一できる
  - メンバーが各々の整形ルールを適用することによって生まれる差分をなくすことができる

4. Prettierの使い方

Prettierをローカルにインストール

$ npm install -D prettier    # -Dは--save-devの略

フォーマットの設定ファイル.prettierrcを作成

YAML, JSONのファイル形式で記述できる
オプションはOptions · Prettierを参照

.prettierrc.json

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}

フォーマットされているかの確認

$ npx prettier --check <ファイル名>    # --checkは-cでも可

$ prettier --check "src/**/*.js"    # src配下の.js拡張子のファイル全てを指定する場合

Prettierコマンド

ファイルがフォーマットされている場合以下のように表示される

Checking formatting...
All matched files use Prettier code style!

一部フォーマットされていないファイルがある場合リストが出力される

Checking formatting...
src/hoge.js
src/hogehoge.js
Code style issues found in the above file(s). Forgot to run Prettier?

フォーマット後の内容を標準出力する

$ npx prettier <ファイル名>

フォーマット後の内容でファイルを上書きする

$ npx prettier --write <ファイル名>

Prettierのヘルプコマンド

$ npx prettier -h

実行結果

Output options:

  -c, --check              Check if the given files are formatted, print a human-friendly summary
                           message and paths to unformatted files (see also --list-different).
  -l, --list-different     Print the names of files that are different from Prettier's formatting (see also --check).
  --write                  Edit files in-place. (Beware!)

Format options:

< 以下省略 >

npm と npx について

npmはNode Package Managerのこと
npxはnpmのバージョン5.2.0で導入されたコマンド
- npxを使用するとローカルにインストールしたnpmパッケージをnpxコマンドで実行できる
ローカルのnpmパッケージを使用する方法はいくつかあるが、実案件でタスクを共有する場合はpackage.jsonにscriptsを記述しnpm runで実行するのが望ましいが、ちょっとした動作にはnpxが便利

5. ESLintとPrettierを併用する理由

Prettierには、ESLintでは整形できないコードを整形できる
- ESLintでは一行の文字数が長いコードのエラーを出力してくれるが整形はされない
- Prettierは一行の文字数が長いコードも適切に改行し整形してくれる
Prettierは、ESLintと比べて手軽で確実に整形できる
- ESLintは設定に該当したエラーのみ整形するため、整形を厳密に行うためには多くの設定を指定する必要がある
- Prettierはデフォルトの整形ルールが存在するのでPrettierコマンドを実行するだけでコードが整形される
Prettierはコードフォーマッタであるので、ESLintのような構文チェック（括弧やスペースの使い方などのスタイルが統一されているかチェック）機能がない

参照

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

ESLint / Prettier について学んだことまとめ

目次

今回の学習のゴール

1. ESLintとは

2. ESLintの使い方

3. Prettierとは

4. Prettierの使い方

Prettierをローカルにインストール

フォーマットの設定ファイル.prettierrcを作成

Prettierコマンド

npm と npx について

5. ESLintとPrettierを併用する理由

参照