iT邦幫忙

2021 iThome 鐵人賽

DAY 13
1
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!系列 第 14

Day 13:「誰還在背字典?」- Tailwind IntelliSense 插件

Day13-Banner

嗨大家好,昨天建立的如何呢!
我想應該不會遇到太多的困難吧~

雖然上次沒有明講,
但我想應該大部分人都是用 VS Code 在開發吧?

既然如此我們就來介紹個好用的東西!
 


 

carrotPoint Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 是一個 VS Code 的擴充套件,它可以讓你在 Tailwind 的開發體驗急速上升,這樣說你一定不明白,讓我們直接列出來看看各項特色功能吧。

語法自動完成

智慧提示可以使用 class 名稱,以及 class 實際上所代表的功能,語法提示的話就像是這樣:

那除了語法提示之外,可以看到語法提示的右側也會簡略的顯示出內容,讓你快速了解這個功能的用途。

那在圖示上也可以發現,一般的功能都是屬性的符號,而如果是可以被加在前面當前綴詞的變化模式那類,就會是 {} 的符號。

顏色則會直接顯示顏色本身,改變顏色用的功能會顯示為調色盤。

在 css 檔案之中,撰寫指令也有自動提示:


 

語法檢查 (Linting)

語法檢查功能可以顯示出潛在的錯誤及 bug,例如像是相同用途的 class 不得放在同個元素,上圖舉例:

以這個例子來說,因為 flex 和 block 是同一個 css 屬性的不同參數而已,如果你同時寫了 flex 和 block,看起來就會是:

div {
  display: flex;
  display: block;
}

這樣的屬性設定是毫無意義的,而在 Tailwind CSS 之中,只會使第一個寫的屬性生效,會忽略後面相同屬性的功能,所以這個例子之中也就是只會具有 flex 的效果,而不會是 blcok。

同時滑鼠懸停時也會跳出錯誤提示:

還有你如果在 css 當中撰寫語法,若有錯誤及 bug 也會顯示:

 

懸停預覽

如果你熟悉 CSS 功能,但對 Tailwind 語法不熟悉,這個功能肯定可以大大的幫上你。 把滑鼠懸停在 class 上,會跳出這個 class 的內部實際上實現的功能以及在 css 中真正的 class 名稱:


 

語法強調

提供語法定義來正確地強調 Tailwind 功能。
 

carrotPoint 安裝

安裝方法其實非常簡單,就如同在 VS Code 中安裝其他擴充套件一般。

STEP 1

首先,搜尋 Tailwind

STEP 2

沒錯,就是第一個,你沒看錯。
名稱一樣的也只有它了XD
安裝給它按下去!

STEP 3

你還期待有 Step 3?
花不到幾秒的時間就安裝好了!
既然安裝好就快去用了啦 XD
 

carrotPoint 業障小蚯蚓

假設你在 css 檔中發現這個警告 ...

其實不要緊,一樣都是正常提示語法的,不過因為 @tailwind@screen@apply 這些爆出警告的 CSS @規則都是 Tailwind 自訂的指令,必須透過安裝 VS Code 的 PostCSS Language Support 擴充套件或是其他可以幫助解析 PostCSS 語法的擴充套件才能消除業障的小蚯蚓

搜尋一下,然後安裝第二個那個就可以囉~
 

carrotPoint 補充

雖然沒什麼好補充的,不過以下這邊有幾個要點要注意一下哦!

語法沒提示

要使語法可以提示,可以檢查以下三點:

  • 專案根目錄中是否有 tailwind.config.js
  • 是否在專案中有安裝 Tailwind。
  • tailwind.config.js 中是否存在錯誤

某些語法在提示視窗中找不到

在預設沒有開啟 JIT 模式的情況下,語法提示的詳細程度是根據配置檔的詳細程度,Tailwind CSS IntelliSense 並不會提供你沒有設定無法使用的語法。

若開啟 JIT 模式則會全部語法都提示,但別為了能夠提示全部的語法而開啟 JIT。

還是不跳提示?

如果上面這些方法在你的檔案中都沒辦法解決問題,可以開啟 Tailwind CSS IntelliSense 中的擴充套件設定:

在 Include Languages 裡面增加你所使用的檔案類型。

只有 VS Code 能用嗎?

JetBrains IDEs 也可以支援相關的語法功能,
但還是推薦你使用 VS Code 就好。
 

呼! 今天的圖片好多。

因為啊其實官方也沒有介紹的很詳細,
所以如果這篇有錯誤的地方請不要害羞~
大力的在下面留言告訴我哦!

使用上應該是不太會遇到問題,
下個篇章,我們就要來拆阿嬤的裹腳布囉~
(啊 ... 臭!)
 

carrotPoint 給你們的回家作業:

  • 作業實施要點:
    • 試著安裝 Tailwind CSS IntelliSense,然後寫了幾句跳出提示後再解除安裝,大約重複五十次
       

關於兔兔們:


 


( # 兔兔小聲說 )

兔兔給認真看到這裡的人一點小福利喲!
只要有看到這裡,只要裝一次就好而且不用解除安裝。

如果沒有追蹤每篇的兔兔小聲說,
就讓他們重複練習 100 次吧!!!

(咦 ... 作業上說好的 50 次呢 ...)


上一篇
Day 12:「我可不可以 CDN 就好?」- Tailwind 安裝及設定
下一篇
Day 14:「怎麼跟阿嬤的裹腳布一樣啦!」- 提取成元件
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32

尚未有邦友留言

立即登入留言