前言
我之前一直在用WebStorm，习惯了这种开箱即用的编辑器，无他，因为懒得去折腾编辑器。
我一直觉得编辑器就是工具，越简单易用越好，能开箱即用的就是最好的。之前就一直觉得相比于WS，VS就像半成品似的。
但是WebStorm变得越来越卡顿，特别是在打开项目特别多的情况下，打开时间长，有时候还会卡死，自带的git功能也时常出问题（比如中文无法输入、commit代码卡住、分支切换后右下角显示不能及时同步总担心当前分支不是想要的分支）。
于是，我就尝试性的切换到了VsCode，尝试一下能否在不丧失较多编码效率的情况下完成转换。
经过大概一周左右的时间，现在基本上习惯了VS，并且也折腾了一下有关格式化的扩展插件，目前弄的基本比较顺手了，特意记录一下。
起步
由于之前一直用WS嘛，所以在安装VS的时候就选了WS的快捷键方式，部分快捷方式迁移了过来，还是比较舒服的，但是还有2个遗憾：
- 粘贴的代码不会自动对齐格式
- 自带的格式化工具（Vetur）格式化出来的效果实在不喜欢，而且也不符合公司的格式标准。HTML部分每个属性一行，而且标签尾号单独占一行，这样把vue文件弄的很长效果不好。
- 不支持路径跳转
扩展
从网上查了相关格式化扩展，推荐的大多都是eslint+Prettier，由于我们没有用eslint，单独用Prettier默认的样式并不符合公司规范，然后把允许宽度修改的很大，结果格式化了就没有任何变化了。
接下来又折腾了一些其他插件，最终结果如下：
别名路径跳转
作用：路径跳转 配置：无。默认支持@映射，如果需要其他映射，需要配置
"alias-skip.mappings": {
"@":"/src" // 默认只有`@`映射，映射到`/src`，你可以添加更多映射，映射路径必须以`/`开头\
// ...更多映射关系
}
用法：按住Ctrl，点击路径即可跳到对应文件
Paste and Indent
作用：粘贴时自动对齐缩进 配置： keybings.json（进入路径：文件-首选项-键盘快捷方式-右上角第一个图标打开键盘快捷方式）
// 将键绑定放在此文件中以覆盖默认值auto[]
[
{
"key": "ctrl+v",
"command": "pasteAndIndent.action",
"when": "editorTextFocus && !editorReadonly"
},
]
用法：正常粘贴即可，会按照粘贴所在行的光标进行相应缩进
vue-format
作用：格式化代码
配置：
{
"vue-format.break_attr_limit": 4,
"vue-format.js-beautify": {
"indent_size": "editor.tabSize",
"indent_char": " ",
"indent_with_tabs": false,
"brace-style": "collapse",
"space_after_anon_function": true,
"css": {
"indent_size": "4",
"eol": "\\n",
"brace-style": "collapse",
"end-with-newline": false,
"selector-separator-newline": false,
"newline-between-rules": false
},
"js": {},
"html": {
// "force_format": ["template"],
"wrap_attributes": "auto"
}
},
}
说明：
{
"html_indent_root": false, // 是否缩进vue template中的根节点\
"break_attr_limit": -1, // tag 的 attrs 大于该数值时，强制 attrs 换行，-1时不换行\
"attr_end_with_gt": true, // break_attr_limit省生效时，tag的">"是否不换行，默认true\
"format_need": ["html", "js", "css"], // vue单文件中需要格式化的语言，默认["html", "js", "css"]。从数组中删除你不希望格式化的语言
"js-beautify": {
"indent_size": "editor.tabSize",
"indent_char": " ",
"indent_with_tabs": false,
"brace-style": "collapse",
"space_after_anon_function": true,
"css": {},
"js": {},
"html": {
// "force_format": ["template"],
"wrap_attributes": "auto"
}
},
"pug-beautify": {
"fill_tab": false
}
}
用法： win: alt+ctrl+p mac: cmd+ctrl+p
