ESlintとPrettierの使い方と導入方法を初心者向けに解説

こんにちは、新米エンジニアのにっしーこと西澤です。

今年の4月からエンジニアになった私が直面している悩みがあります。それは、「綺麗なコードを書きたいけど、そもそも綺麗なコードがなんなのかがわからない。ルールもわからないから、どうしたらいいかわからない……」ということ。

同じ悩みを持っている方は多いんじゃないでしょうか？

そこでこの記事では、そんな悩みを解決してくれるESlintとPrettierについて紹介します！

なぜESlintとPrettierがおすすめなのか

導入するメリットはズバリ、ある程度のクオリティを保ちながらコードを書けるようになることです。また、コードが綺麗になることで可読性が高くなり、コードレビューの手間が減るなどたくさんのメリットがあります。

ESlintとは？

ESlintはJavaScriptやTypeScriptなどの静的解析ツールです。

と紹介されているのをよく見ます。静的解析ツールと聞くとよくわかりませんが、プログラムを書いていてなにか悪いことをしたときに注意してくれる、お母さん的な存在だと思っています。

実際に、ふだんLintを使う際は”helpmather”というコマンドで呼び出しています（笑）。私みたいな多少汚いプログラムでも許容してしまうようなズボラなタイプにはなくてはならないツールだと思います。

導入方法

開発環境

• Next.js 14.1.4
• TypeScript 5
• Sass 1.74.1

npm init @eslint/config@latest

これをターミナルで実行すると、下記のように設定のためのいくつかの質問が表示されます。

聞かれた全文と私の回答は下記になります。

（訳）どのようにESLintを使いますか？
? How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems 

（訳）どのようなモジュールを使いますか？
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

（訳）使用しているフレームワークは？
? Which framework does your project use? … 
❯ React
  Vue.js
　　　　None of these

（訳）TypeScriptは使っていますか？
? Does your project use TypeScript?  No / › Yes

（訳）コードはどこで動かしてますか？
? Where does your code run? …  (Press  to select, <a> to toggle all, <i> to invert selection)
✔ Browser
  Node
  
 globals, @eslint/js, typescript-eslint, eslint-plugin-react, eslint
 （訳）これらのパッケージを今すぐインストールしますか？
 ? Would you like to install them now? › No / ❯ Yes
 
 （訳）どのパッケージ・マネージャーを使いますか？
? Which package manager do you want to use? … 
❯ npm
  yarn
  pnpm
  bun
</i></a>

すべて完了すると自動で、eslintrc.jsファイルが作成されます。

プラグインのインストールは以下でおこないます。

npm install eslint-plugin-json

基本的な設定

さきほどeslintrc.jsファイルが作成されましたが、jsonファイルのほうが使いやすいのでそちらに変更していきます。

eslintrc.jsonファイルを作成して、以下のように設定します。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "prettier" //prettierを入れない場合削除
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "json"],
  "rules": {
    "no-console": "error",
    "@next/next/no-img-element": "off",
    "@typescript-eslint/no-explicit-any": "off"
  },
  "ignorePatterns": [
    "src/components/digital-agency/**/*",
    "package.json",
    "package-lock.json",
    "tsconfig.json",
    ".eslintrc.json",
    "src/components/HTMLComponentWithScript.jsx"
  ]
}

詳細設定

ESlintで細かいルールを決めたいときはrulesに記述します（ルールは全部で200以上存在するので、細かくすべて指定しようとは思わないほうがいいかも……）。

詳しくは公式ドキュメントをご覧ください。

"rules": {
    "no-console": "error",
    "@next/next/no-img-element": "off",
    "@typescript-eslint/no-explicit-any": "off"
  },

ここでは、下記3つを指定しています。

実行してみよう！

npm run lint

 
なにも問題がなければ、下記のように✔No ESLint warnings or errorsと表示されます。

npm run lint

> test-app@0.1.0 lint:es
> next lint

✔ No ESLint warnings or errors

Prettierとは？

コードフォーマッター（ソースコードを整形してくれるツール）のことです。

• HTML
• JavaScript
• Jsx
• Angular
• TypeScript
• Json

など、さまざまな形式をサポートしてくれます。

不必要なスペースやコードを自動で削除してくれるので、Lintと同様「あとで消せばいいや」と不必要なコードを残し、のちに消し忘れる私みたいなタイプにはぴったりなツールだと思います。

ただ便利な反面、本来必要なスペースや書き方を削除してしまうことがあるので、使う際は注意が必要になります。

導入方法

npm install prettier@3.2.5 --save-dev
npm install eslint-config-prettier@8.3.0 --save-dev

基本的な設定

prettierrc.jsonに下記のように設定していきます。設定できる項目が限りなく多いので、今回はおすすめの設定をしています。

詳しくは公式ドキュメントをご覧ください。

{
  "printWidth": 80,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "useTabs": false
}

