关于vscode的一些记录@慕课网原创_慕课网

前言

最近在试用vscode，先把大老婆sublime丢到一边，记录下vscode一些插件及用法，当作自己备忘。

sublime启动的速度还是无敌，不过有ssd情况下vscode给我的体验也很好，不像atom这个仿佛开挂的卡逼。

操作记录

安装插件

在最左侧的“扩展”中搜索并安装，简单方便，快捷键是ctrl + shift + x

打开用户设置

在安装好插件后想对插件进行自定义设置

ctrl + shift + p，然后搜索ouss（即open user settings）或者【文件】->【首选项】->【设置】

插件记录

HTML Snippets

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

但是好像新版的vscode自带的emmet已经有这个功能

HTML CSS Support

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

fileheader

ctrl + shift + i，可在头部插入注释，包括作者信息，需用户配置自己的名字等

比如我自己的设置：

    // setting.json，在用户设置中

    "fileheader.Author": "hu.zezhen",
    "fileheader.LastModifiedBy": "hu.zezhen"

jQuery Code Snippets

编码的时候输入jq，会有相关jQuery代码提示

不过觉得这样蛮傻的，不知道还有没有更友好点的提示

vscode - icon

让vscode资源树目录加上图标

Path Intellisense

自动补全路径，在输入路径时比较好用，比如输入img标签的src路径时

HTMLHint

HTML代码检测

Project Manager

多个项目之间快速切换

需要先ctrl + shift + p，搜索Project Manager然后选择Save Project

然后才会在左侧的project中看得到这个项目，然后可以保存多个之后就可以在里面切换

这一点sublime就方便多了，直接文件夹拖入左侧的Side Bar就行了

Atuo Rename Tag

修改HTML标签，自动帮你完成尾部闭合标签的同步修改

GitLens

丰富的git日志插件

打开有关联git远程仓库的文件夹时会在左侧中出现GitLens项

还能显示当前行的commit信息

Git History

git log，会在标题页右侧有个按钮Git: View History

Open HTML in Default Browser

HTML文件中，右键会显示“在浏览器中打开”，会使用默认浏览器打开当前文件

filesize

装了之后会在左下角显示当前文件大小

Bracket Pair Colorizer

让括号有独立颜色，便于区分，可查看安装页的详细配置，例如我自己的用户配置：

    "bracketPairColorizer.forceIterationColorCycle": true,
    "bracketPairColorizer.forceUniqueOpeningColor": true,
    "bracketPairColorizer.showBracketsInGutter": true

vetur

开发vue时必备，语法高亮、智能感知、Emmet等

VueHelper

vue相关的snippet代码片段

Markdown Preview Enhanced

预览markdown文件，右键选择Markdown Preview

Import Cost

会显示import引入的包的大小

Dark-Dracula

这是一个主题，目前自己用的这个

vscode-background

可以给编辑器加背景图片，详细配置也可查看安装页的说明，我这里的配置是：

    "background.enabled": true,
    "background.useDefault": false,
    "background.customImages": [
        // 支持本地图片和https开头的图片
        // 最多可分三栏，所以最多支持三张
        "https://xxx.com/cdn/ybmq.min.png",  
        "https://xxx.com/cdn/ybmq.min.png",
        "https://xxx.com/cdn/ybmq.min.png"                
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "opacity": 0.3
    }

需要注意的是安装了这个插件，vscode会提示安装损坏，选择“不再提示”即可，作者自己在安装页也有解释。

Beautify

格式化代码格式，可在用户配置中配置自己的风格，例如我这里配置了缩进为2个空格

    "beautify.config": {
        "indent_size": 2,
        "indent_char": " "
    }

Setting Sync

上传配置 Shift + Alt + U

下载配置 Shift + Alt + D

同步vscode插件等设置用的，测试了给宿舍的电脑同步公司上的设置可用

详细配置可点击参考

关于vscode的一些记录原创