Figma MCP Oneshot

🚀 React + TypeScript + Vite

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

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

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

🚀 クイックスタート

このテンプレートを使うことで、Viteを用いたReact開発を迅速に開始できます。

✨ 主な機能

• ホットモジュールリロード（HMR）による開発効率の向上
• ESLintによるコード品質の維持
• 2種類の公式プラグインによるクイックリフレッシュ機能

📦 インストール

このテンプレートを使用するには、以下の手順でインストールします。 （ここでは具体的なインストールコマンドが元文書にないため、このセクションは省略されます。）

💻 使用例

基本的な使用法

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

高度な使用法

拡張ESLint配置

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

export default tseslint.config({
  extends: [
    // 移除 ...tseslint.configs.recommended 并替换为以下内容
    ...tslint.configs.recommendedTypeChecked,
    // 或者使用这个更严格的选项
    ...tslint.configs.strictTypeChecked,
    // 可选地，添加这个用于样式规则
    ...tslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // 其他选项...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

また、[eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslin をインストールすることもできます。

## 🚀 React + TypeScript + Vite

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

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

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) は [Babel](https://babeljs.io/) を使用してクイックリフレッシュを実現します。
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) は [SWC](https://swc.rs/) を使用してクイックリフレッシュを実現します。

## 🚀 クイックスタート
このテンプレートを使うことで、Viteを用いたReact開発を迅速に開始できます。

## ✨ 主な機能
- ホットモジュールリロード（HMR）による開発効率の向上
- ESLintによるコード品質の維持
- 2種類の公式プラグインによるクイックリフレッシュ機能

## 💻 使用例

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

### 高度な使用法
#### 拡張ESLint配置
本番アプリケーションを開発している場合、型感知のlintルールを有効にするために設定を更新することをおすすめします。

```js
export default tseslint.config({
  extends: [
    // 移除 ...tseslint.configs.recommended 并替换为以下内容
    ...tslint.configs.recommendedTypeChecked,
    // 或者使用这个更严格的选项
    ...tslint.configs.strictTypeChecked,
    // 可选地，添加这个用于样式规则
    ...tslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // 其他选项...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

また、eslint-plugin-react-x をインストールすることもできます。