前言
本人曾是一名webstorm使用者,但是前段时间不小心点了升级,结果导致破解失效,然后一顿操作最终把老的版本卸载了,本来想从官网上下个最新版的,没想到官网半天打不开(后来才知道只是网络有点问题),而网上搜索webstorm却出现了好多安利vscode的,加之近半同事都用的vscode开发,一咬牙决定加入vscode的怀抱了。
推荐插件
vscode和sublime有些类似,想用得舒服还得装插件,下面列举出我在用的一些插件
-
settings sync
这是我认为最有用的插件,通过settings sync,就可以在不同设备上同步个人配置了(包括插件和自己写好的文件摸板,settings.json等)。具体使用方法网上已经有很多教程了,简单来说:Shift
+Alt
+u
可以上传本地配置到github,Shift
+Alt
+d
可以下载配置到本地,注意保存自己的gist(在settings.json中也会有一项sync.gist纪录)。当然,有时候会出现token过期的情况,这时候需要打开命令面板(Shift
+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上的体验。