Vite環境構築してみた
モチベーション
- ざっくり触ってみる
- React + Viteを使ってみる
- eslint, prettierを入れる
- storybook CLIを入れる
- ディレクトリ整える
メモ
環境構築
- yarn create init
- react選択
- react-ts選択
- cdでプロジェクト直下に移動
- yarn
- yarn dev
- ここまででhello world ok!
yarn dev時にブラウザを立ち上げたい場合は、vite.config.jsを下記のようにする。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
server: {
open: true,
},
plugins: [react()],
})
eslint設定
yarn eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
未使用インポートの検知
yarn add eslint-plugin-unused-imports
env: {} に以下を追加
node: true,
pluginsにunused-imports追加
以下.eslint.js
plugins: ['react', '@typescript-eslint', 'unused-imports'],
rules: {}に以下を追加
以下.eslint.js
rules: {
quotes: ['error', 'single'],
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
'react/function-component-definition': [
'error',
{
namedComponents: 'arrow-function', // "function-declaration" | "function-expression" | "arrow-function"
},
],
},
...
prettier設定
.prettierrc
{
"semi": false,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2
}
.prettierignore
node_modules/
package-lock.json
yarn.lock
tsconfig設定
compilerOptions: {}に下記を追加(importの記述を楽にする為)
以下tsconfig
"baseUrl": "src",
"paths": {
"src/*": ["*"]
},
初期だと、@typesが入っていなくて、react系の記述でエラーになる為install
yarn add @types/react @types/react-dom
emotion
モジュールインストール
yarn add @emotion/react @emotion/babel-plugin
vite.config.jsの編集
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
server: { open: true },
plugins: [
react({
jsxImportSource: '@emotion/react',
babel: {
plugins: ['@emotion/babel-plugin'],
},
}),
],
});
css={}を利用する為にtsconfig.jsonに以下を追加
"types": ["@emotion/react/types/css-prop"]
stylelint
yarn add stylelint stylelint-config-recess-order stylelint-config-standard postcss-syntax @stylelint/postcss-css-in-js stylelint-config-prettier
.stylelintrcを作成する
{
"extends": [
"stylelint-config-standard",
"stylelint-config-recess-order",
"stylelint-config-prettier"
],
"rules": {},
"overrides": [
{
"files": [
"**/*.js",
"**/*.jsx",
"**/*.ts",
"**/*.tsx"
],
"rules": {},
"customSyntax": "@stylelint/postcss-css-in-js"
}
]
}
npm scriptsに追加
"lint:stylelint": "stylelint ./src/**/*.{css,js,jsx,ts,tsx}",
"fix:stylelint": "stylelint --fix ./src/**/*.{css,js,jsx,ts,tsx}}"
storybookに絶対パスを通す為、下記の設定
tsconfig-paths-webpack-pluginの導入
main.jsの書き換え
viteは初期状態だと、tsconfigを読み取ってくれない
https://github.com/aleclarson/vite-tsconfig-paths
を利用する必要がある