MCP Client Server Demo

🚀 React + TypeScript + Vite

このテンプレートは、Viteを使用してReactをすぐに始めるための最小限の設定を提供します。HMR（ホットモジュールリプレイスメント）といくつかのESLintルールが含まれています。

現在、2つの公式プラグインが利用可能です。

• @vitejs/plugin-react：Babel を使用してクイックリフレッシュを実現
• @vitejs/plugin-react-swc：SWC を使用してクイックリフレッシュを実現

🚀 クイックスタート

このテンプレートを使うことで、Viteを用いたReact開発を迅速に開始できます。HMRにより開発効率が向上し、ESLintルールによってコードの品質を保つことができます。

💻 使用例

基本的な使用法

このテンプレートを使用すると、以下のように簡単にReactアプリケーションを始めることができます。

拡張ESLint設定

本番アプリケーションを開発している場合、型感知のlintルールを有効にするために設定を更新することをお勧めします。

1. トップレベルの parserOptions 属性の設定

export default tseslint.config({
  languageOptions: {
    // その他のオプション...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

2. tslint.configs.recommended の置き換え

tslint.configs.recommended を tslint.configs.recommendedTypeChecked または tslint.configs.strictTypeChecked に置き換えます。

3. オプションで ...tslint.configs.stylisticTypeChecked の追加

必要に応じて、...tslint.configs.stylisticTypeChecked を追加できます。

4. eslint-plugin-react のインストールと設定の更新

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Reactバージョンの設定
  settings: { react: { version: '18.3' } },
  plugins: {
    // Reactプラグインの追加
    react,
  },
  rules: {
    // その他のルール...
    // 推奨ルールの有効化
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})