如何使 VS Code 支援 CSS Intellisense ?

栏目: CSS · 发布时间: 7年前

内容简介:VS Code 預設並沒有支援 CSS Class 的 Intellisense,這使得 HTML 在套用 CSS Class 時很不方便,需要另外安裝VS Code 1.33.1HTML CSS Support 0.2.0

VS Code 預設並沒有支援 CSS Class 的 Intellisense,這使得 HTML 在套用 CSS Class 時很不方便,需要另外安裝 HTML CSS Support Extension。

Version

VS Code 1.33.1

HTML CSS Support 0.2.0

Bootstrap 4.3.1

HTML CSS Support

如何使 VS Code 支援 CSS Intellisense ?

另外安裝 HTML CSS Support 。

CSS Intellisense

CSS 就使用上,大概有 3 種情境:

*.min.css
*.css
*.min.css

對於前兩種狀況,HTML CSS Support 都可以直接抓到 CSS class 沒問題。

但對於第 3 種方式,就必須額外的設定。

Remote CSS

如何使 VS Code 支援 CSS Intellisense ?

在 command palette 下,輸入 json ,選擇 Preferences: Open Settings (JSON) 。

settings.json

"css.remoteStyleSheets": [
  "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
]

新增 css.remoteStyleSheets ,在 array 內加入 Bootstrap 的 CDN。

如何使 VS Code 支援 CSS Intellisense ?

只是以 Bootstrap 為例,其他如 Font Awesome …等的 CDN 也適用

如何使 VS Code 支援 CSS Intellisense ?

Bootstrap 的 CSS class 出現了。

Conclusion

  • 加上 HTML CSS Support 之後,就可以在 VS Code 很開心地使用 CSS class 了

Reference

VS Code , HTML CSS Support


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。

Don't Make Me Think

Don't Make Me Think

Steve Krug / New Riders Press / 18 August, 2005 / $35.00

Five years and more than 100,000 copies after it was first published, it's hard to imagine anyone working in Web design who hasn't read Steve Krug's "instant classic" on Web usability, but people are ......一起来看看 《Don't Make Me Think》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具