HTML/CSS/JavaScript

您所在的位置:网站首页 用VScode写JAVA需要下啥 HTML/CSS/JavaScript

HTML/CSS/JavaScript

2024-07-10 17:43| 来源: 网络整理| 查看: 265

前言

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

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

文章目录 前言1.HTML2.CSS3.JavaScript

1.HTML

在这里插入图片描述 (最为基础的代码联想工具

在这里插入图片描述 (引入图片的预览工具

在这里插入图片描述 (自动修改前后关联标签,但在卡顿时会出现缺漏

在这里插入图片描述 (高亮显示关联标签,方便快速查找

在这里插入图片描述 (使用Alt+W即可为一段代码一键添加外部标签,与关联修改合作完美

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

在这里插入图片描述 (BootStrap以及Font Awesome使用者的神器,可以通过简单代码快速生成所需要的组件以及图标

在这里插入图片描述 (这一插件经常造成VSCode卡顿,导致所有功能消失,因此极不建议使用

2.CSS

在这里插入图片描述 (检测CSS类名并给出建议

在这里插入图片描述 (查找相关CSS,不过对于大规模项目基本毫无作用,还会拖慢运行速度

在这里插入图片描述 (自动补全支持不同浏览器,极大地简便了适配工作

在这里插入图片描述 (基础工具

3.JavaScript

在这里插入图片描述 (代码补全库,与下面那一个选择其中之一即可

在这里插入图片描述 (Quokka的便捷开关插件,建议配合安装

在这里插入图片描述 (代码补全库,选择其一即可

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

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3