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

给大家推荐编写前端代码非常舒服的编辑器

visual stdio code

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

它还是开源的，简直是微软的良心之作

传送门–>vs code 下载地址拿走不谢(＾－＾)V

改用它的原因是非常喜欢它的UI (其实是怀念以前用vs编C++的时光)

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

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>

了解更多

可以看看Emmet语法

==主页传送门==