前端工程师都在用的 VSCode 常用插件

news2024/11/18 3:30:02

文章目录

  • 前言
  • 一、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文件
    • 8. 会了吧 (软件名就叫这个)


前言

本篇文章先介绍下常见的插件,如果本文对你有所帮助请三连支持博主,你的支持是我更新的动力。


提示:以下是本篇文章正文内容

一、VSCode常用的插件

vscode之所以被称为宇宙第一神器(虽然我喜欢用HBuilder X),其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷。 注意,新手学习期间,不建议安装t太多的插件,用到啥就安装啥。因为有些插件会到vue学习的时候引起冲突,所以这里就介绍几个常用的插件。

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 这个插件,修改完代码,自动更新浏览器,真不错!
在这里插入图片描述


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

可以很清楚看到文件对用的图标
在这里插入图片描述
文件都很直观,不用再去看后缀了
在这里插入图片描述


8. Easy LESS 编译less文件

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


8. 会了吧 (软件名就叫这个)

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409647.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue用户管理(增删改查)功能详情

1、最终实现效果&#xff1a; Users.vue: <template><div><!--面包屑导航区域--><el-breadcrumb separator-class"el-icon-arrow-right"><el-breadcrumb-item :to"{ path: /home }">首页</el-breadcrumb-item><el…

Ant Design Vue文件上传详解

ant design 基于vue的文件上传 (XSLX文件篇) Upload 上传 template <a-uploadname"multipartFile":multiple"false":action"action"methods"post"change"uploadFile":file-list"fileList":disabled"di…

Emmet语法总结

1 Emmet简介 Emmet是一个Web开发工具&#xff0c;用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外&#xff0c;截至2022年&#xff0c;主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具&#xff0c;无需手动…

Element-Plus el-col、el-row快速布局

文章目录前言一、el-colspanpush & pull响应式offset二、el-rowgutterjustifyalign总结前言 拖拉了一晚, 总结了一些Layout布局工具的使用方法. 一、el-col 本来打算先说row的… 写完看了一遍感觉还是换过来的好(捂脸). el-col是el-row的子元素. 在el-row添加 style&qu…

学会在Vue项目中插入高德地图JS API与地图的相关设置,看这一篇就够了~(保姆级精简教学)

高德地图API官网&#xff1a;高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的&#xff0c;所以针对地图 JavaScript API 结合 Vue 展开介绍。 目录 一、案例效果 二、开发准备 1. 注册高德开放平台账号 2. 创建应用添加 key 值 三、项目中使用地图组件…

Echart地图组件的使用

1、基本应用&#xff08;中国地图世界地图&#xff09; ​ echarts中想要使用地图首先需要准备地图对应的js文件&#xff0c;js文件可以到github上克隆下来&#xff0c;地址为&#xff1a; https://github.com/Luna829/incubator-echarts &#xff0c;地图的js文件存放在 map/…

vue2实现可拖拽甘特图(结合element-ui的gantt图)

一、前言 接到公司需求&#xff0c;要做一个可拖拽的甘特图来实现排期需求&#xff0c;官方的插件要付费还没有中文的官方文档可以看&#xff0c;就去找了各种开源的demo来看&#xff0c;功能上都不是很齐全&#xff0c;于是总结了很多demo&#xff0c;合在一起组成了一版较为完…

【前端工程化】配置package.json中scripts命令脚本,新手必学

每日鸡汤&#xff1a;你总要努力追上那个曾经被赋予众望的自己吧 目录 前言 一、运行npm run 命令之后会干啥&#xff1f; 1. scripts里面写啥 2. node_modules/.bin 二进制可执行文件 二、运行插件配置 1. 运行某个npm包的命令 2. 多个命令一起运行 总结 前言 配置pac…

JavaScript工具库——Lodash.js介绍安装及使用

前言&#xff1a; 本文主要介绍-JavaScript工具库——Lodash.js介绍安装及使用&#xff01; 作为初入职场、或者对 JavaScript 很多原理掌握的还不是那么透彻的时候&#xff0c;Lodash 这个工具库绝对是一把“杀手锏”&#xff0c;让我们一起来看看这把 “杀手锏” 的厉害之处。…

【前端八股文】浏览器系列:性能优化——HTML、CSS、JS、渲染优化

