TypescriptなReact+Vite環境を作った上でlint環境を整備しさらにstorybookをぶち込む手順

ここ最近掲題の環境を構築することが2,3回あり、毎度Historyからコマンドを探しているんですが もう調べるのがめんどくさい ので手順を書き残しておこうと思います。

本記事中、ファイルの注釈がない項目は全てコマンドです。
まとめてコマンドコピーしたいのに、terminalであることを示すための $ があるせいで１行１行コピーしなければならなくなる、なんていう状態が許せないので $ を省略しています。

React+Vite+linter環境構築

まずReact+Vite+linter環境構築を構築します。

パッケージ管理は一貫して yarn を使います。
宗派の問題などあるかと思いますが、今回は省略しますのでご容赦ください。
※一部npx使ってます

コマンド

mkdir {project-name}
cd {project-name}
yarn create vite . --template react-ts
yarn add -E -D eslint prettier react-app \n
@typescript-eslint/{eslint-plugin,parser} \n
eslint-config-(prettier,react-app} \n
eslint-plugin-{import,jsx-a11y,prettier,react,react-hooks}
npx sb init --builder storybook-builder-vite

lintファイル群

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['react-app', 'prettier'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

.prettierrc.json

{
  "printWidth": 150,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}

.editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

storybookの導入

vite環境で動く用のsbを入れていきます。

npx sb init --builder storybook-builder-vite

出てくる確認は全て y またはEnterしてください。
(sbインストールするか確認、linterのpluginのインストールと設定追記していいかの確認が出てくると思います。)

precommit

precommitを導入するにはこちらの記事を参照していただければと思います。

---

以上で設定完了です。