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 class="className">div>

<div id="IDname">div>

<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语法