文章目录HTMLCSSCSS加载会造成阻塞吗JavaScript渲染优化参考本系列目录&#xff1a;【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 性能优化&#xff0c;从以下几个方…

学前端没这些工具怎么行

目录 前端工具 1.编译软件 2.网上编辑软件 3.参考文档 4.扩展 5.学习软件 6.优秀的教育机构 7.转化工具 8.记录笔记程序 ☀️作者简介&#xff1a;大家好我是言不及行yyds &#x1f40b;个人主页&#xff1a;言不及行yyds的CSDN博客 &#x1f381;系列专栏&#xff1a;…

前端vue3项目中百度地图的使用api及实例

目录 一、使用百度地图的准备工作&#xff1f; 二、百度地图的简单Demo 三、百度地图的常用api有哪些&#xff1f; 1、百度地图的类型&#xff1f; 2、百度地图控件 一、使用百度地图的准备工作&#xff1f; 1、先注册百度账号 --> 申请成为百度开发者 --> 获取服务…

React--》状态管理工具—Mobx的讲解与使用

目录 Mobx的讲解与使用 Mobx环境配置 Mobx的基本使用 Mobx计算属性的使用 Mobx监听属性的使用 Mobx处理异步的使用 Mobx的模块化 Mobx的讲解与使用 Mobx是一个可以和React良好配合的集中状态管理工具&#xff0c;mobx和react的关系相当于vuex和vue之间的关系&#xff0…

IntelliJ IDEA【前端必备插件】

有志者事竟成&#xff0c;破釜沉舟百二秦关终属楚苦心人天不负&#xff0c;卧薪尝胆三千越甲可吞吴。 &#x1f4cc;博主介绍 &#x1f492;首页:水香木鱼 &#x1f6eb;专栏&#xff1a;工欲善其事必先利其器 ✍简介: 博主姓&#xff1a;陈&#xff0c;名&#xff1a;春波。…

前端开发神器VS Code安装教程

✅作者简介&#xff1a;CSDN一位小博主&#xff0c;正在学习前端 &#x1f4c3;个人主页&#xff1a;白月光777的CSDN博客 &#x1f4ac;个人格言&#xff1a;但行好事&#xff0c;莫问前程 安装VS CodeVS Code简介VS Code安装VS Code汉化结束语&#x1f4a1;&#x1f4a1;&…

webpack热更新原理-连阿珍都看懂了

前言 在旧开发的时代&#xff0c;前端项目在开发的过程中修改代码&#xff0c;很有可能是手动切到浏览器刷新页面来看到改动效果。操作不方便且页面之前的编辑记录也都丢失&#xff0c;体验可以说为0。想象一下一个表达你努力填满了所有输入项&#xff0c;结果因为调了一下样式…

vue3.0全新文档快速上手学习内容整理

目录 ## 1.Vue3简介 ## 2.Vue3带来了什么 ### 1.性能的提升 ### 2.源码的升级 ### 4.新的特性 1. Composition API&#xff08;组合API&#xff09; 2. 新的内置组件 3. 其他改变 # 一、创建Vue3.0工程 ## 1.使用 vue-cli 创建 ## 2.使用 vite 创建 # 二、常用 Com…

vue3导出表格excel(支持多sheet页),并自定义导出样式

前期准备 npm install file-saver npm install xlsx npm install xlsx-js-style 先说一说这里为什么选择用xlsx-js-style插件设置导出excel的样式。因项目需要&#xff0c;我在网上找了很多关于导出excel自定义样式的文章&#xff0c;用的最多最普遍的插件就是xlsx-style&#…

unipush2.0教程

解释一下名词 透传消息&#xff1a;无论手机app&#xff0c;是否在运行(打开了)&#xff0c;还是清了后台&#xff08;关闭&#xff09;&#xff0c;都可以收到消息 通知消息&#xff1a;只能app打开了&#xff0c;才能收到 1.开通unipush 2.点击上图的unipush2.0下面的配置&am…

【VSCode】调试器debugger详细使用手册

Visual Studio Code 的主要功能之一是其出色的调试支持。VS Code 的内置调试器有助于加速您的编辑、编译和调试循环。 调试器扩展 VS Code 具有对Node.js运行时的内置调试支持&#xff0c;并且可以调试 JavaScript、TypeScript 或任何其他转换为 JavaScript 的语言。 开始调…