https://github.com/alanlu-dev/web-kit

A monorepo build system and workflow for web projects.
https://github.com/alanlu-dev/web-kit

changesets commitlint eslint linter-config markdownlint mastercss monorepo prettier release-it scss stylelint tsconfig utils

Last synced: 9 months ago
JSON representation

A monorepo build system and workflow for web projects.

Host: GitHub
URL: https://github.com/alanlu-dev/web-kit
Owner: alanlu-dev
License: mit
Created: 2024-03-01T12:44:23.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2024-10-16T06:27:16.000Z (over 1 year ago)
Last Synced: 2024-10-27T09:40:55.671Z (over 1 year ago)
Topics: changesets, commitlint, eslint, linter-config, markdownlint, mastercss, monorepo, prettier, release-it, scss, stylelint, tsconfig, utils
Language: TypeScript
Homepage:
Size: 59.6 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# @alanlu-dev/web-kit

## 環境建置

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

### 開發工具

* [Visual Studio Code](https://code.visualstudio.com): 由微軟開發的跨平台代碼編輯器，擁有豐富的擴展生態系統和強大的功能。

### 包管理工具

* [pnpm](https://pnpm.io): 一個快速、節省空間的包管理器，類似於 npm 和 Yarn，但共享依賴以節省空間。
* [nvm](https://github.com/nvm-sh/nvm): Node.js 版本管理工具，用於管理多個 Node.js 版本，並在不同專案中切換版本。

### 代碼風格和格式化

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

### 版本控制

* [Conventional Commits](https://www.conventionalcommits.org): 一種標準化的提交消息格式，用於生成一致的提交消息，以便自動化版本控制和發布。
* [czg](https://cz-git.qbb.sh/zh/cli): 用於生成符合 Conventional Commits 的提交消息的交互式命令行工具。
* [changeset](https://github.com/changesets/changesets): 一個用於管理 monorepo 中發布版本的工具。Changeset 允許您將多個包的變更集中管理，並生成一致的發布版本，以確保版本管理的一致性和可追溯性。

### 建構工具

* [Vite](https://vitejs.dev): 現代化的前端開發工具和建構工具，提供快速的開發體驗和優化的生產環境。
* [unbuild](https://github.com/unjs/unbuild): 構建和打包 JavaScript 和 TypeScript 項目的工具，提供零配置的構建和打包功能。
* [Turborepo](https://turbo.build/repo): 管理多個 monorepo 專案的開發者工具，提供統一的開發體驗和依賴管理。

### 測試工具

* [Vitest](https://vitest.dev): Vite 的測試工具，專注於提供簡單且快速的測試環境，基於 Jest 框架。
* [Playwright](https://playwright.dev): 一個用於自動化測試 Web 應用程序的工具，支持多種瀏覽器和平台。

### JavaScript

* [TypeScript](https://www.typescriptlang.org): 靜態類型的 JavaScript 語言，提供更強大的開發工具和代碼檢查。

### Style

* [SCSS](https://sass-lang.com): CSS 預處理器，添加了變量、嵌套、Mixin 等功能以提高代碼可重用性和維護性。
* [PostCSS](https://postcss.org): 轉換 CSS 的工具，可以自動添加瀏覽器前綴、優化代碼等。
* [Tailwind CSS](https://tailwindcss.com): 一個功能強大的 CSS 框架，提供了大量的樣式工具和組件，用於快速構建現代化的網站。
* [Master CSS](https://master.co): CSS 語言和框架，用於快速構建現代和高性能的網站。

---

### Packages

#### `tooling`

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

* ：Shareable commitlint configuration for [Conventional Commits](https://www.conventionalcommits.org).
* ：Shareable ESLint configuration.
* ：Shareable lint-staged configuration.
* ：Shareable markdownlint configuration.
* ：Shareable prettier configuration.
* ：Shareable stylelint configuration.
* ：Shareable TypeScript configuration.