千锋重庆web前端技术分享之前端VSCode常用插件

article/2025/10/4 8:40:59

一、VSCode常用的插件vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷。 注意,新手学习期间,不建议安装形形色色的插件,用到啥就安装啥。因为有些插件会到vue学习的时候引起冲突,所以这里千锋重庆HTML5培训机构的老师介绍几个常用的插件。

Chinese (Simplified) 汉化

Auto Rename Tag

One Dark Pro 颜色主题

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

open in browser 浏览器预览页面

Live Server 实时预览(推荐)

vscode-icons 设置文件图标主题

Easy LESS 编译less文件

会了吧 学习单词插件 (可以使用)

1.Chinese (Simplified) vscode

下载完毕是英文版的,先安装这个插件,改为中文版,所以是我们第一个安装的插件。

在这里插入图片描述
2.Auto Rename Tag
在这里插入图片描述

修改开始标签,结束标签跟着自动变化,比较好用。

3.One Dark Pro 颜色主题
在这里插入图片描述
页面的效果:
在这里插入图片描述
4.格式化代码(vscode系统自带)

现在格式化代码的插件非常多,比如Prettier等等。

刚开始学,不太建议安装插件,先自己手写规范的语法格式但是html标签嵌套比较多,可能需要自动格式化比较好,

所以我们可以利用vscode自动的功能格式化代码,暂且不用格式化插件,自动保存照样能格式化代码。

(1) 点击管理按钮—选择里面的设置命令

在这里插入图片描述
(2)选择用户 —> 文本编辑器 —> 正在格式化 —> 勾选如下图的2个按钮
在这里插入图片描述
这样,我们不用安装插件,就可以自动保存自动格式化代码了。

4.open in browser 浏览器预览页面

编写完代码,需要浏览器预览,可以安装这个插件
在这里插入图片描述
在这里插入图片描述
6. Live Server 实时预览(推荐)

刚才的插件是可以预览我们的页面,但是改完代码,浏览器必须要重新刷新,比较麻烦,因此推荐各位小伙伴安装 live server 这个插件,修改完代码,自动更新浏览器,爽歪歪~~~

在这里插入图片描述
小技巧:

刚开始学习前端,基本页面很少,可以左边编辑器,右边浏览器,这样编写完毕代码,保存完毕后,浏览器自动更新了。
在这里插入图片描述
注意点:

使用live server 各位小伙伴要注意, 先用vscode 打开 文件所在的目录文件夹哦。

在这里插入图片描述
7. vscode-icons 设置文件图标主题

可以很清楚看到文件对用的图标。

在这里插入图片描述
只是为了看文件更加直观哈

在这里插入图片描述
8. Easy LESS 编译less文件

我们写的less不能直接引入到html文件中, 通过这个插件可以自动帮我们生成 css文件
在这里插入图片描述
8. 会了吧

是的,你没看错,这个插件的名字就是 <会了吧>

你是不是还在为英文单词不认识而发愁,是不是认识不会读而烦心, 这个插件你值得拥有。
在这里插入图片描述
里面会有单词介绍,点击还会有发音,喜欢吧。

在这里插入图片描述
好的,这篇文章,千锋重庆web前端培训班的老师先介绍到这里, 学到vue的同学肯定就安装vetru、eslint 等插件了


http://chatgpt.dhexx.cn/article/s6ZJtM4Q.shtml

相关文章

30个实用VSCode 插件,让你的开发效率倍增!

1. Image preview 通过此插件&#xff0c;当鼠标悬浮在图片的链接上时&#xff0c;可以实时预览该图片&#xff0c;除此之外&#xff0c;还可以看到图片的大小和分辨率。 2. Auto Rename Tag 使用该插件&#xff0c;可以在重命名一个 HTML 标签时&#xff0c;自动重命名 HTML…

VScode神仙插件,程序员必备

