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

男娘i 2021-11-10 10:32 376阅读 0赞

转载，原文地址：                       https://blog.csdn.net/q1056843325/article/details/52928390                    </div>
                                                    <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css">
                                        <div id="content_views" class="markdown_views">
                    
                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                    </svg>
                                            <p>给大家推荐编写前端代码非常舒服的编辑器</p>

**visual stdio code**

这是15年微软随Edge一并发布的轻量级编辑器，用起来感觉比sublime舒服  
它还是开源的，简直是微软的良心之作  
传送门–>[vs code 下载地址拿走不谢(＾－＾)V][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 class="className"></div>
    
    <div id="IDname"></div>
    
    <ul>
        <li></li>
        <li></li>
    </ul>
     
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11

了解更多  
可以看看[Emmet语法][Emmet]

[==主页传送门==][Link 1]

[vs code _V]: https://code.visualstudio.com/Download
[Emmet]: http://www.w3cplus.com/tools/emmet-cheat-sheet.html
[Link 1]: http://blog.csdn.net/q1056843325