モチベーション

  • ざっくり触ってみる
  • 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
を利用する必要がある