0Pricing
TypeScript Academy · レッスン

Prettier連携とルールの競合

PrettierをESLintと連携し、重複するルールを避け、スタイルルールとロジックルールの競合に対処します

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

導入

目標：Prettier（フォーマット）と ESLint（ロジックとスタイル）を競合させずに組み合わせます。

インストール

Prettier と ESLint のプラグインおよび設定をインストールして、スムーズに連携させます。

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

Prettier の設定

Prettier には専用の設定ファイルがあります。フォーマット専用のオプション（引用符、セミコロン、行の長さ）に使用します。

// .prettierrc.json
{
  "semi": false,
  "singleQuote": true
}

設定の統合

ESLint の設定を拡張するために plugin:prettier/recommended を追加します。これには eslint-config-prettier と eslint-plugin-prettier が含まれます。

// .eslintrc.js
module.exports = {
  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ]
}

競合の例

設定がないと、ESLint と Prettier の判断が一致しない場合があります（例：セミコロン）。この設定により、競合する ESLint ルールが無効になります。

// demo.ts
const msg = "hi"
console.log(msg)

// ESLint: missing semicolon
// Prettier: auto removes semicolons if disabled
// Solution: use eslint-config-prettier

チェックを実行

ロジックとスタイルには ESLint、フォーマットには Prettier を実行します。エディターで両方を統合することもできます。

npx eslint "src/**/*.{ts,tsx}"
npx prettier --check "src/**/*.{ts,tsx}"

確認問題

簡単な確認：eslint-config-prettier は何をしますか？

振り返り

振り返り：Prettier と設定をインストールして ESLint の extends に追加し、競合するルールを無効にして、両方のツールを調和させて実行します。

よくある質問

「Prettier連携とルールの競合」レッスンは無料ですか？

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

「Prettier連携とルールの競合」で何を学びますか？

PrettierをESLintと連携し、重複するルールを避け、スタイルルールとロジックルールの競合に対処します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Prettier連携とルールの競合」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. ESLint + @typescript-eslint
  2. Prettier連携とルールの競合
  3. 実務でよく使われるルールセット
← TypeScript Academyに戻る