前言

VSCode作为一款在代码编辑领域尚为萌新的工具，以其界面的整洁美观与插件环境的高扩展性，在所处的圈子中也逐渐受到了不少人的青睐。
作为一款轻便的编辑器，自然是通过各类插件来实现对语言的支持，对于愿意花时间研究以及对自定义化有着极高要求的使用者，显然是不可多得的好东西。
这样的特性，意味着VSCode除了在美观性上有着极大的扩展空间，更为重要的是在HTML、JavaScript、Python这样的即时编译语言中有着极其巨大的优势。
本文会从HTML、CSS与JavaScript三门基础的前端语言讲起，对VSCode的相关插件进行推荐。

由于是重度插件控，以下所有的推荐请根据自己的需求酌情选择。


文章目录

  • 前言
  • 1.HTML
  • 2.CSS
  • 3.JavaScript


1.HTML

javascript vsc JavaScriptvscode插件_vscode


（最为基础的代码联想工具

javascript vsc JavaScriptvscode插件_javascript vsc_02


（引入图片的预览工具

javascript vsc JavaScriptvscode插件_vscode_03


（自动修改前后关联标签，但在卡顿时会出现缺漏

javascript vsc JavaScriptvscode插件_html_04


（高亮显示关联标签，方便快速查找

javascript vsc JavaScriptvscode插件_javascript_05


（使用Alt+W即可为一段代码一键添加外部标签，与关联修改合作完美

javascript vsc JavaScriptvscode插件_html_06


（我个人最喜欢的插件之一，能够实时预览页面修改后的样式，只要VSCode设置了自动保存，该插件便会主动刷新页面，配合Windows Opacity透明度插件，甚至可以不用来回切换页面即可修改

javascript vsc JavaScriptvscode插件_javascript vsc_07


（BootStrap以及Font Awesome使用者的神器，可以通过简单代码快速生成所需要的组件以及图标

javascript vsc JavaScriptvscode插件_javascript vsc_08


（这一插件经常造成VSCode卡顿，导致所有功能消失，因此极不建议使用

2.CSS

javascript vsc JavaScriptvscode插件_css_09


（检测CSS类名并给出建议

javascript vsc JavaScriptvscode插件_javascript_10


（查找相关CSS，不过对于大规模项目基本毫无作用，还会拖慢运行速度

javascript vsc JavaScriptvscode插件_css_11


（自动补全支持不同浏览器，极大地简便了适配工作

javascript vsc JavaScriptvscode插件_javascript vsc_12


（基础工具

3.JavaScript

javascript vsc JavaScriptvscode插件_css_13


（代码补全库，与下面那一个选择其中之一即可

javascript vsc JavaScriptvscode插件_javascript vsc_14


（Quokka的便捷开关插件，建议配合安装

javascript vsc JavaScriptvscode插件_javascript_15


（代码补全库，选择其一即可

javascript vsc JavaScriptvscode插件_css_16


（Quokka本体，请注意此插件需要配合安装Node.js，可以实时编译JavaScript并将变量显示在代码中，不过一般情况下都没有太大用处，适合初学者用来辅助搞清自己在操作什么节点

以上便是我在写三大基础前端代码时所用的插件，针对于JQuery、Ajax、php、Vue等，以及VSCode本身界面的美化，我会在单独的帖子中予以介绍。

另外，关于Kite AutoComplete插件：

javascript vsc JavaScriptvscode插件_css_17


属于AI代码智能提示插件，不过需要事先安装Kite本体，而且代码的完全性也不是非常完美（例如不会自动为方法添加括号，虽然插件能够满足我的需求，但选项却被Kite压在了第二个，导致快速补全时非常难受），所以被我在当天放弃了。