目次
- ESLintとは
- ESLintの使い方
- Prettierとは
- Prettierの使い方
- ESLintとPrettierを併用する理由
今回の学習のゴール
- 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のような構文チェック（括弧やスペースの使い方などのスタイルが統一されているかチェック）機能がない