Visual Studio Code插件 & 技巧
2021-05-28 本文已影响0人
AC编程
一、Live Server
为了方便运行html代码，我们可以在vscode里安装Live Server插件，安装步骤如下：
安装Live Server插件
用Live Server插件运行index.html
index.html运行效果如下：
index.html运行效果
二、Auto Rename Tag
Auto Rename Tag
修改标签的左半部分，右边标签会自动修改
button标签
修改成a标签
三、Vetur
Vetur能快速生成Vue模板代码
Vetur插件
vue
快速生成Vue模板代码
四、设置显示语言
打开vsocode,按F1键，在命令窗口中输入config,在下拉框选项中选择Configure Display Language
Configure Display Language
选择需要显示的语言，或安装需要的语言包
选择需要显示的语言
五、vscode-icons
vscode-icons插件的作用是在vcode里显示文件图标
未安装插件前的效果
未安装插件前的效果
安装插件
安装插件
安装插件后的效果
安装插件后的效果
图标3表示css3，图标5表示html5
六、Emmet
Emmet插件，用于生成html代码片段，vscode安装完后，已经内置了该插件，不需要额外安装。在html文件中输入感叹号!，选择感叹号选项，就能快速生产html模板代码
输入感叹号
快速生成html模板代码
6.1 快速生成n个元素
h1*6{这是一级标题}
快捷方式
快速生成6个h1元素
6.2 快速生成h1~h6
h$*6>{这是$级标题}
快捷方式
快速生成h1~h6
6.3 lorem生成乱数假文
lorem
快捷方式
lorem生成乱数假文
lorem后面加数字，表示生成多少个单词
lorem10
快捷方式
生成10个乱数假文单词
6.4 快速生成n个乱数假文
p*6>lorem
快捷方式
快速生成6个乱数假文
浏览器显示效果
七、查找文件
快捷键
Ctrl + p
在搜索框中输入要查找的文件名
在搜索框中输入要查找的文件名
八、Markdown Preview Enhanced
未安装该插件前，用vscode自带的Markdown预览功能
vscode自带的Markdown预览功能
vscode自带的Markdown预览效果
安装Markdown Preview Enhanced插件
安装插件
用插件预览
用插件预览
用Markdown Preview Enhanced后，可以支持Markdown 更多的语法，如目录语法[toc]
用插件预览效果
九、快速生成标签对
输入标签名，按 Tab 键，即可快速生成标签对
输入button
按Tab后生成button标签对
十、快速生成注释
生成注释的快捷键
Ctrl + ?
html快速生成注释
js快速生成注释
css快速生成注释
十一、光标快速到下一行
快捷键
Ctrl + Enter
无论光标在当前行的任何位置，按快捷键Ctrl+Enter都能快速到下一行
十二、光标快速到前一行
快捷键
Ctrl + Shit + Enter
无论光标在当前行的任何位置，按快捷键Ctrl+Shit +Enter都能快速到前一行
