前言
Svelte，一個語法簡潔、入門容易，面向未來的前端框架。
從 Svelte 誕生之初，就備受開發者的喜愛，根據統計，從 2019 年到 2024 年，連續 6 年一直是開發者最感興趣的前端框架 No.1：
Svelte 以其獨特的編譯時優化機制著稱，具有輕量級、高性能、易上手等特性，非常適合構建輕量級 Web 項目。
為了幫助大家學習 Svelte，我同時搭建了 Svelte 最新的中文文檔站點。
如果需要進階學習，也可以入手我的小冊《Svelte 開發指南》，語法篇、實戰篇、原理篇三大篇章帶你係統掌握 Svelte！
歡迎圍觀我的“網頁版朋友圈”、加入“冴羽·成長陪伴社羣”，踏上“前端大佬成長之路”。
概述
命令行接口 (CLI)，sv，是一個用於創建和維護 Svelte 應用程序的工具包。
使用方法
運行 sv 最簡單的方式是使用 npx（如果您使用其他包管理器，則使用相應的命令 — 例如，如果您使用 pnpm，則使用 pnpx）：
npx sv <command> <args>如果您在一個已經安裝了 sv 的項目中，它將使用本地安裝的版本，否則它會下載最新版本並直接運行而無需安裝，這對於 sv create 特別有用。
致謝
感謝 Christopher Brown，他最初擁有 npm 上的 sv 名稱，並慷慨地允許將其用於 Svelte CLI。您可以在 @chbrown/sv 找到原始的 sv 包。
sv create
sv create 用於設置一個新的 SvelteKit 項目，可以選擇設置額外功能。
使用方法
npx sv create [options] [path]選項
--template <name>
選擇使用哪個項目模板：
minimal— 為新應用提供的基礎腳手架demo— 展示應用，包含一個無需 JavaScript 即可運行的猜詞遊戲library— 用於 Svelte 庫的模板，使用svelte-package進行設置
--types <option>
是否以及如何為項目添加類型檢查：
ts— 默認使用.ts文件，並對.svelte組件使用lang="ts"jsdoc— 使用 JSDoc 語法 進行類型標註
--no-types
阻止添加類型檢查。不推薦！
--no-add-ons
運行命令時不顯示交互式附加功能提示
--no-install
跳過依賴安裝
<!-- ## 程序化接口
// TODO: 這裏在文檔站點中未註釋時會產生類型檢查錯誤。需要發佈 sv，在站點中安裝它，然後取消註釋。
// import { create } from 'sv';
// // todo: 檢查這是否正確
// create(cwd, {
// // 在此添加你的選項
// // todo: 列出可用選項
// });-->
sv add
sv add 用於為現有項目添加新功能。
使用方法
npx sv addnpx sv add [add-ons]您可以從下面的列表中選擇多個以空格分隔的插件，或者使用交互式提示。
選項
-C,--cwd— Svelte(Kit)項目的根目錄路徑--no-preconditions— 跳過檢查前置條件 <!-- TODO 這是什麼意思？ -->--no-install— 跳過依賴安裝
官方附加組件
<!-- TODO 這應該是一個單獨的部分，這些每一個都應該有自己的頁面 -->
drizzleeslintsveltekit-adapterluciamdsvexparaglideplaywrightprettierstorybooktailwindcssvitest
sv check
sv check 可以在您的項目中找出錯誤和警告，例如：
- 未使用的 CSS
- 可訪問性提示
- JavaScript/TypeScript 編譯器錯誤
需要 Node 16 或更高版本。
安裝
您需要在項目中安裝 svelte-check 包：
npm i -D svelte-check使用
npx sv check選項
--workspace <path>
工作空間路徑。除 node_modules 和那些在 --ignore 中列出的目錄外，所有子目錄都會被檢查。
--output <format>
如何顯示錯誤和警告。參見機器可讀輸出。
humanhuman-verbosemachinemachine-verbose
--watch
保持進程運行並監視更改。
--preserveWatchOutput
在監視模式下防止屏幕被清除。
--tsconfig <path>
傳遞一個 tsconfig 或 jsconfig 文件的路徑。該路徑可以相對於工作空間路徑或絕對路徑。這意味着只有配置文件中 files/include/exclude 模式匹配的文件會被診斷。這也意味着 TypeScript 和 JavaScript 文件的錯誤會被報告。如果未提供，將從項目目錄向上查找下一個 jsconfig/tsconfig.json 文件。
--no-tsconfig
如果您只想檢查當前目錄及其子目錄中的 Svelte 文件，並忽略任何 .js/.ts 文件（它們將不會被類型檢查），請使用此選項。
--ignore <paths>
要忽略的文件/文件夾，相對於工作空間根目錄。路徑應該用逗號分隔並加引號。例如：
npx sv check --ignore "dist,build"<!-- TODO what the hell does this mean? is it possible to use --tsconfig AND --no-tsconfig? if so what would THAT mean? -->
僅在與 --no-tsconfig 一起使用時有效。當與 --tsconfig 一起使用時，這隻會影響被監視的文件，而不會影響被診斷的文件，後者由 tsconfig.json 決定。
--fail-on-warnings
如果提供，警告將導致 sv check 以錯誤代碼退出。
--compiler-warnings <warnings>
一個帶引號的、逗號分隔的 code:behaviour 對列表，其中 code 是編譯器警告代碼，behaviour 可以是 ignore 或 error：
npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_missing_attribute:error"--diagnostic-sources <sources>
一個用引號括起來的、以逗號分隔的來源列表，這些來源將對你的代碼運行診斷。默認情況下，所有來源都處於活動狀態：
<!-- TODO would be nice to have a clearer definition of what these are -->
js（包括 TypeScript）sveltecss
例如：
npx sv check --diagnostic-sources "js,svelte"--threshold <level>
過濾診斷信息：
warning（默認）— 顯示錯誤和警告error— 只顯示錯誤
故障排除
查看 language-tools 文檔以獲取更多關於預處理器設置和其他故障排除的信息。
機器可讀輸出
將 --output 設置為 machine 或 machine-verbose 將以更易於機器讀取的方式格式化輸出，例如在 CI pipelines 中、代碼質量檢查等。
每行對應一個新記錄。每行由多個列組成，列之間用單個空格字符分隔。每行的第一列包含一個以毫秒為單位的時間戳，可用於監控目的。第二列給出了"行類型"，根據行類型的不同，後續列的數量和類型可能會有所不同。
第一行類型為 START，包含工作空間文件夾（用引號括起）。示例：
1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
隨後可能有任意數量的 ERROR 或 WARNING 記錄。它們的結構相同，取決於輸出參數。
如果參數是 machine，它將告訴我們文件名、起始行和列號，以及錯誤消息。文件名是相對於工作空間目錄的。文件名和消息都用引號括起來。示例：
1590680326283 ERROR "codeactions.svelte" 1:16 "Cannot find module 'blubb' or its corresponding type declarations."
1590680326778 WARNING "imported-file.svelte" 0:37 "Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`"
如果參數是 machine-verbose，它將告訴我們文件名、起始行和列號、結束行和列號、錯誤消息、診斷代碼、代碼的人類友好描述以及診斷的人類友好來源（例如 svelte/typescript）。文件名相對於工作空間目錄。每個診斷表示為一個 ndjson 行，前綴為日誌的時間戳。示例：
1590680326283 {"type":"ERROR","fn":"codeaction.svelte","start":{"line":1,"character":16},"end":{"line":1,"character":23},"message":"Cannot find module 'blubb' or its corresponding type declarations.","code":2307,"source":"js"}
1590680326778 {"type":"WARNING","filename":"imported-file.svelte","start":{"line":0,"character":37},"end":{"line":0,"character":51},"message":"Component has unused export property 'prop'. If it is for external reference only, please consider using `export
const prop`","code":"unused-export-let","source":"svelte"}
輸出以一個 COMPLETED 消息結束，該消息總結了檢查期間遇到的文件總數、錯誤和警告的總數。示例：
1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS
如果應用程序發生運行時錯誤，這個錯誤將顯示為一條 FAILURE 記錄。示例：
1590680328921 FAILURE "Connection closed"
致謝
- Vue 的 VTI 為
svelte-check奠定了基礎
FAQ
為什麼沒有選項只檢查特定文件（例如只檢查暫存的文件）？
svelte-check 需要"查看"整個項目才能進行有效的檢查。假設您重命名了一個組件屬性但沒有更新使用該屬性的所有地方 — 所有使用該屬性的地方現在都會出錯，但如果只檢查更改的文件，你就會遺漏這些錯誤。
sv migrate
sv migrate 用於遷移 Svelte(Kit) 代碼庫。它委託給 svelte-migrate 包來執行。
某些遷移可能會在你的代碼庫中標註需要完成的任務，你可以通過搜索 @migration 來找到這些任務。
用法
npx sv migrate [migration]遷移選項
app-state
將 .svelte 文件中的 $app/store 用法遷移到 $app/state。詳情請參閲遷移指南。
svelte-5
將 Svelte 4 應用升級到 Svelte 5，並更新各個組件以使用符文 和其他 Svelte 5 語法（參見遷移指南）。
self-closing-tags
替換 .svelte 文件中所有自閉合的非空元素。詳情請參閲這個 PR。
svelte-4
將 Svelte 3 應用升級到 Svelte 4（參見遷移指南）。
sveltekit-2
將 SvelteKit 1 應用升級到 SvelteKit 2（參見遷移指南）。
package
將使用 @sveltejs/package 版本 1 的庫升級到版本 2。詳情請參閲這個 PR。
routes
將預發佈版本的 SvelteKit 應用升級以使用 SvelteKit 1 中的文件系統路由約定。詳情請參閲這個 PR。
Svelte 中文文檔
點擊查看中文文檔：
- 概述
- sv create
- sv add
- sv check
- sv migrate
系統學習 Svelte，歡迎入手小冊《Svelte 開發指南》。語法篇、實戰篇、原理篇三大篇章帶你係統掌握 Svelte！
此外我還寫過 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答讀者問等 14 個系列文章， 全系列文章目錄：https://github.com/mqyqingfeng/Blog
歡迎圍觀我的“網頁版朋友圈”、加入“冴羽·成長陪伴社羣”，踏上“前端大佬成長之路”。
