https://github.com/timeless-residents/handson-storybook
A Storybook project built with React, TypeScript, and Vite.
https://github.com/timeless-residents/handson-storybook
frontend react storybook typescript vite
Last synced: 6 months ago
JSON representation
A Storybook project built with React, TypeScript, and Vite.
- Host: GitHub
- URL: https://github.com/timeless-residents/handson-storybook
- Owner: timeless-residents
- Created: 2025-02-15T21:28:31.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-15T21:41:07.000Z (8 months ago)
- Last Synced: 2025-02-15T22:25:35.855Z (8 months ago)
- Topics: frontend, react, storybook, typescript, vite
- Language: MDX
- Homepage: https://timeless-residents.github.io/handson-storybook/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + TypeScript + Vite
このテンプレートは、Vite で React を動作させるための最小限のセットアップを提供します。HMR (Hot Module Replacement) といくつかの 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/) を使用します。
## ESLint 設定の拡張
本番アプリケーションを開発している場合は、型認識の lint ルールを有効にするために設定を更新することをお勧めします。
- トップレベルの `parserOptions` プロパティを次のように設定します。
```js
export default tseslint.config({
languageOptions: {
// その他のオプション...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
- `tseslint.configs.recommended` を `tseslint.configs.recommendedTypeChecked` または `tseslint.configs.strictTypeChecked` に置き換えます。
- オプションで `...tseslint.configs.stylisticTypeChecked` を追加します。
- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) をインストールし、設定を更新します。
```js
// 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,
},
})
```