実行してみよう！

package.jsonのscriptに下記を追加してください。

"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"

 
ターミナルで実行していきます。

npm run format

実行すると自動整形が始まり、コードの修正をおこなってくれます。

もっと使いやすくするために

VScodeの拡張機能でPrettierをインストールし設定をおこなうと、コードの保存（ctl+s）のタイミングで自動整形されるので、そちらもお試しください。

ただ、前述したとおり自動で整形してしまうぶん、逆に開発しづらくなってしまう場合があります。Prettierが簡単に動いてくれるのはありがたいですが、リスクが増える可能性があるのでお気をつけください！

その他おすすめのLintツール

markuplint

markuplintは主にHTMLファイル内の文法エラーや潜在的な問題を自動的に検出し、修正するためのツールです。

導入方法

ローカルに.markuplintrc.jsonファイルを作成します。

npx markuplint --init

ここで、markuplintrcというファイルが生成されますが、自分で設定を記述したい場合は削除しても大丈夫です。今回は削除しています。

このままでは、Next.jsをサポートしていないので、次にNext.jsに対応させるためのモジュールをインストールします。

npm install -D @markuplint/react-spec @markuplint/jsx-parser

基本的な設定

.markuplintrc.json

{
  "extends": ["markuplint:recommended-react"],
  "parser": {
    ".tsx$": "@markuplint/jsx-parser"
  },
  "specs": {
    ".tsx$": "@markuplint/react-spec"
  },
  //対応させたくないファイルをここに記述する
  "excludeFiles": ["src/pages/_app.tsx"]
}

stylelint

導入方法

npm i -D stylelint

拡張機能のインストール

npm install stylelint-config-recess-order
npm install stylelint-config-recommended-scss
npm install stylelint-prettier

基本的な設定

.styleintrc.json

{
  "plugins": ["stylelint-prettier"],
  "extends": ["stylelint-config-recess-order", "stylelint-config-recommended-scss"],
  "rules": {
    "scss/at-rule-no-unknown": null,
    "scss/at-mixin-pattern": null,
    "scss/at-function-pattern": null,
    "scss/operator-no-unspaced": null,
    "no-descending-specificity": null,
    "color-hex-length": "long",
    "selector-class-pattern": null,
    "selector-pseudo-element-no-unknown": null,
    "prettier/prettier": true
  },
  "ignoreFiles": ["**/node_modules/**"]
}

package.jsonのscriptの設定

最後に、今までで導入したLintを用途に応じて使い分けられるように、scriptの設定をおこなっていきます。

script設定って？

ターミナルでコマンドを動かせるようにpackage.json内のscriptの中に記述していきます。

ふだん何気なく使っているbuildコマンドやdevコマンドもここに記述されています。

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
},

EslintとPrettierのscript設定

まず、ESlintとPrettierのコマンドを記述していきましょう。

"lint": "next lint",
"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"

markuplintとstylelint用のscript設定例

次にmarkuplintとstylelintのコマンドを記述します。

ここでESlintのコマンドは他のLintのコマンドと差別化するために、lint:esと変更してあります。

"lint:html": "markuplint 'src/**/*.{html,jsx,tsx}'",
"lint:style": "stylelint 'src/**/*.{css,scss}'",
//stylelintを用いた自動整形
"lint:style-fix": "stylelint --fix 'src/**/*.{css,scss}'",
//すべてのlintを同時に動かす
"lint:check": "npm run lint:html && npm run lint:style && npm run lint:es",
"lint:es": "next lint",
"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"

コマンドを実行してみよう

今設定したコマンドを実際にVScode内のターミナルで実行してみましょう。

npm run lint:check

> test-app@0.1.0 lint:check
> npm run lint:html && npm run lint:style && npm run lint:es


> test-app@0.1.0 lint:html
> markuplint 'src/**/*.{html,jsx,tsx}'

markuplint passed /Users/nishizawa_yuya/Documents/test-app/src/app/page.tsx
markuplint passed /Users/nishizawa_yuya/Documents/test-app/src/app/layout.tsx

> test-app@0.1.0 lint:style
> stylelint 'src/**/*.{css,scss}'


> test-app@0.1.0 lint:es
> next lint

✔ No ESLint warnings or errors

正しく設定ができていれば、このように、Lintが動くことが確認できます。

うまく動かない場合は、packege.json内のscriptやLintが正しくインストールされているかを確認してみてください。

よくある問題とその対処法

まとめ

今回は、ESlint・Prettierの特徴や導入の仕方についてご紹介しました。ESlint・Prettierを導入する良さを感じていただけることはできましたでしょうか？

プログラムを正しく書くことは、処理が早くなることはもちろん可読性も向上するなど、いいことづくめだと思います。私もツールをうまく活用しながら身につけていきたいです。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

LIGにWeb制作の
相談をしてみる