常用快捷键
删除行: ctrl + shift + k
光标移动到行首/行尾: Fn + RightArrow/LeftArrow
将当前文件在新分组中打开: ctrl + \
聚焦到第一组: ctrl + 1
聚焦到第二组: ctrl + 2
聚焦到第三组: ctrl + 3
在有多个分组的情况下纵向/横向布局切换: shift+alt+0
关闭/展开左侧面板: ctrl + b
关闭/展开右侧面板: ctrl + alt + b
关闭/展开底部面板: ctrl + j
打开搜索面板: ctrl + shift + f
打开文件面板: ctrl + shift + e
关闭当前文件: ctrl + w
将当前文件拆分/取消拆分为左右两个视图显示: ctrl+K ctrl+shift+\ 效果如下
git工具
首选GitLens，但GitLens在内网环境下，好像过段时间就会提示过期，需要重新安装。因此才有了对GitLess的推荐。GitLess是GitLens的v11.7.0版本
GitLess - Visual Studio Marketplace
GitLens — Git supercharged - Visual Studio Marketplace
提交更规范的git message
Commit Message Editor - Visual Studio Marketplace
自定义配置文件
{
"$schema": "https://bendera.github.io/vscode-commit-message-editor/schemas/config-v1.schema.json",
"configVersion": "1",
"staticTemplate": [
"feat: Short description",
"",
"Message body",
"",
"Message footer"
],
"dynamicTemplate": [
"{type}{scope}: {description}",
"",
"{body}",
"",
"{breaking_change}{footer}"
],
"tokens": [
{
"label": "Type",
"name": "type",
"type": "enum",
"combobox": true,
"options": [
{
"label": "✨ feat",
"value": "✨ feat",
"description": "增加/引入新特性/新功能"
},
{
"label": "🚧 construction",
"value": "🚧 construction",
"description": "进行中的工作"
},
{
"label": "👽 alien",
"value": "👽 alien",
"description": "由于外部API变化而更新代码"
},
{
"label": "🐛 bug",
"value": "🐛 bug",
"description": "修复 BUG(特指:测试同事给你提的bug)"
},
{
"label": "💡 docs",
"value": "💡 docs",
"description": "在源代码中添加或更新注释"
},
{
"label": "⚰️ coffin",
"value": "⚰️ coffin",
"description": "删除无效代码"
},
{
"label": "💬 speech-balloon",
"value": "💬 speech-balloon",
"description": "新增或更新文本和文字"
},
{
"label": "🩹 adhesive-bandage",
"value": "🩹 adhesive-bandage",
"description": "简单修复非关键性问题(特指:你自己发现的bug)"
},
{
"label": "♻️ recycle",
"value": "♻️ recycle",
"description": "重构代码"
},
{
"label": "🍱 bento",
"value": "🍱 bento",
"description": "新增或更新资源(如: 图片,字体)"
},
{
"label": "🔥 fire",
"value": "🔥 fire",
"description": "删除代码或文件"
},
{
"label": "🎉 tada",
"value": "🎉 tada",
"description": "初次提交"
},
{
"label": "🚑 ambulance",
"value": "🚑 ambulance",
"description": "紧急热修复"
},
{
"label": "⚗ alembic",
"value": "⚗ alembic",
"description": "试验新功能"
},
{
"label": "💫 animation",
"value": "💫 animation",
"description": "新增或更新动画和过场"
},
{
"label": "⬇️ arrow-down",
"value": "⬇️ arrow-down",
"description": "降级依赖版本"
},
{
"label": "⬆️ arrow-up",
"value": "⬆️ arrow-up",
"description": "升级依赖版本"
},
{
"label": "🎨 art",
"value": "🎨 art",
"description": "改进项目结构/代码格式"
},
{
"label": "🍻 beers",
"value": "🍻 beers",
"description": "醉醺醺的写代码"
},
{
"label": "🔖 bookmark",
"value": "🔖 bookmark",
"description": "标签"
},
{
"label": "💥 boom",
"value": "💥 boom",
"description": "引入重大改变"
},
{
"label": "🏗 building-construction",
"value": "🏗 building-construction",
"description": "进行架构更改"
},
{
"label": "🗃 card-file-box",
"value": "🗃 card-file-box",
"description": "执行与数据库相关的更改"
},
{
"label": "📈 chart-with-upwards-trend",
"value": "📈",
"description": "新增或更新分析或跟踪代码"
},
{
"label": "🚸 children-crossing",
"value": "🚸 children-crossing",
"description": "提高用户体验 / 可用性"
},
{
"label": "🤡 clown-face",
"value": "🤡 clown-face",
"description": "进行 mock 测试"
},
{
"label": "👷 construction-worker",
"value": "👷 construction-worker",
"description": "新增或更新 CI 构建系统"
},
{
"label": "🥚 egg",
"value": "🥚 egg",
"description": "新增或更新一个彩蛋"
},
{
"label": "🌐 globe-with-meridians",
"value": "🌐",
"description": "国际化和本地化"
},
{
"label": "🥅 goal-net",
"value": "🥅 goal-net",
"description": "捕获异常"
},
{
"label": "💚 green-heart",
"value": "💚 green-heart",
"description": "修复 CI 构建"
},
{
"label": "🔨 hammer",
"value": "🔨 hammer",
"description": "新增或更新开发脚本"
},
{
"label": "➖ heavy-minus-sign",
"value": "➖ heavy-minus-sign",
"description": "移除依赖"
},
{
"label": "➕ heavy-plus-sign",
"value": "➕ heavy-plus-sign",
"description": "添加依赖"
},
{
"label": "📱 iphone",
"value": "📱 iphone",
"description": "响应式设计的工作"
},
{
"label": "🏷️ label",
"value": "🏷️ label",
"description": "新增或更新类型"
},
{
"label": "💄 lipstick",
"value": "💄 lipstick",
"description": "新增或更新 UI 样式文件"
},
{
"label": "🔒 lock",
"value": "🔒 lock",
"description": "修复安全问题"
},
{
"label": "🔊 loud-sound",
"value": "🔊 loud-sound",
"description": "新增或更新日志"
},
{
"label": "🔍 mag",
"value": "🔍 mag",
"description": "改善 SEO"
},
{
"label": "📝 memo",
"value": "📝 memo",
"description": "添加或更新文件"
},
{
"label": "🔇 mute",
"value": "🔇 mute",
"description": "删除日志"
},
{
"label": "📦 package",
"value": "📦 package",
"description": "新增或更新已编译的文件或包"
},
{
"label": "📄 page-facing-up",
"value": "📄 page-facing-up",
"description": "新增或更新 License"
},
{
"label": "🛂 passport-control",
"value": "🛂 passport-control",
"description": "编写与授权、角色和权限有关的代码"
},
{
"label": "✏️ pencil2",
"value": "✏️ pencil2",
"description": "修复拼写错误"
},
{
"label": "💩 poop",
"value": "💩 poop",
"description": "写不好的代码，需要改进"
},
{
"label": "📌 pushpin",
"value": "📌 pushpin",
"description": "将依赖设定为指定版本"
},
{
"label": "⏪ rewind",
"value": "⏪ rewind",
"description": "还原修改"
},
{
"label": "🚀 rocket",
"value": "🚀 rocket",
"description": "部署项目"
},
{
"label": "🚨 rotating-light",
"value": "🚨 rotating-light",
"description": "修复编译器 / 链接器警告"
},
{
"label": "🙈 see-no-evil",
"value": "🙈 see-no-evil",
"description": "新增或更新 .gitignore 文件"
},
{
"label": "🚩 triangular-flag-on-post",
"value": "🚩 triangular-flag-on-post",
"description": "添加、更新或删除特性标志"
},
{
"label": "🚚 truck",
"value": "🚚 truck",
"description": "移动或重命名资源"
},
{
"label": "🔀 twisted-rightwards-arrows",
"value": "🔀 twisted-rightwards-arrows",
"description": "合并分支"
},
{
"label": "🗑 wastebasket",
"value": "🗑 wastebasket",
"description": "需要清理的废弃代码"
},
{
"label": "♿️ wheelchair",
"value": "♿️ wheelchair",
"description": "改善无障碍环境"
},
{
"label": "✅ white-check-mark",
"value": "✅ white-check-mark",
"description": "添加、更新或通过测试"
},
{
"label": "🔧 wrench",
"value": "🔧 wrench",
"description": "新增或更新配置文件"
},
{
"label": "⚡️ zap",
"value": "⚡️ zap",
"description": "提高性能"
}
],
"description": "变动类型"
},
{
"label": "Scope",
"name": "scope",
"description": "用一个单词或短语描述本次修改的作用范围(可选).如: feat(api):",
"type": "text",
"multiline": false,
"prefix": "(",
"suffix": ")"
},
{
"label": "Short description",
"name": "description",
"description": "用一行文字简述此次变动.",
"type": "text",
"multiline": false
},
{
"label": "Body",
"name": "body",
"description": "对变动内容进行详细描述(可选)",
"type": "text",
"multiline": true,
"lines": 5,
"maxLines": 10
},
{
"label": "Breaking change",
"name": "breaking_change",
"description": "破坏性变更(可选)",
"type": "boolean",
"value": "BREAKING CHANGE: ",
"default": false
},
{
"label": "Footer",
"name": "footer",
"description": "用于提供额外的元数据或引用问题跟踪器等信息(可选). 如: Issue: #666",
"type": "text",
"multiline": true
}
]
}
快速查看/运行当前项目中的任务(npm script)
Quick Task - Visual Studio Marketplace
更友好的vue组件跳转
Vue Peek - Visual Studio Marketplace
更友好的函数参数提示
Parameter Hints Next - Visual Studio Marketplace
匹配选中的tag
Highlight Matching Tag - Visual Studio Marketplace
更方便的创建/管理你的代码片段
Easy Snippet - Visual Studio Marketplace
更明确的括号匹配
Toggle Bracket Guides - Visual Studio Marketplace
rest 请求客户端
Thunder Client - Visual Studio Marketplace
正则表达式测试
Regex Match - Visual Studio Marketplace
更方便的查看颜色
marketplace.visualstudio.com/items?itemN…
更好的提示与代码跳转
解决VSCode左键点击跳转到目标问题
ctrl+鼠标左键 边会打开一个小窗口(vscode管它叫速览视图)
解决方式：设置里搜索editor.gotoLocation.multipleDefinitions，将peek改成goto即可
快速进入选中文本路径所在文件
Quick Go To Selected File Path - Visual Studio Marketplace
双击文本无法完全选中?
默认情况下hello-world这类变量或文本是无法通过书记文本选中的，只能选中hello, 原因是wordSeparators中，将-定义为了单词分隔符
原始值
`~!@#$%^&*()-=+[{]}\|;:'",.<>/?
改为如下值之后，就能双击选中了
`~!@#$%^&*()=+[{]}\|;:'",.<>/?
快速添加console.log，删除console.log, 注释console.log
Turbo Console Log - Visual Studio Marketplace
不同注释使用不同颜色显示
Better Comments - Visual Studio Marketplace
如果是vue开发还得进行如下设置, 该插件才会在vue文件中生效
打开vscode的插件目录
%USERPROFILE%\.vscode\extensions
在setDelimiter方法的switch语句中添加如下内容，如上图所示
case "vue":
this.setCommentFormat("//", "/*", "*/");
break;
效果
让js项目有更好的类型提示(tsconfig.json + ts + jsdoc方式)
使用 TS 声明文件+JSDoc 对 es 项目提供智能提示 - 掘金 (juejin.cn)
更方便的阅读和理解代码
CodeTour - Visual Studio Marketplace
Line Note Plus - Visual Studio Marketplace
你是否遇到过一个文件有几千行，是否遇到过一个复杂的功能，调用了N个文件中的代码，在来回跳转之间，刚理解完这段代码，就已经忘记上段重要代码在哪个位置? 以至于对代码逻辑没有一个整体的思路。
CodeTour插件可以解决这个问题，你可以就某个功能，形成一个大标记，大标记中插入若干步骤并与重要代码关联起来，然后还能写一些简单的注释（不会添加到源代码中，而是添加到一个独立文件中）
隐藏注释
虽然注释能让我们更快的理解代码意图，但有时候注释也会变成一种阻碍，有没有一种可以隐藏注释，但又不是删除注释的工具
Hide Comments - Visual Studio Marketplace
多个vscode窗口使用不同的颜色区分
Peacock - Visual Studio Marketplace
解决打开文件的时候只显示一个tab的办法
在设置中搜索Editor:Show Tabs
设置成如下截图的样子
