在 VSCode 中搭建 React × TypeScript 的开发环境

我会将其作为备忘录留下来。
如标题所示，是关于开发环境的搭建。

首先创建一个项目，可以边聊天边制作模板。非常简单。
输入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

更漂亮，安装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

请根据您自己的喜好进行设置。
在项目中创建三个配置文件。
目前是像这样的。

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

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

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

{
  "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

我喜欢创建一个可以整合路由设置的组件。这是一个示例。

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中即可实现路由功能。请随意添加每个组件。

import RouterSetting from "./RoutingSetting";

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

export default App;

以上就是。