vscode使用指北

前言

本人曾是一名webstorm使用者，但是前段时间不小心点了升级，结果导致破解失效，然后一顿操作最终把老的版本卸载了，本来想从官网上下个最新版的，没想到官网半天打不开（后来才知道只是网络有点问题），而网上搜索webstorm却出现了好多安利vscode的，加之近半同事都用的vscode开发，一咬牙决定加入vscode的怀抱了。

推荐插件

vscode和sublime有些类似，想用得舒服还得装插件，下面列举出我在用的一些插件

• settings sync

这是我认为最有用的插件，通过settings sync，就可以在不同设备上同步个人配置了（包括插件和自己写好的文件摸板，settings.json等）。具体使用方法网上已经有很多教程了，简单来说：Ctrl+Alt+u可以上传本地配置到github，Ctrl+Alt+d可以下载配置到本地，注意保存自己的gist(在settings.json中也会有一项sync.gist纪录)。当然，有时候会出现token过期的情况，这时候需要打开命令面板(Ctrl+Alt+p)，输入sync，选择重置设置就ok了（Reset Extension Settings）

• Chinese (Simplified) Language Pack for Visual Studio Code

话不多说。

• Auto Rename Tag

在修改html标签时自动修改对应的闭合/开始标签(webstorm中习惯用的技能)。

• ESLint

代码校验。

• npm Intellisense

打开命令面板，输入import，然后直接选择要导入的npm包，自动生成代码。

• Path Intelisense

写路径的时候自动提示(webstorm中习惯用的技能)。

• Import Cost

引包的时候可以显示包的大小(网络不好的时候挺难下这个插件)。

• Vetur

支持Vue语法高亮，格式化，语法检查等等(三大框架应该都有对应的插件)。

• Webstorm Icon Theme

支持左侧文件图标显示为webstorm样式，如果没有它，我估计不会使用vscode。

• koroFileHeader

可以通过快捷键添加文件头部注释以及函数注释，之所以没有用使用人数更多的vscode-fileheader是因为它的每一行注释后面都有一个空格，这样会导致代码检查报错。(可能是本人公司的ESLint规则导致的吧)

主题

由于我使用webstorm的时候就用的是sublime主题插件（monokai），恰好vscode自带Monokai主题，所以在试过几款主题插件之后还是选择了Monokai。（尽管配色还是有点不习惯）

关于settings.json

对于eslint和vetur有几点单独设置，避免代码检查有冲突

{
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.options.tabSize": 4, // 与eslint统一
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": true,
            "singleQuote": true // 属性值为单引号
        }
    }
}

关于自定义代码片段

这一点真的没有webstorm好用，只能建好文件之后使用snippets打开自定义的代码片段。（坐下角设置-用户代码片段），如果需要在默认的html模板中将语言设置为中文（避免浏览器弹出是否翻译），只需要在settings.json中加上如下属性即可

    "emmet.variables": {
        "lang": "zh-CN"
    }

一些技巧(完善中)

1.设置快捷键，复制任意一行键位在搜索栏粘贴就能看到语法。（顺便把向下复制行改回了Ctrl+d）
2.设置鼠标滚轮缩放："editor.mouseWheelZoom": true, 再也不用担心自己的电脑125%缩放和公司电脑100%缩放产生的字体大小差异了。(继续移植webstorm功能)

使用感想

目前用了几天，感觉还是webstorm稍微好用一点(主要是webstorm可以预设文件模板外加顶部注释，并且不用snippets一气呵成，并且还能内置npm命令)，不过vscode胜在免费，而且打开快。希望以后vscode能超越我在webstorm上的体验。