前言 Visual Studio Code(VS Code)是微软2015年推出的一个轻量但功能强大的源代码编辑器&#xff0c;基于 Electron 开发&#xff0c;支持 Windows、Linux 和 macOS 操作系统。它内置了对JavaScript&#xff0c;TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持&a…

2023年最新最全 VSCode 插件推荐

Visual Studio Code 是由微软开发的一款免费的、针对于编写现代Web和云应用的跨平台源代码编辑器。它包含了一个丰富的插件市场&#xff0c;提供了很多实用的插件。下面就来分享 2023 年前端必备的 VS Code 插件&#xff01; 前端框架 ES7 React/Redux/React-Native snippets …

VSCode 最全实用插件(VIP典藏版)

目录 前言 一、必备插件 &#x1f33e;Chinese&#xff08;中文&#xff09; &#x1f921;Settings Sync&#xff08;配置同步到云端&#xff09; ​&#x1f308;wakatime&#xff08;编程时间及行为跟踪统计&#xff09; 二、效率神器 ✨HTML Snippets&#xff08;代码提示&…

SaaS行业持续升温,这里有你想了解的SaaS云服务优势

SaaS&#xff08;Software as a Service&#xff09;——软件即服务&#xff0c;是一种软件交付模式。SaaS最大的特色在于软件本身并没有被下载到用户的硬盘&#xff0c;而是存储在提供商的云端或者服务器。对比传统需要花钱购买软件&#xff0c;SaaS只需要用户租用软件&#x…

企业应要求SaaS云服务商提供的三类安全措施

2019独角兽企业重金招聘Python工程师标准>>> 在面临SaaS云服务应用中的安全性问题时&#xff0c;密码管理不当和不安全协议威胁都将会对您的系统保密造成破坏或数据泄露&#xff0c;同时可能需要由您的企业来承担法 律责任。在本文中&#xff0c;我们将探讨SaaS所带…

SaaS-多租户SaaS平台的数据库方案(数据库设计与建模)

2 数据库设计与建模 2.1 数据库设计的三范式 三范式&#xff1a; 第一范式&#xff08;1NF&#xff09;&#xff1a;确保每一列的原子性&#xff08;做到每列不可拆分&#xff09;第二范式&#xff08;2NF&#xff09;&#xff1a;在第一范式的基础上&#xff0c;非主字段必…

删库跑路事件发生,SaaS 云服务如何守护数据安全?

作者 | 蒋敏峰 责编 | Carol 封图 | CSDN付费下载于视觉中国 近日&#xff0c;某SaaS服务商/微盟遭遇员工删库跑路&#xff0c;服务器出现大面积故障&#xff0c;一时间让平台上的几百万家商户生意基本停摆。这一事件发生后&#xff0c;不管是厂商还是平台上的用户&#xff0c;…

SaaS、 PaaS和IaaS,云计算三种服务模式的区别

1. SaaS&#xff1a;Software-as-a-Service&#xff08;软件即服务&#xff09; 提供给客户的服务是运营商运行在云计算基础设施上的应用程序&#xff0c;用户可以在各种设备上通过客户端界面访问&#xff0c;如浏览器。消费者不需要管理或控制任何云计算基础设施&#xff0c;…

云计算的三种服务模式:IaaS、PaaS和SaaS

一、IaaS、PaaS、SaaS简介 基础设施即服务 (IaaS)&#xff1a; Infrastructure as a Service 基础设施即服务有时缩写为 IaaS&#xff0c;包含云 IT 的基本构建块&#xff0c;通常提供对联网功能、计算机&#xff08;虚拟或专用硬件&#xff09;以及数据存储空间的访问。基础…

IaaS、PaaS、SaaS、DaaS——各种云服务模式一览

导读&#xff1a;本文将详细科普云计算的概念、云服务的发展现状&#xff0c;并逐一介绍各种云服务模式&#xff08;IaaS、PaaS、SaaS、DaaS&#xff09;&#xff0c;建议收藏&#xff01; 01 云计算的概念 云是一种服务&#xff0c;可以像使用水、电、煤那样按需使用、灵活付…

