gitclone 一个tag的地址_VsCode从零开始配置一个属于自己的Vue开发环境

VsCode算是比较热门的一个代码编辑器了，全名Visual Studio Code，微软出品

插件众多，功能齐全，平常开发过程中都是用的它，整理了下日常使用的插件及配置供大家参考，废话就不多说了，直接进入正题。

相关插件

Vetur

插件文档地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur

Vetur不用说了吧，开发Vue必装的一个插件

未安装之前vue文件显示这样的

安装完成后显示这样的，看着舒服多了

Vue 2 Snippets

插件文档地址：https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

主要加强vue的便捷写法

language-stylus

插件文档地址：https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus

写stylus用的，如果项目用的stylus写样式推荐安装，其他Sass、LESS等同理安装相应的插件即可。

Auto Close Tag

插件文档地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

自动闭合标签所用

配合快捷键Alt+. (Command+Alt+. for Mac)特别好使。

Auto Rename Tag

插件文档地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

自动修改重命名配对的标签

Bookmarks

插件文档地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

可以对成片的代码做一些书签标记，方便后续查看。

Bracket Pair Colorizer

插件文档地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

对括号进行着色，方便区分，下面的图分别是安装前后的比较

Copy Relative Path

插件文档地址：https://marketplace.visualstudio.com/items?itemName=alexdima.copy-relative-path

用于复制文件的完整路径和相对路径，有时候我们可能需要复制一些文件的路径，该插件就很方便了。

Path Intellisense

插件文档地址：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

路径自动感知，在配置文件中配置@后我们就可以很方便快捷的引用各种文件了

"path-intellisense.mappings": { "@": "${workspaceRoot}/src"}

Document This

插件文档地址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis

主要用于方法的注释，选中方法名，按两次Ctrl+Alt+D,即可快速生成标准的注释

psioniq File Header

插件文档地址：https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header

按两次Ctrl+Alt+H可快速在文件的头部生成注释信息，如果对默认的注释模板不满意的话，可以在配置文件中自定义注释模板

"psi-header.templates": [ { "language": "*