為了方便日後開發，仿照過往 Vue3 的作法整合了一個模版。不過意料之外的坑點不少，就順便記錄一下產出的過程。
內容
.vite.config.ts
1. 使用 vite-tsconfig-paths 套件來同步 .tsconfig 的 path
2. 定義 dev 環境的 server 預設 port 為 3000
.eslintrc.cjs
1. env.node 要設為 true，否則 module.exports 會報錯
2. 附檔名需為 .cjs，才可避免 File is a CommonJS module; it may be converted to an ES module. 錯誤
3. parserOptions.warnOnUnsupportedTypeScriptVersion 可以設成 false，來避免 TS 版本過新所導致的檢測異常
4. settings.react.version 要設為 detect，才可避免錯誤
5. eslint-import-resolver-typescript 安裝後要 settings[“import/resolver”].typescript 設定至少為 {}，以免解析 import/module 位置錯誤
6. import/no-unresolved rules 對於解析 vite 預設的 public 資料夾的相對路徑是無法判斷的，所以設定為 1 並搭配 // eslint-disable-next-line import/no-unresolved 排除錯誤
.stylelint.config.cjs
1. plugins 需要安裝 stylelint-order 和 stylelint-scss
2. 設定 at-rule-no-unknown 來修正 tailwind 的關鍵字
.vscode
1. 要在 settings.json 中，將下列的 key 值新增進去
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "editor.tabSize": 4, "editor.formatOnSave": false, // if you use ESlint，this should be false "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "css.validate": false, "less.validate": false, "scss.validate": false, "stylelint.validate": [ "css", "less", "scss", "postcss" ] } |
程式碼
[ Repo ]：https://github.com/andy922200/vite-react-typescript-tailwindcss
參考資料
1. Warning: React version not specified in ‘eslint-plugin-react settings’ while running eslint on top of React 18.2.0
2. React Tailwindcss Boilerplate build with Vite
3. 【前端工程化】搭建react18+vite2+ts+prettier+eslint++stylelint+husky+lint-staged+commitlint开发环境
4. unknown at rule @apply
5. tailwind使用指南——常见问题和实践建议
6. eslint-import-resolver-typescript
7. Absolute Imports and Module Path Aliases
