HTML/CSS/JavaScript——VSCode的插件推荐

前言

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

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

文章目录

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

1.HTML

HTML/CSS/JavaScript——VSCode的插件推荐_第1张图片
(最为基础的代码联想工具

HTML/CSS/JavaScript——VSCode的插件推荐_第2张图片
(引入图片的预览工具

HTML/CSS/JavaScript——VSCode的插件推荐_第3张图片
(自动修改前后关联标签,但在卡顿时会出现缺漏

HTML/CSS/JavaScript——VSCode的插件推荐_第4张图片
(高亮显示关联标签,方便快速查找

HTML/CSS/JavaScript——VSCode的插件推荐_第5张图片
(使用Alt+W即可为一段代码一键添加外部标签,与关联修改合作完美

HTML/CSS/JavaScript——VSCode的插件推荐_第6张图片
(我个人最喜欢的插件之一,能够实时预览页面修改后的样式,只要VSCode设置了自动保存,该插件便会主动刷新页面,配合Windows Opacity透明度插件,甚至可以不用来回切换页面即可修改

HTML/CSS/JavaScript——VSCode的插件推荐_第7张图片
(BootStrap以及Font Awesome使用者的神器,可以通过简单代码快速生成所需要的组件以及图标

HTML/CSS/JavaScript——VSCode的插件推荐_第8张图片
(这一插件经常造成VSCode卡顿,导致所有功能消失,因此极不建议使用

2.CSS

HTML/CSS/JavaScript——VSCode的插件推荐_第9张图片
(检测CSS类名并给出建议

HTML/CSS/JavaScript——VSCode的插件推荐_第10张图片
(查找相关CSS,不过对于大规模项目基本毫无作用,还会拖慢运行速度

HTML/CSS/JavaScript——VSCode的插件推荐_第11张图片
(自动补全支持不同浏览器,极大地简便了适配工作

HTML/CSS/JavaScript——VSCode的插件推荐_第12张图片
(基础工具

3.JavaScript

HTML/CSS/JavaScript——VSCode的插件推荐_第13张图片
(代码补全库,与下面那一个选择其中之一即可

HTML/CSS/JavaScript——VSCode的插件推荐_第14张图片
(Quokka的便捷开关插件,建议配合安装

HTML/CSS/JavaScript——VSCode的插件推荐_第15张图片
(代码补全库,选择其一即可

HTML/CSS/JavaScript——VSCode的插件推荐_第16张图片
(Quokka本体,请注意此插件需要配合安装Node.js,可以实时编译JavaScript并将变量显示在代码中,不过一般情况下都没有太大用处,适合初学者用来辅助搞清自己在操作什么节点

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


另外,关于Kite AutoComplete插件:
HTML/CSS/JavaScript——VSCode的插件推荐_第17张图片
属于AI代码智能提示插件,不过需要事先安装Kite本体,而且代码的完全性也不是非常完美(例如不会自动为方法添加括号,虽然插件能够满足我的需求,但选项却被Kite压在了第二个,导致快速补全时非常难受),所以被我在当天放弃了。

你可能感兴趣的:(VSCode,html,javascript,css,vscode)