CursorでのJavaScriptとTypeScript開発へようこそ！エディタは拡張機能エコシステムを通じてJS/TS開発を強力にサポートしてる。ここでは、Cursorを最大限に活用するために知っておきたいポイントを紹介するよ。

​
必須拡張機能

Cursor はどんな拡張機能とも相性いいけど、最初に使うならこのあたりがおすすめだよ:
  • ESLint - Cursor の AI を使ったリント自動修正に必須
  • JavaScript and TypeScript Language Features - 言語サポートと IntelliSense を強化
  • Path Intellisense - ファイルパスの賢い補完

​
Cursor の機能

Cursor は既存の JavaScript/TypeScript ワークフローを次の機能で強化するよ:
  • Tab Completions: プロジェクト構造を理解したコンテキスト対応のコード補完
  • Automatic Imports: 使ったタイミングでライブラリを自動インポート
  • Inline Editing: どの行でも CMD+K でシンタックスを崩さずに編集
  • Composer Guidance: Composer で複数ファイルにまたがるコードを計画・編集

​
@Docs によるフレームワークインテリジェンス

Cursor の @Docs 機能は、AI が参照できるカスタムドキュメントソースを追加して、JavaScript 開発を強力にブーストできるよ。MDN、Node.js、好きなフレームワークのドキュメントを追加して、より正確で文脈に沿ったコード提案を受け取ろう。

Learn more about @Docs

Cursor でカスタムドキュメントソースを追加・管理する方法をチェックしよう。

​
自動リンティング解決

Cursor の際立った機能のひとつは、Linter 拡張機能とのシームレスな統合だよ。 ESLint のような linter をセットアップして、“Iterate on Lints” 設定を有効にしておいてね。 そのうえで Composer の Agent モードを使うと、AI がクエリに回答してコード変更を行ったあと、自動的に linter の出力を読み取り、見落としていたかもしれない lint エラーの修正を試みるよ。

​
フレームワーク対応

Cursor は主要な JavaScript フレームワークやライブラリとシームレスに動くよ。例えば:

​
React & Next.js

  • かしこいコンポーネント候補つきの JSX/TSX フルサポート
  • Next.js の Server Components と API Routes へのインテリジェンス
  • 推奨: React Developer Tools 拡張機能

​
Vue.js

  • Volar 連携によるテンプレート構文サポート
  • コンポーネント補完と型チェック
  • 推奨: Vue Language Features

​
Angular

  • テンプレート検証と TypeScript デコレーター対応
  • コンポーネント／サービスの生成
  • 推奨: Angular Language Service

​
Svelte

  • コンポーネントのシンタックスハイライトとかしこい補完
  • reactive 文やストアのサジェスト
  • 推奨: Svelte for VS Code

​
バックエンドフレームワーク (Express/NestJS)

  • ルートやミドルウェアのインテリジェンス
  • NestJS 向け TypeScript デコレーター対応
  • API テストツール連携
覚えておいて。Cursor の AI 機能はこれら全部のフレームワークでしっかり働いて、各フレームワークのパターンやベストプラクティスを理解した上で関連する提案を返すよ。AI はコンポーネント作成から複雑なリファクタリングまで、プロジェクトの既存パターンを尊重しながらサポートしてくれる。