VSCode 常用快捷键及插件
# VSCode 常用快捷键及插件
# VSCode 常用快捷键
注意，若快捷键不生效则可能是与电脑自带的快捷键冲突了，修改任意一个即可（搜狗输入法自带的很多快捷键会冲突，如果不知道是哪个应用与现有的快捷键冲突了就直接修改 VSCode 的快捷键）
VSCode (查看)修改自身快捷键方式：File(文件) ==> Preferences(首选项) ==>Keyboard Shortcuts(键盘快捷方式) ==> 双击需要修改的快捷键 ==》 按下键盘上的按钮后回车即可
# 1.注释/取消注释
单行注释：ctrl+/
多行注释： Alt+Shift+A 或 ctrl+shift+/
# 2.移动行
向上移动一行：alt+up
向下移动一行：alt+down
# 3.显示/隐藏左侧目录栏
ctrl + b
# 4.复制当前行
向上复制一行：shift+alt+up
向下复制一行：shift+alt+down
# 5.删除当前行
shift + ctrl + k
# 6.控制台显示隐藏
ctrl + ~
# 7.查找文件
ctrl + p
# 8.代码格式化
shift + alt +f
# 9.新建窗口(再次打开一个 VSCode 进程)
ctrl + shift + n
# 10.行增加缩进
ctrl + ]
# 11.行减少缩进
ctrl + [
# 12.关闭编辑窗口
ctrl + w
# 13.关闭所有窗口
ctrl + k + w
# 14.在当前行下方插入一行
Ctrl+Enter
# 15.在当前行上方插入一行
Ctrl+Shift+Enter
# 16.移动到行首
Home
# 17.移动到行尾
End
# 18.移动到文件开头
Ctrl+Home
# 19.移动到文件结尾
Ctrl+End
# 20.删除光标右侧的所有字
Ctrl+Delete
# 21.同时选中所有匹配
Ctrl+Shift+L
# 22.找到所有的引用
Shift+F12
# 23.跳转到下一个 Error 或 Warning
当有多个错误时可以按 F8 逐个跳转
# 24.查找替换
Ctrl+H
# 25.整个文件夹中查找
Ctrl+Shift+F
# 26.zoomIn/zoomOut(放大/缩小)
Ctrl +/-
# 27.显示 Debug
Ctrl+Shift+D
# 28.全局替换
ctrl + shift + h
# 29.打开最近打开的文件
ctrl + r
# 30.在当前项目的根目录下打开新的 cmd 窗口
ctrl + shift + c
# VSCode 常用插件
注意，插件安装完成之后最好重启 VSCode ，重启之后插件才会生效。
# 1.Chinese(Simplified) Language Pack for Visual Stidio Code 中文汉化包
# 2.open-in-browser 在浏览器中查看(鼠标右键选择可以直接在浏览器中查看当前页面)
# 3.Live Server 实时预览(热更新，静态和动态页面实时刷新)
# 4.Auto Close Tag 自动闭合标签(输入标签名称时自动生成闭合标签)
# 5.Auto Rename Tag 尾部闭合标签同步修改(修改起始标签同步修改闭合标签)
# 6.Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号(对配对的括号进行着色，方便区分)
# 7.Highlight Matching Tag 高亮显示选中匹配标签
# 8.Vscode-icons 文件图标(Windows)
此插件可以帮助我们根据不同的文件类型生成对应的图标，这样我们在侧边栏查看文件列表时就可以直接通过图标区分文件类型。
# 9.Vscode-icons-mac 文件图标(Mac OS)
Mac 系统文件图标，基本和 Vscode-icons类似，采用的是 Mac 风格
# 10.Code Spell Checker 单词拼写检查(自动识别单词拼写错误并给出修改建议)
# 11.Code Runner 运行选中代码段(右键选择 Run Code，通过此插件即可直接运行对应语言的代码)
# 12.Improt Cost 引入依赖成本提示(在导入工具包时提示这个工具包的体积大小)
# 13.GitLens 查看 Git 信息(光标移到代码行上，即可显示当前行最近的 commit 信息和作者)
# 14.Git History 查看 Git 提交历史(查看 git log)
# 15.Vscode-element-helper 自动提示 element 标签名称
# 16.Vetur Vue 语言包
# 17.Dracula Official (德古拉)颜色主题(本人目前使用的一款)
# 18.Prettier - Code formatter 代码格式化
# 19.eslint 代码检测工具
# 20.vue 2 Snippets Vue 代码片段，快速生成 Vue 模板
生成 Vue 模板步骤：Ctrl+Shift+P ==> 选择 Configure User Snippets ==> 选择 Vue.json ==》 在新打开的 Vue.json 文件中编辑，具体示例如下 ===》新建一个.vue 文件，然后输入 vue,点击回车键
Vue.json (prefix 改为 vue，body 修改为希望的内容,具体如下)
{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"wrapper\">$0</div>",
"</template>",
"",
"<script>",
"export default {",
" components: {},",
" props: {},",
" data() {",
" return {};",
" },",
" watch: {},",
" computed: {},",
" created() {},",
" mounted() {},",
" methods: {},",
"};",
"</script>",
"<style lang=\"scss\" scoped>",
".wrapper {",
"}",
"</style>"
],
"description": "A vue file template"
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 21.Debugger for Chrome 在编辑器中打断点，在 Chrome 里调试
# 22.Path Intellisense 智能提示文件夹及文件名的路径
# 23.SVG Viewer 预览 SVG 图片
使用步骤：安装插件后重启 VSCode ,选择一个 svg 图片，鼠标右键选择 SVG Viewer:View SVG，会在右半栏预览 SVG 图片
# 24.vsc-commitizen Git 使用 约定式提交规范(git cz)提交代码插件
# 25.CSS Peek(HTML 中鼠标移到类名上按住 ctrl+单击，会直接跳转到这个类名设置的样式文件及样式位置)
# 参考链接
https://www.cnblogs.com/sexintercourse/p/9521946.html (opens new window)
https://juejin.cn/post/6844904015461875719#heading-5 (opens new window)
https://www.cnblogs.com/showcase/p/10637317.html (opens new window)