visual studio code前端插件以及常用快捷键

visual stdio code简洁

这是15年微软随Edge一并发布的轻量级编辑器，用起来感觉比sublime舒服 

它还是开源的，简直是微软的良心之作 
vs code 下载地址

功能非常强大，谁用谁知道

vs code 插件

点击vscode左侧扩展就可以搜索插件了 

首先给大家推荐几个我常用的插件
HTML Snippets 包含html标签,很全
HTML CSS Support 缩短样式表编写时间
Path Intellisense 可以查找文件路径
Auto Rename Tag 改变开始标签自动修改结尾标签
Emoji 可以添加特殊字符等 娱乐插件
View In Browser 可以使用快捷键ctrl+F1用浏览器打开文件
vscode-icons 资源管理器中改变文件图标(其实新版本也增加图标了,但是感觉好low)
background 改变背景图片,也是娱乐插件
debugger for chrome 其实不用也行, 这个插件配置还挺复杂的

vs code 常用快捷键

列选择：ALT＋左键
命令面板：F1
切出新编辑器：Ctrl + 左键文件
代码行缩进：Ctrl + [ 、Ctrl + ]
文件切换：Ctrl + Tab
转到行首/行尾：Home / End
转到文件头/文件尾：Ctrl + Home / Ctrl + End
重命名：F2
转定义：F12 or Ctrl + click
转定义（切出新编辑器）： Ctrl + Alt + click
查看定义：Alt + F12
查看引用：Shift + F12
上下移动一行：Alt + Up / Alt + Down
代码格式化：Shift＋Alt + F

Emmet

vscode内置的Emmet插件确实是web前端开发利器 

简单地说, 就是用缩写语法生成HTML标签 

比方我在空白html文档中输入一个 “!”或者”html:5” 

再按下tab 

它会自动把整个html的基本结构标签给你写好 

emmet缩写语法比较多 

这里简单说几个常用的吧

<!-- div -->
<div></div>
<!-- div.className -->
<div class="className"></div>
<!-- div#IDname -->
<div id="IDname"></div>
<!--ul>li*2 -->
<ul>
<li></li>
<li></li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

了解更多 

可以看看Emmet语法