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

前言

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

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

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压在了第二个,导致快速补全时非常难受),所以被我在当天放弃了。

  • 18
    点赞
  • 76
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的联系我们页面的HTML/CSS/JavaScript代码示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Contact Us</title> <style> /* 样式表 */ label { display: block; margin-bottom: 10px; font-weight: bold; } input[type=text], textarea { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; } textarea { height: 150px; } button { background-color: #4CAF50; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } </style> </head> <body> <h1>Contact Us</h1> <form> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="text" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button type="submit">Submit</button> </form> <script> // JavaScript代码 const form = document.querySelector('form'); form.addEventListener('submit', e => { e.preventDefault(); // 阻止默认提交行为 // TODO: 这里可以写发送邮件的代码 alert('Thank you for your message! We will get back to you soon.'); form.reset(); // 重置表单 }); </script> </body> </html> ``` 该代码包括了一个简单的表单,由输入姓名、邮箱和留言组成,以及一个提交按钮。当用户点击提交按钮时,JavaScript代码会阻止默认的表单提交行为,并弹出一个提示框,表示我们已经收到了用户的信息。 当然,这只是一个简单的示例,如果您的业务需求更加复杂,还需要根据实际情况进行相应的代码实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值