ಠ_ಠ
萬事問噗浪 更新:已解決,謝謝天使crab老師!!
新手求助有在用VSCode的旅人
我不小心打開了一個輔助設定,現在編輯CSS檔的時候,那個區塊會亮起左側邊線作為醒目提示。
那道亮色對我來說反倒有點干擾,但我現在找不到怎麼關掉
https://images.plurk.com/2FfGmRpOdIy9X2XsIDxe0T.png
ಠ_ಠ
同場也想問,預設有可以改動選擇器顏色的方法嗎?
主要希望「標籤、擬態選擇器」這類原有的選擇器顏色,和自訂的類別選擇器,可以顯示成不一樣的顏色

目前只有找到「下載整個主題」這方式,但其實目前的系統預設深色已經是我最視覺舒適的主題配色了
crab8766
https://images.plurk.com/69OgX0Yf9ibRBQZGjXQaIg.png
如果你只是想關掉 Highlight 的話,就在 Preferences Settings 裡搜尋「bracket highlight」然後把那個選項關掉就好了
另外 bracket 的這個部分還有很多可供設定的部分
crab8766
選擇器顏色的部分,你需要自訂 token 的著色規則
這部分的設定對於新手來說十分複雜,我已經在下面盡可能詳細地把步驟分列出來了

同樣在 Preferences Settings 裡搜尋「token color」,點 Token Color Customizations 下面的 Edit in settings.json
https://images.plurk.com/37QT8Y7Jg9qr1qNAT0rslV.png
crab8766
然後 VSCode 會自動切換到 settings.json 並且自動添加 "editor.tokenColorCustomizations" 項
https://images.plurk.com/4QTY3LZBziYL1ZJ6fDOro9.png

在列表中選擇你使用的主題名稱(看顏色應該是Default Drak+)之後它會變成這個樣子
https://images.plurk.com/LeifsBpBA7vKJNDIPUvCf.png
crab8766
改行之後輸入一個 t,會直接出現候選的 textMateRules
https://images.plurk.com/3BIBBHhVPIaHsvr9EsUgcz.png

按 Enter 自動補完後會是這個樣子
https://images.plurk.com/2NpUm48qovSKjfY8uMDXNf.png
crab8766
改行後輸入一個 大括弧,並在改行後輸入一個 s,會出現候選的 scope
https://images.plurk.com/Btfro6BQ7n9DYKzRHmw1y.png

按 Enter 自動補完後,輸入一個英文冒號,並繼續輸入 entity,就會變成這個樣子
https://images.plurk.com/xt1PGK7csFfPN9ffXv0xv.png
crab8766
先以更改標籤為例,選擇 entity.name.tag 之後輸入一個英文逗號
https://images.plurk.com/7KBnc3kS2ujIpK6Qt0cPP0.png

改行之後再輸入 s,會出現 settings 的候選
https://images.plurk.com/5HISnGM1N8q4yMFmmQPJnQ.png

按 Enter 自動補完後 VSCode 會自動幫你補上基本的屬性
https://images.plurk.com/6OTHiiMZGqOOyhCFAexpWB.png
foreground 為 token 的顏色,如果你不需要加粗的話刪掉 fontStyle 一行即可
crab8766
設定完成後在 entity.name.tag 的後方補上一個 .css 之後,按 Ctrl + S 保存 settings.json
https://images.plurk.com/4rUxsnZNyDBuNHtBMNi7PH.png

再回到你的 CSS 文檔之後,標籤的部分應該就會變為你設定的顏色了
https://images.plurk.com/1YQTb1hN1uZhdVUONTvNfJ.png
crab8766
類別選擇器的部分同理,只不過 scope 的部分需要換為 entity.other.attribute-name.class.css
https://images.plurk.com/MJHZvHCWCHy5YDtOK4q2L.png
然後不要忘記每個項目之間要用英文逗號區隔
crab8766
同樣,保存 settings.json 之後回到 CSS 文檔,類別選擇器的部分也會被重新著色
https://images.plurk.com/4LnlzwtB6d4GbDWffivr8P.png
crab8766
如果你需要知道不同 token 的 scope 為甚麼
按 Ctrl + Shift + P 叫出 command palette 之後,輸入 tokens,候選會出現一個開發者工具
https://images.plurk.com/1TNioeVVA3SiJdToL2YhMD.png

啟動它之後你就能查看程式碼中 token 的 scope 內容了
https://images.plurk.com/14AlZsglaKdEmZbIb4I7Ky.png
比如 font-size 的 scope 是 support.type.property-name.css

https://images.plurk.com/3xud32r331DouQ4hbznNhU.png
px 則是 keyword.other.unit.px.css
crab8766
如果你需要將不同的 scope 設定為同樣的顏色,也可以在 settings.json 的 "scope": 後加上中括弧,並以英文逗號作為分隔,這樣就可以一次設定多個 scope 了
https://images.plurk.com/12SHRNQt5JG7GozhYQLTAq.png

https://images.plurk.com/24vE9MpKDBp87WF6Nyff1c.png
結果是這個樣子
ಠ_ಠ
crab8766: crab旅人……您是天使嗎😭 非常謝謝細緻又佛心的手把手教學和講解,醒來一看到立刻彈起床,這就來跟著操作試試看
找到張可愛的知更鳥大唱的照片表達激動的感謝和希望他幫您吃掉很多蟲!!!!

https://imgs.plurk.com/QD1/3hS/IlDZjmz08NP4vheaBqGGasZtCtb_lg.jpg
ಠ_ಠ
回報:照著褓姆級的指導後更改成功了!!!
也學習到了其它部份怎麼更動,真的很謝謝crab老師😭😭😭
https://images.plurk.com/dYVOJw0xsRzVbGZPNagTF.png
ಠ_ಠ
小小薄幣,滿滿的感謝
crab8766
感謝噗主打賞~
(知更鳥的羽毛顏色好漂亮,我要去搜尋更多的知更鳥圖片了
crab8766
https://images.plurk.com/7Bxfu78GzgMRRS7APILlUF.png
還有一點要說明一下,如果 textMateRules 是直接放在 editor.tokenColorCustomizations 下的話,它會變成一個全域的設定,是會對所有主題產生影響,我個人還是建議在 textMateRules 外加上主題的名稱來限制其影響的範圍

然後如果你要調整很多內容的話還可以給每個 Rules 加上一個 "name": 項作為註釋,因為有時候只看 scope 會搞不清楚它是負責哪個部份的
ಠ_ಠ
crab8766: 真的很漂亮! 之前有天突然好奇蛋這麼有名的鳥不知道本人長怎樣,一找之後心臟被直擊
補充說明好貼心!!! 截圖的示範超精準一目瞭然,我會謹記在心的&這就去加上"name":
載入新的回覆