# pnpm + vite + react + typescript + airbnb
:::success
**【TL;DR】**
[修改後的專案模板](#Final)
:::
- `pnpm`
- 會在硬碟建立 `store` 的空間來儲存套件，避免每次都要重複安裝，可以節省空間
---
[TOC]
---
## Vite
> <https://vitejs.dev/guide/#scaffolding-your-first-vite-project>
### 1. 指令
```shell!
pnpm create vite
```
### 2. 同樣跟著提示選擇
### 3. 進入資料夾安裝
```shell!
cd
pnpm i
code .
```
- `node modules` 資料夾會出現像捷徑的箭頭，代表從 `store` 連結過來的
- 而目前已經自動裝好 `ESLint` 了，所以接續只要做設定
---
## airbnb
> <https://eslint.org/docs/latest/use/getting-started#quick-start>
### 1. 指令
```shell!
npm init @eslint/config -y
```
- 跟著選項跑，安裝前選不要用 `npm`
### 2. 安裝
- 複製上述的套件名稱，改用 `pnpm` 抓
```shell!
pnpm i -D eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest
```
### 3. airbnb-typescript
- 接著再裝
```shell!
pnpm install eslint-config-airbnb-typescript --save-dev
```
### 4. 修改設定檔案
- 資料夾有重複的設定檔案
- 刪掉其一，並整合到 `.json`
- 設定追加 `"airbnb-typescript"`
- `"project": "./tsconfig.json"`
```jsonld!
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"airbnb",
"airbnb-typescript",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "react-hooks", "@typescript-eslint", "react-refresh"],
"ignorePatterns": ["dist", ".eslintrc.cjs", "vite.config.ts"],
"rules": {
"react-refresh/only-export-components": [
"warn",
{ "allowConstantExport": true }
]
}
}
```
---
## prettier
### 1. 安裝
```shell!
pnpm install prettier --save-dev
```
```shell!
pnpm install eslint-config-prettier --save-dev
```
### 2. 加入格式化指令
- `package.json`
```jsonld!
"format": "prettier --write \"**/*.+(js|json|yml|ts|tsx)\"",
```
### 3. 新增設定檔案
- 取名為：`.prettierrc.json`
- 依循 `airbnb` 的設定
```jsonld!
{
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"printWidth": 80,
"jsxSingleQuote": false,
"arrowParens": "always"
}
```
---
## 修改紅字錯誤
- 都跟著提示去改
### 「'React' must be in scope when using JSX」
- 【解法】：到 `ESLint` 的設定檔案追加規則
```shell!
"rules": {
...
"react/react-in-jsx-scope": "off"
}
```
---
### Typescript
- 函式定義
```jsx!
function App(): JSX.Element {
...
}
```
- 指派變數型別
```jsx!
const [count, setCount] = useState<number>(0);
```
- 按鈕修改
```jsx!
<button
type="button"
onClick={() => setCount((prevCount) => prevCount + 1)}
>
```
---
## Final
- 最後也把整個起始專案設定為模板，以後就可以重複使用惹
:::success
> **【REPO】**
> <https://github.com/Aya-X/vite-react-typescript-starter>
:::
---
## 參考資料
- `用 pnpm 取代 npm，讓 node_modules 不再是容量怪獸`
> <https://ithelp.ithome.com.tw/articles/10319375>
- `Effortlessly Setting up Your React Project with Vite, Husky, TypeScript, and ESLint: A Comprehensive Guide`
> <https://dev.to/pappijx/effortlessly-setting-up-your-react-project-with-vite-husky-typescript-and-eslint-a-comprehensive-guide-n5l>
- `Viteで作成したReact（TypeScript）プロジェクトにEsLintとPrettierを導入する（2022/02）`
> <https://zenn.dev/longbridge/articles/ae3aa36cf17d73>
---
<!-- --- -->
{%hackmd UYCim7nMT--Eci-1SL9eYg %}
<!-- --- -->
Sign in with Wallet
Connect another wallet