vscode前端插件分享——前端编码幸福感提升小技巧

最新推荐文章于 2024-08-22 17:39:32 发布
最新推荐文章于 2024-08-22 17:39:32 发布
阅读量835 收藏
点赞数
文章标签： vscode 前端 ide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61291587/article/details/131906095
版权

vscode前端插件分享

通用插件
1、Path Lntellisense （文件路径自动补全插件）

image.png
在写网页的过程中经常需要引入一些外部文件，这时候写路径就成为一个比较头疼的问题，在安装插件后我们只需要在写路径的时候输入 ./ 这个插件就会对显示当前文件夹下有哪些文件，然后我们选择需要的文件就能完成文件路径的书写
image.png

2、One Dark Pro （颜色主题）

image.png
安装后选择 One Dark Pro 主题
image.png

3、 Material Icon Theme （文件图标主题）

image.png
可以看到这个文件图标主题支持的文件夹还是挺多的，很很轻松地看出每个文件夹存放什么文件
image.png

4、Dyno File Utils （文件操作工具）

image.png
在写网页的过程中经常要创建很多个文件和文件夹，然后需要鼠标点来点去。使用这个插件就能够很快速的帮我们实现上述操作
配置过程
下载安装后，按键盘ctrl +k ctrl+s 打开快捷键设置面板
image.png在输入框中搜索 Dyno File Utils ，将File Utils：New Items的键绑定修改为 ctrl + N
image.png

5.别名路径跳转插件

image.png
使用了这款插件后，将光标悬停在文件路径上，按住ctrl和鼠标左键即可实现文件跳转

前端原生插件
1、Live Server （页面效果预览插件）

作为一个前端的开发者天天要在浏览器和vscode之间来回切换，这时就需要使用一个插件，来帮助我们在浏览器中实时显示最新的页面效果，这个插件的命名就叫 Live Server
image.png
使用教程：
首先我们要在vscode中以文件夹的形式打开项目（图示中我打开的是一个名为 static的文件夹 ），然后点击状态栏右下角的 Go Live 图标
image.png
接着会自动打开浏览器和显示弹窗
弹窗图示如下 它说服务现在运行在5500端口上
image.png
浏览器会自动跳转到 127.0.0.1:5000 这个地址上，并显示出文件夹下 index.html 页面中的内容
image.png

✨✨✨补充内容✨✨✨
1、访问 http://127.0.0.1:5500/ 和访问 http://127.0.0.1:5500/index.html 的效果是相同的.
因为浏览器会自动读取index.html，所以地址栏中默认是不会显示 index.html 。
2、访问 http://localhost:5500/ 和方问 http://127.0.0.1:5500/ 的效果也是相同的
就相当于 使用 https://www.baidu.com/ 和使用 https://220.181.38.149/ 访问百度一样，前者是通过域名访问，后者是通过IP进行访问 更详细的内容请看https://zhuanlan.zhihu.com/p/439510282

2、Highlight Matching Tag （html标签高亮插件）

image.png

当我们页面标签写的比较多的时候，我们可能没办法一眼看出开始标签和结束标签的位置，我们可以点击代码行 然后Highlight Matching Tag会自动在开始标签和结束标签的下方进行划线标记这样我们就能一眼看出来标签的开始和结束了
Highlight Matching Tag .gif

图标代码补全工具

VUE插件
1.Vue Language Features(Volar) vue文件代码高亮 vue语法检查 写vue3使用

image.png
image.png

2.Vue 3 Snippets （vue代码补全）

image.png

3.Vetur （vue2代码补全）

image.png
Vetur插件使用补充内容：
Vetur插件默认开启了语法检查功能。若不想使用此功能可以在设置中搜索 vetur.validation
然后关闭对应的选项，接着重启vscode即可生效
image.png
🚨 Vetur 和 Volar 不能同时使用，否则会出现冲突，写vue2时使用Vetur，写vue3时使用Volar

文件夹中快速打开vscode

寻找Code.exe文件地址

先找到 vsccode 的安装路径 复制Code.exe 的文件地址
image.png

编写code.bat 文件

在桌面上新建一个记事本文件，复制一下所有内容到记事本中

@echo off
start  "" [Code.exe文件地址] .

将 [Code.exe文件地址] 替换为自己的Code.exe地址

# 样例如下
@echo off
start  "" "D:\Users\san\AppData\Local\Programs\Microsoft VS Code\Code.exe" .

完成后将文件另存为
image.png
在保存类型中选择 所有文件
image.png
给文件名添加 .bat 后缀，点击 保存
image.png

复制文件

打开文件夹 C:\Windows
image.png
将刚刚编写好的code.bat文件复制进去
image.png
以后直接在文件夹中的地址栏中输入 code 并按下回车，就会在当前文件夹下打开vscode
code.gif

vscode字体调整

1.下载 JetBrains Mono 字体
网址 https://www.etbrains.com/lp/mono/
image.png

