Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
24
Help us understand the problem. What is going on with this article?
@katu_

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

More than 1 year has passed since last update.

目次

  1. ESLintとは
  2. ESLintの使い方
  3. Prettierとは
  4. Prettierの使い方
  5. 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.jsonscriptsを記述しnpm runで実行するのが望ましいが、ちょっとした動作にはnpxが便利

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

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

参照

24
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
katu_
学習記録のためにQiita始めました

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
24
Help us understand the problem. What is going on with this article?