@alanlu-dev/web-kit

環境建置

在專案中，選擇適合的工具能夠提高代碼品質、開發效率以及團隊合作。以下是一系列可供選擇的工具，您可以根據專案需求和個人偏好進行選擇和配置。

開發工具

• Visual Studio Code: 由微軟開發的跨平台代碼編輯器，擁有豐富的擴展生態系統和強大的功能。

包管理工具

• pnpm: 一個快速、節省空間的包管理器，類似於 npm 和 Yarn，但共享依賴以節省空間。
• nvm: Node.js 版本管理工具，用於管理多個 Node.js 版本，並在不同專案中切換版本。

代碼風格和格式化

• EditorConfig: 跨編輯器和 IDE 的一致性代碼編寫風格工具。
• Prettier: 自動美化代碼，確保代碼風格的一致性和可讀性。
• ESLint: JavaScript 和 TypeScript 的靜態代碼分析工具，用於檢查代碼中的錯誤和實施一致的代碼風格。
• Stylelint: CSS 和 SCSS/Less 的靜態代碼分析工具，用於檢查樣式表中的錯誤和一致性。
• Markdownlint: Markdown 文件的風格和語法的工具。
• husky: Git 鉤子工具，用於在 Git 操作觸發前執行指定的代碼。
• lint-staged: 在 Git 暫存區上運行 lint 工具的工具，通常與 husky 一起使用。
• commitlint: 檢查提交消息是否符合指定格式的工具，通常與 Conventional Commits 一起使用。
• CSpell: 拼寫檢查工具，用於檢查代碼和文本文件中的拼寫錯誤。

版本控制

• Conventional Commits: 一種標準化的提交消息格式，用於生成一致的提交消息，以便自動化版本控制和發布。
• czg: 用於生成符合 Conventional Commits 的提交消息的交互式命令行工具。
• changeset: 一個用於管理 monorepo 中發布版本的工具。Changeset 允許您將多個包的變更集中管理，並生成一致的發布版本，以確保版本管理的一致性和可追溯性。

建構工具

• Vite: 現代化的前端開發工具和建構工具，提供快速的開發體驗和優化的生產環境。
• unbuild: 構建和打包 JavaScript 和 TypeScript 項目的工具，提供零配置的構建和打包功能。
• Turborepo: 管理多個 monorepo 專案的開發者工具，提供統一的開發體驗和依賴管理。

測試工具

• Vitest: Vite 的測試工具，專注於提供簡單且快速的測試環境，基於 Jest 框架。
• Playwright: 一個用於自動化測試 Web 應用程序的工具，支持多種瀏覽器和平台。

JavaScript

• TypeScript: 靜態類型的 JavaScript 語言，提供更強大的開發工具和代碼檢查。

Style

• SCSS: CSS 預處理器，添加了變量、嵌套、Mixin 等功能以提高代碼可重用性和維護性。
• PostCSS: 轉換 CSS 的工具，可以自動添加瀏覽器前綴、優化代碼等。
• Tailwind CSS: 一個功能強大的 CSS 框架，提供了大量的樣式工具和組件，用於快速構建現代化的網站。
• Master CSS: CSS 語言和框架，用於快速構建現代和高性能的網站。

---

Packages

tooling

這個資料夾包含所有的開發工具配置，這些配置幫助我們維護代碼質量，確保代碼符合規範並且自動化檢查和格式化代碼。主要內容包括：

• ：Shareable commitlint configuration for Conventional Commits.
• ：Shareable ESLint configuration.
• ：Shareable lint-staged configuration.
• ：Shareable markdownlint configuration.
• ：Shareable prettier configuration.
• ：Shareable stylelint configuration.
• ：Shareable TypeScript configuration.

versions

這個資料夾包含版本管理和發佈流程的配置，確保專案版本的一致性。

• ：Automatically generate changeset by Conventional Commits.
• ：A release-it configuration for monorepo.

types

這個資料夾包含所有與 TypeScript 類型相關的檔案，用來確保代碼的型別安全。

• ：Shareable TypeScript types.

utils

這個資料夾包含通用的輔助函式或工具，這些函式通常會在多個地方重用，幫助我們處理一些常見的邏輯，如數據處理、驗證等。

• ：A collection of utility functions.

tests

這個資料夾包含專案的測試配置。所有的測試框架和測試工具設定都集中在這裡。

• ：A playwright configuration for monorepo.

styles

這個資料夾包含專案的樣式配置。你可以在這裡找到所有的樣式相關設定，確保專案的一致視覺風格。

• ：Shareable Master CSS configuration.
• ：A collection of utility functions for Master CSS.
• ：Shareable SCSS configuration.