2.安装字体
解压字体压缩包， 打开 \fonts\ttf 文件夹
image.png
全选字体，然后鼠标右键 点击安装
image.png

3.vscode 编辑器中设置字体
打开vscode 设置 然后搜索font family ，并将 JetBrains Mono 添加进去
image.png

4.开启连字模式
搜索 fontLigatures ，点击设置打开 json 文件，然后将值设置为 true
image.png
image.png

vscode开启括号对高亮

在设置中搜索 bracket pairs，然后将值改为 active
image.png
若出现括号对高亮失效的情况，请先打开setting.json 删除所有 含有
字样的配置信息

vscode 常用快捷键

ctrl + E 在当前文件夹下搜索并打开文件 （在各个文件之间快速切换）
ctrl + B 显示/隐藏资源管理理器
ctrl + · 显示/隐藏终端
ctrl+ g 跳转到行
ctrl + ] 增加缩进
ctrl + [ 减小缩进
ctrl + Tab 在活动（已经打开的）编辑器中切换
alt + shift + r 打开文件夹

vscode 用户代码片段

管理 – 配置用户代码片段
新建代码片段主要有两种类型 一种是全局代码片段，另一种是在指定语言生效的代码片段
image.png
代码片段配置样例

{
// 文件名
	"console.log": {
//  简写形式
		"prefix": "clg",
//  代码片段内容
		"body": [
			"console.log(${1:example})"
		],
  // 代码片段描述信息
		"description": "console.log"
	}
}

更详细的配置看一看这篇文章 https://blog.csdn.net/chuohe6087/article/details/100681268

vscode中快速运行 npm 命令

在设置中搜索 npm.enableRunFromFolder 并启用
image.png
然后在资源管理器点击 右上角的更多（三个点）并 勾选npm脚本
image.png
此时就可以在资源管理器中执行 npm 命令了
image.png

vsocode折叠代码

image.png
在需要折叠代码的开头输入#region，在折叠代码的结尾输入#endregion，即可实现代码折叠
编程语言支持如下

  • TypeScript/JavaScript: //#region 和 //#endregion 或 //region 搭配 //endregion
  • C#: #region 和 #endregion
  • C/C++: #pragma region 和 #pragma endregion
  • F#: //#region 和 //#endregion
  • PowerShell: #region 和 #endregion
  • VB: #Region 和 #End Region

vscode emmet缩写配置

emmet缩写语法请看这篇 https://zhuanlan.zhihu.com/p/217864875
https://juejin.cn/post/6844903456197591054#heading-16
emmet缩写推荐打开设置——在 设置 中搜索 emmet 并打开 Trigger Expansion On Tab
image.png
开启后，即使在未西显示补全候选内容的情况下，仍然可以通过按下 Tab 键实现内容补全
示例：
我想输入 class='abc'，但因某些原因未及时补全代码，以至结果如下（代码位于12行处）
image.png
在开启 Trigger Expansion On Tab 后，只需要按下Tab，即可自动完成代码补全
image.png

鼠标指针修改

下载并解压
苹果鼠标指针下载 https://zhutix.com/ico/macos-pointers
image.png
安装
打开指针文件夹 找到 右键安装.inf 文件 然后鼠标右键点击安装
image.png

菜得很ovo
关注
VScode神仙插件，程序员必备
CSDN全栈领域优秀博主，阿里云博客专家，工信部权威认证物联网技术开发工程师，曾30分钟高分通过C语言二级，两天手撸代码完成EasyX飞机大战，靠接软件私活一个月换苹果电脑
01-21 4万+
VScode神仙插件，程序员必备
前端-VScode安装和使用(1)
2401_84447149的博客
04-27 436
安装服务器Liver server。类似于tomcat,可以模拟出tomcat类似效果。安装 vetur。vue开发工具，安装后更方便vue的使用。vue-helper。方便vue操作注意：插件安装完成后需要重启vscode2.2、设置字体大小左边栏 管理-> 设置-> 搜索 “font” -> Font size修改完后ctrl+s保存。2.3、开启完整的Emmet语法支持设置中搜索 Emmet：启用如下选项，必要时重启vs3、创建项目3.1、创建空的文件夹。
分享 VSCode 必备精品插件
最新发布
博客不在多，在于能迎刃而解
08-22 1533
功能：在服务器端打开你的文件，实时显示你修改的代码，支持websocket 消息服务，可以用于调试websocket 客户端；使用：选中行，Ctrl+Shift+p 输入 翻译，键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域。1.自动补全，跳转至样式和变量定义位置，创建 JSX/TSX 的行内样式，预览样式及变量内容，功能：常用于读源码进行标记行，跳转（代码标记快速跳转）功能：智能提示代码，可以预测你将要写的代码进行提示。功能：项目管理插件，当开发多个项目时，可以快速跳转。
前端-VScode安装和使用
qq_46112274的博客
05-28 214
VsCode使用1、前端开发2、VScode使用前的准备2.1、为了方便开发，建议安装如下插件2.2、设置字体大小2.3、开启完整的Emmet语法支持3、创建项目3.1、创建空的文件夹3.2、然后打开vscode，再在vscode里面选择 File -> Open Folder 打开文件夹，这样才可以创建项目。3.3、保存工作区3.4、工作区创建成功3.5、创建文件。3.6、在创建的文件01.html中编写代码，然后右键运行3.7、浏览器输出 1、前端开发 前端工程师“Front-End-Develo
【前端】 Vscode 搭建基础开发环境
weixin_41979605的博客
07-11 9143
是否看见别人家的页面美如画，功能炫酷，效果叼叼，其实前端对于用户交互这一块还真是不错。特别是对于一些后端程序员来说，一直想学习写出亮瞎钛合金狗眼的页面（**_*）只要功夫深，肯定能入门，就让我来带你步入前端的大门吧vscode 本身就是js写的，经过测试，确实更适合前端开发，就如idea对于Java一样一样的推荐windows系统,毕竟windows才是用的人最多的(-,- )|客户说好才是真的直接使用电脑管家搜索vscode,下载安装即可(官网很慢) 默认是英文版本，我们安装中文插件。插件搜索 chine
前端---vscode插件推荐及GIT一些问题操作说明（持续更新）
jsyxiaoba的博客
10-14 2万+
以前都是用sublime，最近开始使用vscode，写一些心得记录一下 先安利一些自己使用的插件 TabNine这个插件，如果电脑配置ok，可以装一下 一些简单的操作 1.代码提交 点击源代码管理 填写此次提交代码的目的说明 拉取代码 推送代码 提交代码 ...
个人前端VScode项目配置
akiller911的博客
05-22 599
其中 prettier.configPath 项，需自己本地新建“.prettierrc.json”文件（存到哪无所谓，配置好路径就好），用记事本打开，插入如下内容将路径改成自己的文件路径。配置iterm命令行工具，按照下面文档中配置。按“ctrl”+“，”组合键，打开设置页。
vscode前端开发工具
07-11
vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具vscode前端开发工具...
前端vscode相关插件安装
07-09
前端vscode相关插件安装
Vscode前端插件分享
SDXYGZH的博客
07-16 1187
Vscode前端插件分享，提高你的工作效率
vs code 前端开发工具
02-10
前端开发工具，
vscode代码自动补全、跳转（离线安装插件） - cpptools-win32.zip
04-30
cpptools-win32.vsix，支持在无法连网的电脑上安装这个插件，使vscode可以自动跳转到变量、函数的声明、定义处，同时支持自动补全。安装完了，重启vscode就可以生效。
非常方便的 VSCode 的 Shader 插件 —— Shader Toy
ShaderJoy 的兴趣技术杂货铺
02-23 1万+
Visual Studio Code - Shader Toy 这个扩展可以在 VSCode 中查看 GLSL 着色器的 WebGL 实时预览，通过提供 “Show GLSL Preview” 命令可以达到类似于访问 shadertoy.com 的效果。 metaballs example 要运行该命令，可以打开 “Command Palette” 并输入“ Shader...
前端开发利器之VSCode
coder_jxd的博客
04-21 2779
小伙伴们大家好，本次和大家聊聊前端开发者最常使用的编辑器——VSCode。阅读本文，前端萌新可以快速上手此工具，前端老手则可以重新审视有无细节遗漏之处。
前端工具——01-VS Code的使用
乐夫天命兮的博客
11-01 2285
文章标题：《第一次使用 VS Code 时你应该知道的一切配置》。本文的最新内容，更新于 2020-06-19。大家完全不用担心这篇文章会过时，因为随着 VS Code 的版本更新和插件更新，本文也会随之更新。本文的最新内容，也会在GitHub上同步更新，欢迎 star。VS Code 软件实在是太酷、太好用了，越来越多的新生代互联网青年正在使用它。
【前端】VS Code 前端环境搭建教程
2301_80955819的博客
05-26 2812
作者主页今天来跟大家分享一下关于在VS Code上搭建前端环境的方法。
vscode插件(个人正在用的)
weixin_68658847的博客
12-30 1万+
vscode插件(个人正在用的)
VSCode Java 代码补全插件
热门推荐
wuyujin1997的博客
05-23 2万+
新装的VSCode写一个Java文件竟然没有代码自动补全，下载了以下插件Java Extension Pack： 插件链接：https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack 安装后即可自动补全代码。
vscode:Web前端——登录、注册界面
06-07
好的，我可以帮你提供一些思路。...以下是一些简单的步骤： ... ... 3.使用CSS美化页面：通过CSS样式，可以...总的来说，实现登录和注册界面需要一些前端技术的知识和经验，建议你参考一些相关的教程和示例，逐步学习和实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值