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


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

目录
相关文章
|
1月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
64 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
27天前
|
监控 前端开发 JavaScript
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
30 6
|
29天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
37 6
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
39 2
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
1月前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
28 3
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。