vscode前端插件分享
通用插件
1、Path Lntellisense (文件路径自动补全插件)
在写网页的过程中经常需要引入一些外部文件,这时候写路径就成为一个比较头疼的问题,在安装插件后我们只需要在写路径的时候输入 ./ 这个插件就会对显示当前文件夹下有哪些文件,然后我们选择需要的文件就能完成文件路径的书写
2、One Dark Pro (颜色主题)
安装后选择 One Dark Pro 主题
3、 Material Icon Theme (文件图标主题)
可以看到这个文件图标主题支持的文件夹还是挺多的,很很轻松地看出每个文件夹存放什么文件
4、Dyno File Utils (文件操作工具)
在写网页的过程中经常要创建很多个文件和文件夹,然后需要鼠标点来点去。使用这个插件就能够很快速的帮我们实现上述操作
配置过程
下载安装后,按键盘ctrl +k ctrl+s 打开快捷键设置面板
在输入框中搜索 Dyno File Utils ,将File Utils:New Items的键绑定修改为 ctrl + N
5.别名路径跳转插件
使用了这款插件后,将光标悬停在文件路径上,按住ctrl和鼠标左键即可实现文件跳转
前端原生插件
1、Live Server (页面效果预览插件)
作为一个前端的开发者天天要在浏览器和vscode之间来回切换,这时就需要使用一个插件,来帮助我们在浏览器中实时显示最新的页面效果,这个插件的命名就叫 Live Server
使用教程:
首先我们要在vscode中以文件夹的形式打开项目(图示中我打开的是一个名为 static的文件夹 ),然后点击状态栏右下角的 Go Live 图标
接着会自动打开浏览器和显示弹窗
弹窗图示如下 它说服务现在运行在5500端口上
浏览器会自动跳转到 127.0.0.1:5000 这个地址上,并显示出文件夹下 index.html 页面中的内容
✨✨✨补充内容✨✨✨
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标签高亮插件)
当我们页面标签写的比较多的时候,我们可能没办法一眼看出开始标签和结束标签的位置,我们可以点击代码行 然后Highlight Matching Tag会自动在开始标签和结束标签的下方进行划线标记这样我们就能一眼看出来标签的开始和结束了
图标代码补全工具
VUE插件
1.Vue Language Features(Volar) vue文件代码高亮 vue语法检查 写vue3使用
2.Vue 3 Snippets (vue代码补全)
3.Vetur (vue2代码补全)
Vetur插件使用补充内容:
Vetur插件默认开启了语法检查功能。若不想使用此功能可以在设置中搜索 vetur.validation
然后关闭对应的选项,接着重启vscode即可生效
🚨 Vetur 和 Volar 不能同时使用,否则会出现冲突,写vue2时使用Vetur,写vue3时使用Volar
文件夹中快速打开vscode
寻找Code.exe文件地址
先找到 vsccode 的安装路径 复制Code.exe 的文件地址
编写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" .
完成后将文件另存为
在保存类型中选择 所有文件
给文件名添加 .bat 后缀,点击 保存
复制文件
打开文件夹 C:\Windows
将刚刚编写好的code.bat文件复制进去
以后直接在文件夹中的地址栏中输入 code 并按下回车,就会在当前文件夹下打开vscode
vscode字体调整
1.下载 JetBrains Mono 字体
网址 https://www.etbrains.com/lp/mono/
2.安装字体
解压字体压缩包, 打开 \fonts\ttf 文件夹
全选字体,然后鼠标右键 点击安装
3.vscode 编辑器中设置字体
打开vscode 设置 然后搜索font family ,并将 JetBrains Mono 添加进去
4.开启连字模式
搜索 fontLigatures ,点击设置打开 json 文件,然后将值设置为 true
vscode开启括号对高亮
在设置中搜索 bracket pairs,然后将值改为 active
若出现括号对高亮失效的情况,请先打开setting.json 删除所有 含有
字样的配置信息
vscode 常用快捷键
ctrl + E 在当前文件夹下搜索并打开文件 (在各个文件之间快速切换)
ctrl + B 显示/隐藏资源管理理器
ctrl + · 显示/隐藏终端
ctrl+ g 跳转到行
ctrl + ] 增加缩进
ctrl + [ 减小缩进
ctrl + Tab 在活动(已经打开的)编辑器中切换
alt + shift + r 打开文件夹
vscode 用户代码片段
管理 – 配置用户代码片段
新建代码片段主要有两种类型 一种是全局代码片段,另一种是在指定语言生效的代码片段
代码片段配置样例
{
// 文件名
"console.log": {
// 简写形式
"prefix": "clg",
// 代码片段内容
"body": [
"console.log(${1:example})"
],
// 代码片段描述信息
"description": "console.log"
}
}
更详细的配置看一看这篇文章 https://blog.csdn.net/chuohe6087/article/details/100681268
vscode中快速运行 npm 命令
在设置中搜索 npm.enableRunFromFolder 并启用
然后在资源管理器点击 右上角的更多(三个点)并 勾选npm脚本
此时就可以在资源管理器中执行 npm 命令了
vsocode折叠代码
在需要折叠代码的开头输入#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
开启后,即使在未西显示补全候选内容的情况下,仍然可以通过按下 Tab 键实现内容补全
示例:
我想输入 class='abc'
,但因某些原因未及时补全代码,以至结果如下(代码位于12行处)
在开启 Trigger Expansion On Tab 后,只需要按下Tab,即可自动完成代码补全
鼠标指针修改
下载并解压
苹果鼠标指针下载 https://zhutix.com/ico/macos-pointers
安装
打开指针文件夹 找到 右键安装.inf 文件 然后鼠标右键点击安装