React+TypeScriptのアプリにESLintとPrettierを導入しよう!VSCodeの拡張機能も紹介!静的解析ツールとフォーマッター導入編

ESLintとPrettierの導入
  • URLをコピーしました!

今回は、React+TypeScriptアプリケーションにESLint(静的解析ツール)とPrettier(フォーマッター)を導入していこうと思います!
静的解析ツールとフォーマッターをどうしたらいいかわからない方は参考にしてみてください!

まだReact+TypeScriptの環境を構築していない方は、「ReactとTypeScriptとRedux Toolkitの開発環境を構築しよう!」を参考にしてみてください!

ESLintとは??

JavaScript(TypeScript)のための静的検証ツールです。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースなどコードスタイの一貫性を保つのに役に立ちます。

Prettierとは??

ソースコードを整形してくれるコードフォーマッターです。
Node.js上で動作して、インデントや改行などの書き方を自動で統一してくれます。

複数人で開発する場合に、フォーマットを統一してくれるので読みやすいコードにしてくれます。

本記事はReact・TypeScript・Redux Toolkitの利用を前提に実装をしていきます。
構築からデプロイまでやっていきますので、必要に応じて他の記事も参考にしてみてください。

学習に使った本はこちら!

¥3,432 (2022/12/03 14:42時点 | Amazon調べ)
¥5,601 (2022/12/03 14:42時点 | Amazon調べ)
¥700 (2022/12/02 17:28時点 | Amazon調べ)
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥15,980 (2022/12/09 11:28時点 | Amazon調べ)
目次

ESLintの導入

まずはESLintを導入していきましょう!

ESLintをインストール

  • ESLintとTypeScript用のESLintのプラグインをインストール
$ npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
  • アプリケーション配下(sample-client)>.eslintrc.jsonを作成
  • .eslintrc.jsonの中身は、基本的には下記をコピペでいいと思います。
    必要に応じてルールを追加してみてください。
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "env": { "browser": true, "node": true, "es6": true },
  "rules": {
    // ruleを追加したい場合
  }
}

VSCodeの拡張機能をインストール

  • ※本記事は、VSCodeを利用することを前提としています。
    VSCodeのインストールがまだの方は、VSCodeのインストールをおすすめします。
  • ESLintの拡張機能をインストール(インストールする拡張機能は画像の通り)

ESLintの導入はこれで完了です!

クマじい

これなら簡単じゃな!

Prettierの導入

続いては、Prettierを導入していきます!

  • prettierとeslint-config-prettierをインストール
  • 【補足】eslint-config-pretterは、ESLintのルールをいちいち手動でOFFにする必要をなくすためのライブラリでeslintとprettierを共存させるなら入れておくと簡単に設定してくれます。
$ npm install -D prettier eslint-config-prettier

VSCodeの拡張機能をインストール

  • Prettierの拡張機能をインストール(インストールする拡張機能は画像の通り)
  • VSCodeの設定を変更していく。
  • File>Preferences>Settingsを開いて、画像の赤枠のアイコンを押下
  • Settingsの内容を修正する。
  • 【備考】ハイライトがついている部分を追加したら大丈夫です。他の箇所は、人によって異なると思うので。
{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.autofetch": true,
  "terminal.integrated.automationShell.windows": "",
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

これでPrettierの設定も完了です!

まとめ

今回は、React+TypeScriptアプリケーションにESLint(静的解析ツール)とPrettier(フォーマッター)を導入をやりました。個人開発では、気にすることは少ないかもしれませんが、複数人で開発することを想定して導入しておくことをおすすめします。

本記事はReact・TypeScript・Redux Toolkitの利用を前提に実装をしていきます。
構築からデプロイまでやっていきますので、必要に応じて他の記事も参考にしてみてください。

また、今回のReactを勉強するにあたり利用した教材をあげています。
主に本(Amazon Unlimitedを含む)とUdemyの動画教材を利用しています。ここには私なりに理解した内容をもとに独自に内容を考えて共有しているので興味ある方は、本やUdemyを購入して勉強してみることをおすすめします。

学習に使った本はこちら!

¥3,432 (2022/12/03 14:42時点 | Amazon調べ)
¥5,601 (2022/12/03 14:42時点 | Amazon調べ)
¥700 (2022/12/02 17:28時点 | Amazon調べ)
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥15,980 (2022/12/09 11:28時点 | Amazon調べ)
ESLintとPrettierの導入

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次