代码编辑器-VSCode
最后更新于
最后更新于
所谓工欲善其事必先利其器，一个优秀的编辑器能大大提高开发的效率。在以往开发过程中均使用 Webstorm 进行开发（因为我相信收费软件必有其过人之处才敢收费吧😅），现因需与团队同步改用 VSode 进行开发，因此为了使用方便和接近webstorm使用习惯需要对其进行改造，安装插件选择谨代表个人观点。
默认情况下 vscode 不会自动保存代码，需要手动 ctrl + s，为了实现代码自动保存，我们在设置下搜索 auto save，其具有四个选项，自行选择设定即可。
off: 关闭自动保存
afterDelay: XX毫秒后自动保存
onFocusChange: 当焦点移出编辑框
onWindowChange: 当焦点移出 vscode 窗口
也可以直接在菜单栏选择「文件-自动保存」，勾选后，当写完代码后，文件会立即实时保存。
vscode 下的 Vue 多功能集成工具，Vue 开发必备！
实时的识别单词拼写是否有误，并给出提示，对于英语菜鸟来说非常友好。注意，需要在插件Enable Filetypes 设置项（表示进行检查的文件类型）中添加 vue，不然不会检查 vue 文件。
代码一键运行，支持超过40种语言。
通过编辑器打开浏览器显示代码效果（右键选择）。
Auto Rename Tag 插件可以自动重命名成对的HTML/XML标记；Auto Close Tag 插件可以自动添加HTML/XML关闭标签。
可以查看git所有提交记录，并且代码上面自动有提示。
各种实用的代码片段，提高开发效率！！！
在 VS Code 中，将鼠标移至文件路径上并 command +点击，可以在新的标签页打开对应的文件，而安装了 File Peek 后，可以打开一个文件预览窗口，预览文件内容，并支持文件编辑。
追踪至样式表中 CSS class 和 id 定义。
追踪 vue 文件，允许快速跳转到或查看作为组件（从模板）或模块导入（从脚本）引用的文件。
CSS 智能提示。
路径智能提示。
npm 包导入智能提示。
搜索快速导航和打开文件 node_modules 的某个包位置。
代码格式检查工具，首先需要在本地全局安装npm install -g eslint。
npm 插件支持运行 package.json 文件中定义的 npm 脚本，并支持根据 package.json 中定义的依赖项验证已安装的模块。
SVG 插件集编码、最小化、预览等一体。
对于颜值党来说，颜值就是一切！为了让 vscode 看起来更加美丽动人，icon图标插件可选择material icon theme 或者 vscode-icons，编辑器主题可选择 material theme 或者 atom material theme 等等。
保存项目目录，方便切换不同项目。
选中内容并按 ctrl + option + L 自动针对选中内容扩展 console.log()，使得调试更便捷。
Import Cost 可以在代码中友好的提示我们，当前引入的包会增加多少体积，这有助于帮我们优化代码的体积。注意，如果需要知道 vue 组件等引入的体积需要进行配置才可以。
