前端設置 #

版本 #

Node.js 版本至少為 v18.0.0

安裝 #

參考官方網站，安裝 Node.js

並安裝 yarn

sudo npm install -g yarn

TypeScript #

命名風格 #

TypeScript 變數命名規範：

• 首字母大寫駝峯：型別、會回傳組件的函式
• 首字母小寫駝峯：函數
• 全小寫底線相連：非函數的區域變數、類別成員
• 全大寫底線相連：全域常數

vite 編譯方式 #

vite 並不會檢查 TypeScript 的型別，只是簡單將型別抽掉變成 JavaScript 。

若要檢查型別，需要執行 npx tsc ，或是使用 npm 腳本： yarn check-ts。

react #

全使用 hook 。

css #

變數命名 #

class, id 一律使用首字母小寫駝峯式

vscode 建議設定 #

typescript #

使用工作區的 TypeScript ，而非 VSCode 自帶的 TypeScript 版本，否則 vscode 可能會報出不正確的錯誤提示。

具體操作請見官網。

.eslintrc #

如果 vscode 抱怨 .eslintrc 裡的註解不符合 JSON 規範，將語言設為 JSON with comment

外掛 eslint #

vscode 的 eslint 預設不會作用到 .ts, .tsx 的檔案，請在 vscode 的 setting.json 中加入

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
],

外掛 stylelint #

以 stylelint 檢查 css 風格。

postcss #

安裝 postcss language support 來讓 & 語法正確高亮