SaaS云服务应用的访问安全性分析

2019独角兽企业重金招聘Python工程师标准>>> 越来越多的组织转向了软件即服务&#xff08;SaaS云服务&#xff09;&#xff0c;把它做为解决企业需求的一种方法&#xff0c;而不必承担管理和维护应用的负担。作为SaaS云服务的用户&#xff0c;你必 须得到供应商的保…

把移动和社交融入SaaS云服务

2019独角兽企业重金招聘Python工程师标准>>> 把移动和社交融入SaaS云服务 中小企业呼唤更加简单、实用、灵活并能为员工提供直接价值的新型软件服务&#xff0c;然而仅仅靠将传统软件搬上互联网&#xff0c;远不能满足中小企业信息化需求。管理软件本身必须改变…

IaaS,PaaS,Saas 云服务的介绍

云服务只是一个统称&#xff0c;可以分成三大类。 IaaS&#xff1a;基础设施服务&#xff0c;Infrastructure-as-a-servicePaaS&#xff1a;平台服务&#xff0c;Platform-as-a-serviceSaaS&#xff1a;软件服务&#xff0c;Software-as-a-service 从左到右&#xff0c;自己承担…

删库跑路事件发生,SaaS云服务如何守护数据安全

作者 | 蒋敏峰 责编 | Carol 封图 | CSDN付费下载于视觉中国 近日&#xff0c;某SaaS服务商/微盟遭遇员工删库跑路&#xff0c;服务器出现大面积故障&#xff0c;一时间让平台上的几百万家商户生意基本停摆。这一事件发生后&#xff0c;不管是厂商还是平台上的用户&#xff0c;…

为什么很多企业要自研CRM系统,而不够买SAAS云服务提供的CRM系统或SCRM系统?...

很多企业要自研CRM系统&#xff0c;而不够买SAAS云服务提供的CRM系统或SCRM系统最主要的适用性的问题&#xff0c;标准化的产品与企业个性化需求产生了矛盾导致了很多企业在系统推广使用中产生诸多问题。SAAS云服务提供的CRM系统或SCRM系统都是标准化的产品&#xff0c;在给企业…

瑞云、Bentley、瞰融达成战略合作,共创实景三维建模SaaS云服务新未来

8月25日&#xff0c;深圳市瑞云科技有限公司&#xff08;简称”瑞云”&#xff09;、Bentley软件&#xff08;北京&#xff09;有限公司&#xff08;简称”Bentley软件”&#xff09;、上海瞰融信息技术发展有限公司&#xff08;简称”瞰融”&#xff09;成功签署战略合作协议&…

聚焦低代码SaaS云服务,让企业轻松办公!

我们在发展史中总是在做着选择题,从直立行走,到突破5G;从传统IT咨询到SaaS化服务,一步之遥,又遥若云汉。 一边是封闭的内向管理系统,一边是生态开放的互联互通平台; 一边是固化的传统开发定制,一边是化为绕指柔的灵活配置与迭代; 一边是由内到外的繁杂部署,一边是全…

IaaS PaaS SaaS云服务三种应用模式

前言 本人之前针对IaaS类型云服务的Openstack做出了较长时间的调研&#xff0c;无论是应用层面还是源码级别的层面&#xff0c;过程极其坎坷&#xff0c;而且并没有觉得找到了云计算的核心思想。现在将其分享出来&#xff0c;希望能够与大家共同探讨。 云计算是一种基于互联网、…

IDC中国大型企业SaaS云服务市场:金蝶位居第一

近日&#xff0c;《IDC中国EA SaaS 公有云服务市场跟踪报告&#xff08;2021年上半年&#xff09;》显示&#xff0c;金蝶在大、中、小型企业SaaS ERM&#xff08;企业资源管理云服务&#xff09;市场占有率均斩获第一。这是金蝶自云转型以来首次在大型企业市场摘得桂冠&#x…