Visual Studio Code

插件：

通用插件

        

    在function上输入/** tab                                   

    注释JS

    Open HTML in Default Browser                 

    在浏览器中打开

    Live HTML Previewer

    在vsCode中打开浏览器

    （preview）

    CSS Peek                                                    

    给你发送样式设置的 CSS 代码

    HTML Snippets                                              

    超级实用且初级的 H5代码片段以及提示

    HTML CSS Support                                        

    让 html 标签上写class 智能提示当前项目所支持的样式

    jQuery Code Snippets                                    

    超级实用且初级的 jQuery 代码片段以及提示

    vscode-icon                                                    

    让 vscode 资源树目录加上图标，必备良品！

    ESLint                                                                      

    检查Javascript编程时的语法错误

    Path InellisenSe                                          

    自动路径补全

    Project Manager

    在多个项目之前快速切换的工具

    beautify

    格式化代码的工具

    Bootstrap 3 Sinnpet

    常用 bootstrap 的可以下

    Atuo Rename Tag

    修改 html 标签，自动帮你完成尾部闭合标签的同步修改，不过有些bug。

    fileheader

    顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间    （Ctrl + Alt + i)

    filesize

    在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

    Bracket Pair Colorizer

    让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

    SVG Viewer

    此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。

    Minify

    这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。

    (Minify)

    Git Easy

    增加了vscode中自带的git操作，安装后按F1调出控制台，输入git easy [options]完成git操作

    JavaScript (ES6) snippets

    支持JavaScript  ES6 语法

    Easy less

    支持less语法

Vue插件

以下推荐vue框架所需的插件

           vetur 

        语法高亮、智能感知、Emmet等

    Vue 2 Snippets

        vue 代码提示，高亮。　　（ps：使用其他框架，直接搜就好，像是react，angular，就会出现相关的代码提示和语法支持常用插件）

    VueHelper

        snippet代码片段

    Import Cost

        引入包大小计算,对于项目打包后体积掌握很有帮助

    主题

    Dracula

        目前我觉得是vscode上最漂亮的主题,vscode 1.11+允许自定义statusBar等全局ui后,该主题也跟进改了很多小细节,良心!~

vsc常用快捷键：

同时打开多个窗口（查看多个项目）

• 打开一个新窗口： Ctrl+Shift+N
• 关闭窗口： Ctrl+Shift+W

同时打开多个编辑器（查看多个文件）

•  新建文件 Ctrl+N
• 历史打开文件之间切换 Ctrl+Tab，Alt+Left，Alt+Right
• 切出一个新的编辑器（最多3个）Ctrl+\，也可以按住Ctrl鼠标点击Explorer里的文件名
• 左中右3个编辑器的快捷键Ctrl+1 Ctrl+2 Ctrl+3
• 3个编辑器之间循环切换 Ctrl+`
• 编辑器换位置，Ctrl+k然后按Left或Right

格式调整

• 代码行缩进Ctrl+[， Ctrl+]
• 折叠打开代码块 Ctrl+Shift+[， Ctrl+Shift+]
• Ctrl+C Ctrl+V如果不选中，默认复制或剪切一整行
• 代码格式化：Shift+Alt+F，或Ctrl+Shift+P后输入format code
• 修剪空格Ctrl+Shift+X
• 上下移动一行： Alt+Up 或 Alt+Down
• 向上向下复制一行： Shift+Alt+Up或Shift+Alt+Down
• 在当前行下边插入一行Ctrl+Enter
• 在当前行上方插入一行Ctrl+Shift+Enter

光标相关

• 移动到行首：Home
• 移动到行尾：End
• 移动到文件结尾：Ctrl+End
• 移动到文件开头：Ctrl+Home
• 移动到后半个括号 Ctrl+Shift+]
• 选中当前行Ctrl+i（双击）
• 选择从光标到行尾Shift+End
• 选择从行首到光标处Shift+Home
• 删除光标右侧的所有字Ctrl+Delete
• Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right
• Multi-Cursor：可以连续选择多处，然后一起修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
• 同时选中所有匹配的Ctrl+Shift+L
• Ctrl+D下一个匹配的也被选中(被我自定义成删除当前行了，见下边Ctrl+Shift+K)
• 回退上一个光标操作Ctrl+U

重构代码

• 跳转到定义处：F12
• 定义处缩略图：只看一眼而不跳转过去Alt+F12
• 列出所有的引用：Shift+F12
• 同时修改本文件中所有匹配的：Ctrl+F12
• 重命名：比如要修改一个方法名，可以选中后按F2，输入新的名字，回车，会发现所有的文件都修改过了。
• 跳转到下一个Error或Warning：当有多个错误时可以按F8逐个跳转
• 查看diff 在explorer里选择文件右键 Set file to compare，然后需要对比的文件上右键选择Compare with 'file_name_you_chose'.

查找替换

• 查找 Ctrl+F
• 查找替换 Ctrl+H
• 整个文件夹中查找 Ctrl+Shift+F

显示相关

• 全屏：F11
• zoomIn/zoomOut：Ctrl + =/Ctrl + -
• 侧边栏显/隐：Ctrl+B
• 预览markdown Ctrl+Shift+V

其他

• 自动保存：File -> AutoSave ，或者Ctrl+Shift+P，输入 auto

 

此文章多个作者综合合成如上内容