Web前端 — VSCode实用扩展插件

简介: 在Web前端开发中常用的 VSCode 插件内容来源 前端VSCode常用插件-快捷键-以及常用技巧-pink老师下面介绍插件如何下载和使用如有帮助,请关注点赞支持博主,后期会出其他相关软件安装教程!!!

文章目录

前言

1.Chinese (Simplified) 汉化

2.Auto Rename Tag

3.One Dark Pro

4.格式化代码(vscode 系统自带)

5.open in browser

6.Live Server 实时预览

7.vscode-icons

8.Easy LESS

9.会了吧 (单词翻译插件)


1.Chinese (Simplified) 汉化

image.png

由于 vscode 下载完后是英文版,安装完这个插件后,重启vscode后,变为中文版


安装步骤(下面软件相同)

1.双击点击扩展

image.png

2.在搜索框中搜索相关软件名称

image.png

3.搜索后,点击软件安装即可,安装后重启vscode即可

image.png


2.Auto Rename Tag

image.png

修改开始标签,结束标签跟着自动变化


使用说明

image.png

3.One Dark Pro

image.png

可以修改颜色主题(可以修改代码的颜色)


安装后 代码颜色效果

image.png

4.格式化代码(vscode 系统自带)

开启步骤

1.点击设置图标,再点击设置(ctrl+,)按钮

image.png

2.进入后勾选,下面两项

image.png

3.在CTRL+S在保存时,会自动格式化


5.open in browser

image.png

代码编写完后,需要浏览器预览,安装这个插件即可


使用说明

image.png


6.Live Server 实时预览

image.png

这个插件,修改完代码后,自动会更新浏览器(懒人福音)


注意点:

要先用vscode打开文件夹所在的目录文件夹


7.vscode-icons

image.png

可以看到文件对应的图标,查看文件时更加直观


安装后效果

image.png

8.Easy LESS

image.png

这个插件会自动帮我们生成css文件


9.会了吧 (单词翻译插件)

image.png

一个翻译插件,还有发音,边学习编程还可以学习英语


效果图

image.png


如这篇博客对大家有帮助的话,希望 三连 支持一下 !!! 如果有错误感谢大佬的斧正 如有 其他见解发到评论区,一起学习 一起进步。

目录
相关文章
|
4天前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
87 2
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
|
17天前
|
存储 JSON JavaScript
WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
本文介绍了如何使用MxPluginContext动态控制MxCAD项目的UI界面。通过该上下文对象,开发者可以灵活设置UI配置,如控制操作栏显隐、编辑按钮、添加侧边栏等。具体方法包括调用`getUiConfig()`获取并修改`mxUiConfig.json`中的属性,实现界面的定制化。此外,还提供了控制命令行聚焦的功能,解决输入框焦点锁定问题。详细代码示例和效果对比图展示了具体实现步骤,帮助开发者更好地适配项目需求。
|
23天前
|
人工智能 自然语言处理 前端开发
VSCode AI提效工具,通义灵码前端开发体验
通义灵码2.0是一款强大的VS Code插件,安装简便,图标易记。其亮点包括接入deepseek-v3/r1模型,支持智能问答、AI编程、代码优化及贴图提问;多语言和编辑器支持;个性化使用满足不同需求。个人版完全免费,节省12%开发时间。对比1.0版本,2.0在功能实现上更加完善,尤其在前端项目中表现出色,根据需求描述生成完整项目结构和详细代码,极大提升开发效率。
148 0
|
2月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
71 10
|
4月前
|
监控 前端开发 JavaScript
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
74 6
|
4月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
107 8
|
4月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
82 2
|
4月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
5月前
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
307 0

热门文章

最新文章