Frontend Academy · レッスン

PrettierとESLintの設定

自動整形用のPrettierとエラー検出用のESLintを追加し、両ツールを設定して、保存時に整形するワークフローへ統合します。

「PrettierとESLintの設定」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

コードスタイルを自動化する理由

手作業によるコードフォーマットの議論は、チームの時間を浪費します。Prettierはコードを一貫したスタイルに自動フォーマットします。ESLintはバグを検出し、ベストプラクティスを適用します。両者を組み合わせることで、コードレビューで指摘される問題を一つの大きなカテゴリごとなくせます。

Prettierのインストール

Prettierを開発用依存関係としてインストールし、設定ファイルを作成して、package.jsonにformatスクリプトを追加します。Prettierは設定なしでも動作し、デフォルト値も適切ですが、必要に応じてカスタマイズできます。

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

VSCodeとPrettierの統合

Prettier - Code Formatter拡張機能をインストールします。次に、これをデフォルトのフォーマッターに設定し、設定でformatOnSaveを有効にします。これで、ファイルを保存するたびにPrettierが実行されます。

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

ESLintのインストール

ESLintをインストールし、npm init @eslint/configで初期化します。このウィザードでは、環境（browser/node）、モジュールシステム、TypeScriptサポートを選択できます。eslint.config.jsファイルが生成されます。

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

ESLint設定の例

ブラウザー向けJavaScriptプロジェクトで使う、シンプルなESLint flat configです。ルールには'error'、'warn'、'off'を指定できます。強固な基盤にするには、@eslint/js recommendedのような共有設定を拡張します。

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

TypeScript ESLint

TypeScriptプロジェクトではtypescript-eslintを追加して、TypeScript固有の問題を検出します。たとえば、unsafeなanyの使用、戻り値の型の不足、Promiseの誤用などです。

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

PrettierとESLintの併用

ESLintには、Prettierと競合するフォーマットルールがあります。eslint-config-prettierを使ってそれらを無効にし、Prettierにすべてのフォーマットを任せ、ESLintはコード品質だけを担当するようにします。

npm install --save-dev eslint-config-prettier

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignoreと.prettierignore

ツールに、どのファイルを対象外にするかを指定します。.eslintignoreファイルではgitignoreの構文を使います。通常はnode_modules、dist、生成されたファイルを対象外にします。

# .eslintignore
node_modules
dist
.next
coverage

リンティング用のnpmスクリプト

package.jsonにlintとformatのスクリプトを追加すると、CIやチームメンバーが一貫した方法で実行できます。

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

コミット前フックのためのlint-stagedとhusky

husky + lint-stagedを使うと、すべてのgitコミット前に、ステージング済みのファイルだけを自動的にリンティングとフォーマットの対象にできます。これにより、フォーマットされていないコードや壊れたコードがリポジトリに入るのを防げます。

npm install --save-dev husky lint-staged
npx husky init

# package.json:
"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,json,md}": "prettier --write"
}

基本的な一貫性を保つEditorConfig

.editorconfigファイルを使うと、プラグインに関係なく、すべてのエディターやIDEで基本的なエディター設定（インデント形式、改行コード）を統一できます。Prettierと一緒に追加します。

# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

確認問題

Prettierも使うESLint設定にeslint-config-prettierを追加するのはなぜですか。

まとめ：PrettierとESLint

VSCode拡張機能を使うと、Prettierが保存時にコードを自動フォーマットします。ESLintはバグとスタイル違反を検出します。競合を避けるにはeslint-config-prettierを使います。コミット前のチェックを徹底するには、lint-staged + huskyを追加します。ツールを統一することで、フォーマットに関する議論をなくし、リリース前にバグを検出できます。

よくある質問

「PrettierとESLintの設定」レッスンは無料ですか？

はい。「PrettierとESLintの設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「PrettierとESLintの設定」で何を学びますか？

自動整形用のPrettierとエラー検出用のESLintを追加し、両ツールを設定して、保存時に整形するワークフローへ統合します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「PrettierとESLintの設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

Chrome DevTools: Elements、Console、Network
VSCode: 拡張機能、Emmet、ショートカット
PrettierとESLintの設定
ブラウザー互換性とcaniuse.com

← Frontend Academyに戻る