Svelte 開新專案與環境設定
tags: Svelte
category: Front-End
description: Svelte 開新專案與環境設定
created_at: 2023/03/31 20:00:00
前言
不管在開發什麼東西，最麻煩的總是 環境設定，真的很討厭，所以這一篇主要完成開新專案與環境設定就好，目前的規劃是
- 開一個乾淨的
Svelte專案 - 在
VSCode安裝相關擴充 - 為專案加入
ESlint、Prettier與Tailwindcss
然後接下來的開發都會以 VSCode 當作 IDE 為主。
上面這段都是抄 Vue 3 文章來的
好啦，總之就是環境設定超級超級超級麻煩，如果你沒感覺，哪天碰到了你就知道了
先開新專案
Svelte 官方推薦使用 SvelteKit 去建立專案，但也可以基於 Vite 去建立專案。
為了讓指令好記，所以我都使用 Vite 去建立，反正他會有選項幫你導向到 SvelteKit 去，所以沒有差異。只是我懶得查各個官方，一下建 Vue 、一下建 React ，倒不如統一用一個指令
$ npm init vite@latest之後你會看到他問你一些問題，像是下面這樣
√ Project name: ... svelte-app
√ Select a framework: » Svelte
√ Select a variant: » SvelteKit ↗
create-svelte version 3.2.0
T Welcome to SvelteKit!
|
o Which Svelte app template?
| Skeleton project
|
o Add type checking with TypeScript?
| Yes, using TypeScript syntax
|
o Select additional options (use arrow keys/space bar)
| Add ESLint for code linting, Add Prettier for code formatting
|
— Your project is ready!他會問你的分別是
- 輸入專案名稱
- 選擇框架:
Svelte - 選擇以
SvelteKit建立 - --- 導向到
SvelteKit CLI工具 --- - 選擇
template: 空白專案(Skeleton project) - 使用什麼語言:
TypeScript - 額外選項，如下:
- 要不要加入
ESLint - 要不要加入
Prettier - 要不要用
Playwright做E2E測試 - 要不要使用
Vitest做單元測試
這邊我先勾選 ESLint 與 Prettier，雖然之後還是得設定
開啟後，安裝相依套件
$ npm i或是
$ yarn把你的 node_modules 生出來
安裝相關擴充套件
在 Svelte 的官方，他推薦使用 VSCode 去安裝一個擴充套件 Svelte for VS Code
再來加入 ESlint 、 Prettier 與 Tailwindcss
咦? 剛剛不是已經在建專案的時候加入 ESlint 、 Prettier 了嗎?
對，沒錯，但我希望可以做到存檔之後自動 prettier，提高開發體驗，順便偷 promote 自己的指令
你可以下這個指令
$ npx lai-cmd init svelte他會幫你初始化 ESlint 與 Prettier 之後再問你要不要一起加入 Tailwindcss
Do you want to initialize eslint? (y) n
Do you want to change plugin from svelte3 to svelte? (y) y
Do you want to initialize prettier? (y) y
Do you want to initialize tailwindcss? (y) y
√ Please input index.css path ... ./src/index.css
Do you want to add extensions(bradlc.vscode-tailwindcss) to extensions.json? (y) y
Do you want to generate vscode settings.json? (y) y
Do you want to add extensions(svelte.svelte-vscode) to extensions.json? (y) y這邊需要注意的是，tailwindcss 的部分可能會跳錯誤:
update tailwind config...
update tailwind config failed...
please update it manually.
add the following content to tailwind.config.js:
module.exports = {
content: ['./index.html', './src/**/*.{html,svelte,vue,js,ts,jsx,tsx}'],
}因為我目前還沒對新版的設定檔寫 parser，所以必須手動改設定，打開 tailwind.config.js，並更新 content
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{html,svelte,vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}而 Do you want to change plugin from svelte3 to svelte 則是為了讓你在開發 template 的時候也可以有自動排版而改的，細節可以自己去找，不想管那麼多就 y 就對了。
而最後三項是關於 vscode 的一些設定，如果你不需要也可以下 n 來取消。
就算你不想使用這個指令幫你加入ESlint 、 Prettier，你只想加入 Tailwindcss 的話，你可以只下下面這個指令
$ npx lai-cmd init svelte-tailwindcss稍微玩一下 Prettier
打開你的 src/routes/+page.svelte，應該是長這樣
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>故意在 p 標籤的 Visit 後面換行，變成這樣
<h1>Welcome to SvelteKit</h1>
<p>Visit
<a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>應該會有一堆紅色底線，然後存檔，照理來說會變下面這樣
<h1>Welcome to SvelteKit</h1>
<p>
Visit
<a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>這樣你就成功了。
測試 Tailwindcss
透過上面的指令安裝 Tailwindcss 的時候，他有問 css 路徑，但是因為預設沒有，所以他幫忙建立了一個。
只有建立當然沒用，要引入(import)才有作用，所以要先在你要用的地方引入。
所以把 +page.svelte 改成
<script>
import '../index.css';
</script>
<h1 class="bg-blue-500 text-white">Welcome to SvelteKit</h1>
<p>
Visit
<a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>引入 css 之後，加入一下 class 的設定，然後開啟測試伺服器看一下，有沒有在畫面上看到藍色的一塊背景。
$ yarn dev總結
上面這樣就把開發環境設定好了，接下來就要開始實際下去寫Code了