0Pricing
TypeScript Academy · レッスン

ESLint + @typescript-eslint

@typescript-eslintプラグインとESLintを設定し、型を考慮した問題を検出して一貫したスタイルを適用します

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

導入

目標：ESLint と @typescript-eslint を使って、TypeScript プロジェクトのバグを検出し、スタイルを統一します。

インストール

ESLint 本体に加えて、@typescript-eslint/parser と @typescript-eslint/eslint-plugin をインストールします。

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

設定

TS パーサーと推奨ルールを使用するように ESLint を設定します。必要に応じてプロジェクト固有のルールを追加します。

// .eslintrc.js
module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  rules: {
    "@typescript-eslint/no-unused-vars": "warn"
  }
};

lint の実行例

TS 対応パーサーを使用すると、ESLint は不足している引数、未使用の変数、スタイル上の問題を指摘します。

// demo.ts
function greet(name: string) {
  console.log("Hello", name)
}

greet("Ada")

greet() // ESLint error: missing arg

型情報を利用するルール

型情報を必要とするルール（未処理の promise の検出など）には、parserOptions で tsconfig.json を指定します。

// tsconfig.json must be linked for type-aware rules
{
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

// Example: no-floating-promises
async function f() {
  fetch("/api") // ESLint error: unhandled promise
}

lint を実行

コードベースに対して ESLint を実行します。安全な修正を自動適用するには --fix を追加します。

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

確認問題

簡単な確認：ESLint 本体に加えて @typescript-eslint を使うのはなぜですか？

振り返り

振り返り：ESLint と @typescript-eslint をインストールし、パーサーを設定して推奨設定を拡張します。型情報を利用するルールでリンターを実行し、コードをきれいに保ちます。

よくある質問

「ESLint + @typescript-eslint」レッスンは無料ですか？

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

「ESLint + @typescript-eslint」で何を学びますか？

@typescript-eslintプラグインとESLintを設定し、型を考慮した問題を検出して一貫したスタイルを適用します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ESLint + @typescript-eslint」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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