VScode软件入门：用户自定义代码块+常用快捷键+常用扩展插件
VScode软件入门
VScode用户自定义代码块
用户自定义代码块
{
/*
prefix :代码片段名字，即输入此名字就可以调用代码片段。
body :这个是代码段的主体.需要编写的代码放在这里,
$1 :生成代码后光标的初始位置.
$2 :生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....
${1,字符} :生成代码后光标的初始位置(其中1表示光标开始的序号，字符表示生成代码后光标会直接选中字符。)
description :代码段描述,输入名字后编辑器显示的提示信息。
*/
// 换行：\r或者\n tab键制表符： \t
// 前缀部分没有什么好介绍的，唯一值得注意的是，前缀支持 N:1，也即允许多条前缀对应同一条代码片。在使用时，只需将前缀定义为数组即可，数组中的每一个前缀都能对应本代码片。 "prefix": [ "header", "stub", "copyright"],
// 用「Tabstops」可以让编辑器的指针在 snippet 内跳转。使用 $1，$2 等指定光标位置。这些数字指定了光标跳转的顺序。特别地，$0表示最终光标位置。
"Vue": {
"prefix": "vue1", // 对应的是使用这个模板的快捷键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">\n",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t$BLOCK_COMMENT_START IMPORT CSS $BLOCK_COMMENT_END\n",
"</head>\n",
"<body>",
"\t<div id=\"app\">\n\n\t</div>\n",
"\t$BLOCK_COMMENT_START IMPORT JS $BLOCK_COMMENT_END",
"\t<script src=\"../node_modules/vue/dist/vue.js\"></script>",
"\t<script>",
"\t\tlet vm = new Vue({",
"\t\t\tel: '#app',",
"\t\t\tdata: {\n\t\t\t\t$1\n\t\t\t},",
"\t\t\tcreated() {\n\t\t\t\t$2\n\t\t\t},",
"\t\t\tmethods: {\n\t\t\t\t$3\n\t\t\t},",
"\t\t\tfilters: {\n\t\t\t\t$4\n\t\t\t},",
"\t\t\tcomputed: {\n\t\t\t\t$5\n\t\t\t},",
"\t\t\twatch: {\n\t\t\t\t$6\n\t\t\t},",
"\t\t\tcomponents: {\n\t\t\t\t$7\n\t\t\t},",
"\t\t});",
"\t</script>",
"</body>\n",
"<html>"
],
"description": "vue模板1" // 模板的描述
}
}
VScode快捷键
全局
Ctrl + Shift + P, F1 显示命令面板
Ctrl + P 快速打开
Ctrl + Shift + N 打开新窗口
Ctrl + Shift + W 关闭窗口
基本
Ctrl + X 剪切（未选中文本的情况下，剪切光标所在行）
Ctrl + C 复制（未选中文本的情况下，复制光标所在行）
Alt + Up 向上移动行
Alt + Down 向下移动行
Shift + Alt + Up 向上复制行
Shift + Alt + Down 向下复制行
Ctrl + Shift + K 删除行
Ctrl + Enter 下一行插入
Ctrl + Shift + Enter 上一行插入
Ctrl + Shift + \ 跳转到匹配的括号
Ctrl + ] 增加缩进
Ctrl + [ 减少缩进
Home 跳转至行首
End 跳转到行尾
Ctrl + Home 跳转至文件开头
Ctrl + End 跳转至文件结尾
Ctrl + Up 按行向上滚动
Ctrl + Down 按行向下滚动
Alt + PgUp 按屏向上滚动
Alt + PgDown 按屏向下滚动
Ctrl + Shift + [ 折叠代码块
Ctrl + Shift + ] 展开代码块
Ctrl + K Ctrl + [ 折叠全部子代码块
Ctrl + K Ctrl + ] 展开全部子代码块
Ctrl + K Ctrl + 0 折叠全部代码块
Ctrl + K Ctrl + J 展开全部代码块
Ctrl + K Ctrl + C 添加行注释
Ctrl + K Ctrl + U 移除行注释
Ctrl + / 添加、移除行注释
Shift + Alt + A 添加、移除块注释
Alt + Z 自动换行、取消自动换行
多光标与选择
Alt + 点击 插入多个光标
Ctrl + Alt + Up 向上插入光标
Ctrl + Alt + Down 向下插入光标
Ctrl + U 撤销上一个光标操作
Shift + Alt + I 在所选行的行尾插入光标
Ctrl + I 选中当前行
Ctrl + Shift + L 选中所有与当前选中内容相同部分
Ctrl + F2 选中所有与当前选中单词相同的单词
Shift + Alt + Left 折叠选中
Shift + Alt + Right 展开选中
Shift + Alt + 拖动鼠标 选中代码块
Ctrl + Shift + Alt + Up 列选择 向上
Ctrl + Shift + Alt + Down 列选择 向下
Ctrl + Shift + Alt + Left 列选择 向左
Ctrl + Shift + Alt + Right 列选择 向右
Ctrl + Shift + Alt + PgUp 列选择 向上翻页
Ctrl + Shift + Alt + PgDown 列选择 向下翻页
查找替换
Ctrl + F 查找
Ctrl + H 替换
F3 查找下一个
Shift + F3 查找上一个
Alt + Enter 选中所有匹配项
Ctrl + D 向下选中相同内容
Ctrl + K Ctrl + D 移除前一个向下选中相同内容
Alt + C 区分大小写
Alt + R 正则
Alt + W 完整匹配
进阶
Ctrl + Space 打开建议
Ctrl + Shift + Space 参数提示
Tab Emmet插件缩写补全
Shift + Alt + F 格式化
Ctrl + K Ctrl + F 格式化选中内容
F12 跳转到声明位置
Alt + F12 查看具体声明内容
Ctrl + K F12 分屏查看具体声明内容
Ctrl + . 快速修复
Shift + F12 显示引用
F2 重命名符号
Ctrl + Shift + . 替换为上一个值
Ctrl + Shift + , 替换为下一个值
Ctrl + K Ctrl + X 删除行尾多余空格
Ctrl + K M 更改文件语言
导航
Ctrl + T 显示所有符号
Ctrl + G 跳转至某行
Ctrl + P 跳转到某个文件
Ctrl + Shift + O 跳转到某个符号
Ctrl + Shift + M 打开问题面板
F8 下一个错误或警告位置
Shift + F8 上一个错误或警告位置
Ctrl + Shift + Tab 编辑器历史记录
Alt + Left 后退
Alt + Right 前进
Ctrl + M 切换焦点
编辑器管理
Ctrl + F4, Ctrl + W 关闭编辑器
Ctrl + K F 关闭文件夹
Ctrl + \ 编辑器分屏
Ctrl + 1 切换到第一分组
Ctrl + 2 切换到第二分组
Ctrl + 3 切换到第三分组
Ctrl + K Ctrl + Left 切换到上一分组
Ctrl + K Ctrl + Right 切换到下一分组
Ctrl + Shift + PgUp 左移编辑器
Ctrl + Shift + PgDown 右移编辑器
Ctrl + K Left **左侧编辑组
Ctrl + K Right **右侧编辑组
文件管理
Ctrl + N 新建文件
Ctrl + O 打开文件
Ctrl + S 保存
Ctrl + Shift + S 另存为
Ctrl + K S 全部保存
Ctrl + F4 关闭
Ctrl + K Ctrl + W 全部关闭
Ctrl + Shift + T 重新打开被关闭的编辑器
Ctrl + K Enter 保持打开
Ctrl + Tab 打开下一个
Ctrl + Shift + Tab 打开上一个
Ctrl + K P 复制当前文件路径
Ctrl + K R 在资源管理器中查看当前文件
Ctrl + K O 新窗口打开当前文件
显示
F11 全屏、退出全屏
Shift + Alt + 1 切换编辑器分屏方式（横、竖）
Ctrl + + 放大
Ctrl + - 缩小
Ctrl + B 显示、隐藏侧边栏
Ctrl + Shift + E 显示资源管理器 或 切换焦点
Ctrl + Shift + F 显示搜索框
Ctrl + Shift + G 显示Git面板
Ctrl + Shift + D 显示调试面板
Ctrl + Shift + X 显示插件面板
Ctrl + Shift + H 全局搜索替换
Ctrl + Shift + J 显示、隐藏高级搜索
Ctrl + Shift + C 打开新命令提示符窗口
Ctrl + Shift + U 显示输出面板
Ctrl + Shift + V 显示、隐藏 Markdown预览窗口
Ctrl + K V 分屏显示 Markdown预览窗口
调试
F9 设置 或 取消断点
F5 开始 或 继续
F11 进入
Shift + F11 跳出
F10 跳过
Ctrl + K Ctrl + I 显示悬停信息
集成终端
Ctrl + 显示命令提示符窗口 Ctrl + Shift + 新建命令提示符窗口
Ctrl + Shift + C 复制所选内容
Ctrl + Shift + V 粘贴所选内容
Ctrl + Up 向上滚动
Ctrl + Down 向下滚动
Shift + PgUp 向上翻页
Shift + PgDown 向下翻页
Ctrl + Home 滚动到顶部
Ctrl + End 滚动到底部
常用快捷键
依次找出文中所有的当前选中的单词: Ctrl + D
反向缩进：shift+tab
重命名变量: 选中变量名后按F2
转到变量名的定义处: 选中变量名后按F12
同时选择多个单词: Alt + Click
同时选择上一行 (Ctrl + Alt + Up) 或者下一行 (Ctrl + Alt + Down) 的相同位置：
依次找出文中所有的当前选中的单词: Ctrl + D
一次性找出文所有的当前选中的单词: Ctrl + Shift + L
拓展性 (Shift + Alt + Right) 或者收缩性 (Shift + Alt + Left) 的选中文本
矩形框的鼠标选择: 同时按住Shit和Alt并使用鼠标进行拖拽选择
切换编程语言语法: Ctrl + K M
在上方复制一行Shift + Alt + Up，在下方复制一行Shift + Alt + Down
Ctrl + G 跳转至某行
- Ctrl + P ：转到文件，您可以在 Visual Studio Code 中移动到打开的文件/文件夹的任何文件。
- Ctrl + ` ：在 VS Code 中打开 terminal
- Alt + Down：下移一行
- Alt + Up：上移一行
- Ctrl + D：将选定的字符移动到下一个匹配字符串上
- Ctrl + Space：触发建议
- Shift + Alt + Down：向下复制行
- Shift + Alt + Up：向上复制行
- Ctrl + Shift + T：重新打开最新关闭的窗口
- Shift + Alt + 配合鼠标一起使用： 选中一大串代码多行进行编辑
html文件快速创建html结构
- div*4>img[src="./img/banner$.jpg"]
<div><img src="./img/banner1.jpg" alt=""></div>
<div><img src="./img/banner2.jpg" alt=""></div>
<div><img src="./img/banner3.jpg" alt=""></div>
<div><img src="./img/banner4.jpg" alt=""></div>
谷歌快捷键
F11 全屏
ctrl+ -/+ 缩小 放大
ctrl+f 查找
vscode扩展插件
Auto Close Tag：
Auto Rename Tag
Beautify
格式化javascript，JSON，CSS，Sass，和HTML
Bracket Pair Colorizer
Chinese
Code Runner
非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：>
点击这个按钮就可以运行你的文件了（必备）
Code Spell Checker
一个基本的拼写检查器，可以很好地与camelCase代码一起使用。
此拼写检查器的目的是帮助捕获常见的拼写错误，同时保持较低的误报率。
css peek
能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义（必备）
使用方法：将光标放在class里面的属性，右击
Easy LESS
在Visual Studio Code中轻松处理LESS文件。
LESS样式表的 “保存时编译”，而无需使用构建任务。
- 创建一个
.less文件。 - 点击Ctrl / Cmd + S保存文件。
- 甲
.css文件自动生成。 - 您应该在状态栏中看到一个临时的“在_X_毫秒内编译较少”消息。
注意：也可以从命令选项板中将其作为“将LESS编译为CSS”。
Document This
添加注释块
设置：
"docthis.includeAuthorTag": true,//出现@Author
"docthis.includeDescriptionTag": true,//出现@Description
"docthis.authorName": "shenzekun",//作者名字
快捷键： 按两次Ctrl+alt+d
ESLint
EsLint可以帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。> ESLint最初是由Nicholas C. Zakas于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
因此，ESLint就是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
HTML CSS Support
在 html 标签上写class 智能提示当前项目所支持的样式（必备）
Live Server
启动具有实时重新加载功能的本地开发服务器，以处理静态和动态页面。
启动/停止服务器的快捷方式
[注意：如果工作空间中没有文件.html或.htm文件，则必须按照方法4和5来启动服务器。
- 打开一个项目，然后
Go Live从状态栏中单击以打开/关闭服务器。
- 右键单击
HTML资源管理器窗口中的文件，然后单击Open with Live Server。 。
- 打开一个HTML文件，右键单击编辑器，然后单击
Open with Live Server。
- 单击“
(alt+L, alt+O)打开服务器”并(alt+L, alt+C)停止服务器（您可以更改快捷方式窗体的键盘绑定）。[在MAC上，cmd+L, cmd+O和cmd+L, cmd+C]
- 通过按
F1或打开命令面板，ctrl+shift+P然后键入Live Server: Open With Live Server以启动服务器或键入Live Server: Stop Live Server以停止服务器。
open in browser
当前的 html 文件用浏览器打开，类似 webstorm 的那四个小浏览器图标功能，前提条件html 文件必须保存
快捷键alt+b
Power Mode
打字鼠标效果
Terminal
在命令面板（Ctrl+Shift+P）搜索用户配置，在用户配置文件中，找到Run Code configuration下的code-runner.runInTerminal的值改为true，就好了。
vscode-icons
react
React-Native/React/Redux snippets for es6/es7
react-beautify
格式化 javascript, JSX, typescript, TSX 文件
vue
vetur
VueHelper
Vue TypeScript Snippets
Vue 2 Snippets
主题
One Dark Pro
Horla Light Theme
vscode的七彩灯光主题
常用的扩展插件
- vetur,Vue 2 Snippets,vue peek 适合vue开发者使用，其他扩展插件前端开发都可