React×TypeScript×VSCodeの開発環境構築

備忘録として残しておきます。
表題の通り、開発環境構築です。

説明	バージョン
OS	Windows10
ターミナル	Ubuntu 22.04.2 LTS (WSL2)
nvm	0.39.3
npm	9.5.1
node	v18.16.0

まずはプロジェクトの作成
お話しながらひな形作ります。とっても簡単。
npm create vite@latest
と入力し、プロジェクト名を決めて、「React」を選んで、「TypeScript + SWC」を選択するだけ

$ npm create vite@latest
✔ Project name: … sample-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

念のため、正常にプロジェクトが作成できたか確認するために、コンソールに出力されたとおりに、ディレクトリの移動とインストール、サーバ起動まで実施して、ブラウザで確認。

$ cd sample-app
$ npm install
$ npm run dev

http://localhost:5173/
にアクセスして、以下画面を確認取れたら、「Ctrl」+「c」でサーバ停止。

prettier, eslintの導入

$ npm i -D prettier
$ npm i -D eslint

設定する

$ npm init @eslint/config
// To check syntax and find problems
✔ How would you like to use ESLint? · problems
// JavaScript modules (import/export)
✔ What type of modules does your project use? · esm
// react
✔ Which framework does your project use? · react
// Yes
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

（各自お好きに設定ください）
プロジェクト配下に設定ファイルを3つ作成
今はこんな感じ

sampe-app
├── .vscode
│   ├── extension.json
│   └── setting.json
└── .prettier.json

extension.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "streetsidesoftware.code-spell-checker",
    "shardulm94.trailing-spaces"
  ]
}

setting.json

{
  "editor.formatOnSave": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "editor.tabSize": 2
}

.prettier.json

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTab": true,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

ここまで設定すればファイル保存時に自動でフォーマットが聞いてくれます（便利）

react-router-domを導入

$ npm i react-router-dom
$ npm install

ルーティングの設定を一括でまとめるコンポーネントを作るのが好き
sampleです。

RoutingSetting.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Top from "./Top";
import Help from "./Help";
import Login from "./Login";

const RoutingSetting = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Top />} />
        <Route path="/help" element={<Help />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
};

export default RoutingSetting;

こんな感じでルーティングはまとめて上げます。
そして、App.tsxに追加することでルーティングが可能になります。
各コンポーネントは適宜追加ください。

App.tsx

import RouterSetting from "./RoutingSetting";

function App() {
  return (
    <>
      <RouterSetting />
    </>
  );
}

export default App;

以上です。