ಠ_ಠ
@anonymous
偷偷說
Sat, Jul 15, 2023 3:26 PM
Sun, Jul 16, 2023 1:31 AM
2
萬事問噗浪
更新:已解決,謝謝天使crab老師!!
新手求助有在用VSCode的旅人
我不小心打開了一個輔助設定,現在編輯CSS檔的時候,那個區塊會亮起左側邊線作為醒目提示。
那道亮色對我來說反倒有點干擾,但我現在找不到怎麼關掉
ಠ_ಠ
Sat, Jul 15, 2023 3:31 PM
同場也想問,預設有可以改動選擇器顏色的方法嗎?
主要希望「標籤、擬態選擇器」這類原有的選擇器顏色,和自訂的類別選擇器,可以顯示成不一樣的顏色
目前只有找到「下載整個主題」這方式,但其實目前的系統預設深色已經是我最視覺舒適的主題配色了
crab8766
Sat, Jul 15, 2023 4:29 PM
如果你只是想關掉 Highlight 的話,就在 Preferences Settings 裡搜尋「bracket highlight」然後把那個選項關掉就好了
另外 bracket 的這個部分還有很多可供設定的部分
crab8766
Sat, Jul 15, 2023 6:09 PM
Sat, Jul 15, 2023 7:12 PM
選擇器顏色的部分,你需要自訂 token 的著色規則
這部分的設定對於新手來說十分複雜,我已經在下面盡可能詳細地把步驟分列出來了
同樣在 Preferences Settings 裡搜尋「token color」,點
Token Color Customizations
下面的 Edit in settings.json
crab8766
Sat, Jul 15, 2023 6:15 PM
然後 VSCode 會自動切換到 settings.json 並且自動添加 "editor.tokenColorCustomizations" 項
在列表中選擇你使用的主題名稱(看顏色應該是Default Drak+)之後它會變成這個樣子
crab8766
Sat, Jul 15, 2023 6:19 PM
Sat, Jul 15, 2023 6:19 PM
改行之後輸入一個 t,會直接出現候選的
textMateRules
按 Enter 自動補完後會是這個樣子
crab8766
Sat, Jul 15, 2023 6:26 PM
Sat, Jul 15, 2023 6:26 PM
改行後輸入一個
大括弧
,並在改行後輸入一個 s,會出現候選的
scope
按 Enter 自動補完後,輸入一個英文冒號,並繼續輸入 entity,就會變成這個樣子
crab8766
Sat, Jul 15, 2023 6:31 PM
Sat, Jul 15, 2023 6:32 PM
先以更改標籤為例,選擇
entity.name
.tag
之後輸入一個英文逗號
改行之後再輸入 s,會出現 settings 的候選
按 Enter 自動補完後 VSCode 會自動幫你補上基本的屬性
foreground
為 token 的顏色,如果你不需要加粗的話刪掉
fontStyle
一行即可
crab8766
Sat, Jul 15, 2023 6:38 PM
設定完成後在
entity.name
.tag
的後方補上一個
.css
之後,按 Ctrl + S 保存 settings.json
再回到你的 CSS 文檔之後,標籤的部分應該就會變為你設定的顏色了
crab8766
Sat, Jul 15, 2023 6:44 PM
類別選擇器的部分同理,只不過 scope 的部分需要換為
entity.other.attribute-name.class.css
然後不要忘記每個項目之間要用英文逗號區隔
crab8766
Sat, Jul 15, 2023 6:45 PM
同樣,保存 settings.json 之後回到 CSS 文檔,類別選擇器的部分也會被重新著色
crab8766
Sat, Jul 15, 2023 6:55 PM
如果你需要知道不同 token 的 scope 為甚麼
按 Ctrl + Shift + P 叫出 command palette 之後,輸入 tokens,候選會出現一個開發者工具
啟動它之後你就能查看程式碼中 token 的 scope 內容了
比如 font-size 的 scope 是 support.type.property-name.css
px 則是 keyword.other.unit.px.css
crab8766
Sat, Jul 15, 2023 7:02 PM
1
如果你需要將不同的 scope 設定為同樣的顏色,也可以在 settings.json 的
"scope":
後加上中括弧,並以英文逗號作為分隔,這樣就可以一次設定多個 scope 了
結果是這個樣子
ಠ_ಠ
Sun, Jul 16, 2023 12:40 AM
crab8766: crab旅人……您是天使嗎😭 非常謝謝細緻又佛心的手把手教學和講解,醒來一看到立刻彈起床,這就來跟著操作試試看
找到張可愛的知更鳥大唱的照片表達激動的感謝和希望他幫您吃掉很多蟲!!!!
ಠ_ಠ
Sun, Jul 16, 2023 1:26 AM
回報:照著褓姆級的指導後更改成功了!!!
也學習到了其它部份怎麼更動,真的很謝謝crab老師😭😭😭
ಠ_ಠ
Sun, Jul 16, 2023 1:33 AM
小小薄幣,滿滿的感謝
crab8766
Sun, Jul 16, 2023 5:53 AM
感謝噗主打賞~
(知更鳥的羽毛顏色好漂亮,我要去搜尋更多的知更鳥圖片了
crab8766
Sun, Jul 16, 2023 6:27 AM
Sun, Jul 16, 2023 6:29 AM
還有一點要說明一下,如果
textMateRules
是直接放在
editor.tokenColorCustomizations
下的話,它會變成一個全域的設定,是會對所有主題產生影響,我個人還是建議在
textMateRules
外加上主題的名稱來限制其影響的範圍
然後如果你要調整很多內容的話還可以給每個 Rules 加上一個
"name":
項作為註釋,因為有時候只看 scope 會搞不清楚它是負責哪個部份的
ಠ_ಠ
Sun, Jul 16, 2023 11:00 AM
crab8766: 真的很漂亮! 之前有天突然好奇蛋這麼有名的鳥不知道本人長怎樣,一找之後心臟被直擊
補充說明好貼心!!! 截圖的示範超精準一目瞭然,我會謹記在心的&這就去加上"name":
載入新的回覆
新手求助有在用VSCode的旅人
我不小心打開了一個輔助設定,現在編輯CSS檔的時候,那個區塊會亮起左側邊線作為醒目提示。
那道亮色對我來說反倒有點干擾,但我現在找不到怎麼關掉
主要希望「標籤、擬態選擇器」這類原有的選擇器顏色,和自訂的類別選擇器,可以顯示成不一樣的顏色
目前只有找到「下載整個主題」這方式,但其實目前的系統預設深色已經是我最視覺舒適的主題配色了
如果你只是想關掉 Highlight 的話,就在 Preferences Settings 裡搜尋「bracket highlight」然後把那個選項關掉就好了
另外 bracket 的這個部分還有很多可供設定的部分
這部分的設定對於新手來說十分複雜,我已經在下面盡可能詳細地把步驟分列出來了
同樣在 Preferences Settings 裡搜尋「token color」,點 Token Color Customizations 下面的 Edit in settings.json
在列表中選擇你使用的主題名稱(看顏色應該是Default Drak+)之後它會變成這個樣子
按 Enter 自動補完後會是這個樣子
按 Enter 自動補完後,輸入一個英文冒號,並繼續輸入 entity,就會變成這個樣子
改行之後再輸入 s,會出現 settings 的候選
按 Enter 自動補完後 VSCode 會自動幫你補上基本的屬性
foreground 為 token 的顏色,如果你不需要加粗的話刪掉 fontStyle 一行即可
再回到你的 CSS 文檔之後,標籤的部分應該就會變為你設定的顏色了
然後不要忘記每個項目之間要用英文逗號區隔
按 Ctrl + Shift + P 叫出 command palette 之後,輸入 tokens,候選會出現一個開發者工具
啟動它之後你就能查看程式碼中 token 的 scope 內容了
比如 font-size 的 scope 是 support.type.property-name.css
px 則是 keyword.other.unit.px.css
結果是這個樣子
找到張可愛的知更鳥大唱的照片表達激動的感謝和希望他幫您吃掉很多蟲!!!!
也學習到了其它部份怎麼更動,真的很謝謝crab老師😭😭😭
(知更鳥的羽毛顏色好漂亮,我要去搜尋更多的知更鳥圖片了
還有一點要說明一下,如果 textMateRules 是直接放在 editor.tokenColorCustomizations 下的話,它會變成一個全域的設定,是會對所有主題產生影響,我個人還是建議在 textMateRules 外加上主題的名稱來限制其影響的範圍
然後如果你要調整很多內容的話還可以給每個 Rules 加上一個 "name": 項作為註釋,因為有時候只看 scope 會搞不清楚它是負責哪個部份的
補充說明好貼心!!! 截圖的示範超精準一目瞭然,我會謹記在心的&這就去加上"name":