Figma MCP Handholding

🚀 React + TypeScript + Vite

このテンプレートは、ViteでReactを使用するための最小限の設定を提供し、ホットモジュール置換（HMR）といくつかのESLintルールを有効にします。

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

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

🚀 クイックスタート

このテンプレートを使うことで、Vite上でReactとTypeScriptを快適に開発できます。

✨ 主な機能

• ホットモジュール置換（HMR）をサポート
• いくつかのESLintルールが事前設定されています

📚 ドキュメント

🔧 ESLint設定の拡張

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

基礎設定の更新

export default tseslint.config({
  extends: [
    // ...tseslint.configs.recommended を削除し、これに置き換えます
    ...tseslint.configs.recommendedTypeChecked,
    // または、より厳格なルールを取得するにはこのオプションを使用します
    ...tseslint.configs.strictTypeChecked,
    // オプションで、スタイルルールを取得するためにこのオプションを追加します
    ...tslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // その他のオプション...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

React特定のlintルールの追加

eslint-plugin-react-xとeslint-plugin-react-domをインストールすることで、React特定のlintルールを取得できます。

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // react-xとreact-domプラグインを追加します
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // その他のルール...
    // 推奨されるtypescriptルールを有効にします
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})