前端VSCode常用插件

devtools/2025/2/7 13:55:12/

一、VSCode常用的插件

vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷。 注意,新手学习期间,不建议安装形形色色的插件,用到啥就安装啥。几个常用的插件。

  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   编译less文件
  9. 会了吧   学习单词插件 (可以使用)

1.Chinese (Simplified) 

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

2.Auto Rename Tag 

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

3.One Dark Pro   颜色主题 

我比较喜欢的一个颜色主题

页面的效果:

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

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

刚开始学,不太建议安装插件,先自己手写规范的语法格式

但是html标签嵌套比较多,可能需要自动格式化比较好,所以我们可以利用vscode自动的功能格式化代码,暂且不用格式化插件,自动保存照样能格式化代码。

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

(2)选择用户 --->  文本编辑器  --->  正在格式化  --->  勾选如下图的2个按钮

这样,我们不用安装插件,就可以自动保存自动格式化代码了。

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

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

6. Live Server   实时预览(推荐) 

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

小技巧:

刚开始学习前端,基本页面很少,可以左边编辑器,右边浏览器,这样编写完毕代码,保存完毕后,浏览器自动更新了。

注意点:

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

7. vscode-icons   设置文件图标主题 

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

只是为了看文件更加直观哈

8. Easy LESS   编译less文件

我们写的less不能直接引入到html文件中, 通过这个插件可以自动帮我们生成 css文件

9. 会了吧 

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

你是不是还在为英文单词不认识而发愁,是不是认识不会读而烦心, 这个插件你值得拥有。

里面会有单词介绍,点击还会有发音,喜欢吧。

好的,这篇文章,先介绍到这里。


http://www.ppmy.cn/devtools/156827.html

相关文章

工作流项目BPMN.JS_Question梳理

工作流项目 想了解如果候选人熟悉工作流技术、bpmn.js和Flowable工作流引擎,面试官会对哪些信息感兴趣。我需要分析这个问题,并给出一个全面而结构化的回答。 首先,用户可能希望了解作为前端面试官,应该关注候选人哪些方面的知识和…

谷歌的最新 AI 模型发布,Gemini 迎来“思考”能力!

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

kubernetes 核心技术-集群安全机制 RBAC

随着 Kubernetes 在企业级应用中的广泛采用,确保集群的安全性变得至关重要。Kubernetes 提供了多种安全机制来保护集群及其资源免受未授权访问和潜在威胁的影响。其中,基于角色的访问控制(Role-Based Access Control, 简称 RBAC)是…

iOS UI开发

UIView: 生命周期: UITabBar: UINavigationController: UIWindow: UIWindow作为容器是一个基础画面 storyboard会自动给我们创建一个UIWindow 自己创建一个呢: 更改一下看区别 代理: 代理方法…

【Day32 LeetCode】动态规划DP Ⅴ 完全背包

一、动态规划DP Ⅴ 完全背包 1、完全背包理论 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i],得到的价值是value[i] 。每件物品都有无限个(也就是可以放入背包多次),求解将哪些物品装入背包里物品价值总和…

文件读写操作

写入文本文件 #include <iostream> #include <fstream>//ofstream类需要包含的头文件 using namespace std;void test01() {//1、包含头文件 fstream//2、创建流对象ofstream fout;/*3、指定打开方式&#xff1a;1.ios::out、ios::trunc 清除文件内容后打开2.ios:…

Axure PR 9 动效 设计交互

大家好&#xff0c;我是大明同学。 这期内容&#xff0c;我们来用Axure制作一组动效。 动效 创建动效元件 1.打开一个新的 RP 文件并在画布上打开 Page 1。 2.选中画布&#xff0c;将画布填充颜色设置为蓝色(#0052D9)。 3.在元件库中拖出一个圆形元件&#xff0c;选中矩形元件&…

DS图(中)(19)

文章目录 前言一、图的遍历广度优先遍历深度优先遍历 二、最小生成树Kruskal算法Prim算法两种方法对比 总结 前言 承上启下&#xff0c;我们来学习下图的中篇&#xff01;&#xff01;&#xff01; 一、图的遍历 图的遍历指的是遍历图中的顶点&#xff0c;主要有 广度优先遍历 …