pnpm + vite + react + typescript + airbnb

【TL;DR】 修改後的專案模板

• pnpm
  • 會在硬碟建立 store 的空間來儲存套件，避免每次都要重複安裝，可以節省空間

---

• pnpm + vite + react + typescript + airbnb
  • Vite
    • 1. 指令
    • 2. 同樣跟著提示選擇
    • 3. 進入資料夾安裝
  • airbnb
    • 1. 指令
    • 2. 安裝
    • 3. airbnb-typescript
    • 4. 修改設定檔案
  • prettier
    • 1. 安裝
    • 2. 加入格式化指令
    • 3. 新增設定檔案
  • 修改紅字錯誤
    • 「'React' must be in scope when using JSX」
    • Typescript
  • Final
  • 參考資料

---

Vite

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

1. 指令

pnpm create vite

2. 同樣跟著提示選擇

3. 進入資料夾安裝

cd 
pnpm i
code .

• node modules 資料夾會出現像捷徑的箭頭，代表從 store 連結過來的

  

• 而目前已經自動裝好 ESLint 了，所以接續只要做設定

  

---

airbnb

https://eslint.org/docs/latest/use/getting-started#quick-start

1. 指令

npm init @eslint/config -y

• 跟著選項跑，安裝前選不要用 npm
  

2. 安裝

• 複製上述的套件名稱，改用 pnpm 抓

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

• 接著再裝

pnpm install eslint-config-airbnb-typescript --save-dev

4. 修改設定檔案

• 資料夾有重複的設定檔案

  

• 刪掉其一，並整合到 .json

  • 設定追加 "airbnb-typescript"
  • "project": "./tsconfig.json"

{
  "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. 安裝

pnpm install prettier --save-dev

pnpm install eslint-config-prettier --save-dev

2. 加入格式化指令

• package.json

    "format": "prettier --write \"**/*.+(js|json|yml|ts|tsx)\"",

3. 新增設定檔案

• 取名為：.prettierrc.json
  • 依循　airbnb 的設定

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "jsxSingleQuote": false,
  "arrowParens": "always"
}

---

修改紅字錯誤

• 都跟著提示去改

「'React' must be in scope when using JSX」

• 【解法】：到 ESLint 的設定檔案追加規則

  "rules": {
    ...
    "react/react-in-jsx-scope": "off"
  }

---

Typescript

• 函式定義

function App(): JSX.Element { 
  ...
}

• 指派變數型別

  const [count, setCount] = useState<number>(0);

• 按鈕修改

        <button
          type="button"
          onClick={() => setCount((prevCount) => prevCount + 1)}
        >

---

Final

• 最後也把整個起始專案設定為模板，以後就可以重複使用惹
  

【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 Error: 403 error