在新版vscode中如何配置JSPVsCode从零开端设置装备摆设一个属于本身的Vue开辟情况

插件浩瀚，功能完好，平常开拓过程中都是用的它，整理了下日常利用的插件及配置供大家参考，废话就不多说了，直接进入正题。

干系插件

Vetur

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

在新版vscode中如何配置JSPVsCode从零开端设置装备摆设一个属于本身的Vue开辟情况 HTML

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\"大众: \"大众\"大众, \公众template\"大众: [ \"大众FileName: <<filename>>\"大众, \"大众Remark: <<filename>>\公众, \公众Project: <<projectname>>\"大众, \"大众Author: <<author>>\公众, \公众File Created: <<filecreated('dddd, Do MMMM YYYY h:mm:ss a')>>\"大众, \"大众Last Modified: <<dateformat('dddd, Do MMMM YYYY h:mm:ss a')>>\"大众, \"大众Modified By: <<author>>\"大众 ] }]

Vue Peek

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

用于Vue快速查看组件定义以及组件跳转，详细利用见插件文档地址中的利用方法。

JavaScript (ES6) code snippets

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

用于快速天生ES6代码片段

Material Icon Theme

插件文档地址：https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Material风格的icon文件图标，可以看下安装前后的差异。

ESLint

插件文档地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

这个不用多说了，规范代码格式的。

StandardJS – JavaScript Standard Style

插件文档地址：https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs

作为一个合格的前端开拓，得遵照一定得代码规范，这里推举StandardJS，合营该插件可以自动将你的代码格式化成规范的代码。

vue-cli-3脚手架创建项目的时候，可以选择这个规范。

Beautify

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

紧张拿它来格式话html的，也可以格式话vue template中的html

合营vetur插件，须要做些设置,格式化html支持以下四种模式auto|force|force-aligned|force-expand-multiline

\"大众vetur.format.defaultFormatterOptions\公众: { //beautify设置 \公众js-beautify-html\"大众: { \"大众wrap_attributes_indent_size\"大众: 2, \"大众wrap_attributes\"大众: \"大众force-expand-multiline\"大众 // auto|force|force-aligned|force-expand-multiline }}

auto模式

force模式

force-aligned模式

force-expand-multiline模式

vscode-element-helper

插件文档地址：https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper

用element-ui的，该当都知道这个插件，功能看图就知道了。

Version Lens

插件文档地址：https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

显示npm，jspm，bower，dub和dotnet核心的软件包版本信息

One Dark Pro

插件文档地址：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

一款热门的主题，安装前后比较。

干系配置

{ // 编辑器默认设置 \"大众editor.tabSize\公众: 2, // 设置2个空格统一tabSize \公众javascript.validate.enable\公众: false, // 关闭默认的校验 \公众workbench.editor.enablePreview\公众: false, // 关闭文件预览 // 引用路径设置 \"大众path-intellisense.mappings\"大众: { \"大众@\"大众: \"大众${workspaceRoot}/src\"大众, \"大众~\公众: \公众${workspaceRoot}/src\"大众, \"大众src\"大众: \"大众${workspaceRoot}/src\"大众 }, // standard自动保存 \"大众standard.autoFixOnSave\公众: true, // psioniq File Header设置 \"大众psi-header.templates\"大众: [{ \公众language\公众: \公众\公众, \公众template\"大众: [ \公众FileName: <<filename>>\公众, \"大众Remark: <<filename>>\"大众, \公众Project: <<projectname>>\公众, \"大众Author: <<author>>\"大众, \"大众File Created: <<filecreated('dddd, Do MMMM YYYY h:mm:ss a')>>\"大众, \公众Last Modified: <<dateformat('dddd, Do MMMM YYYY h:mm:ss a')>>\公众, \"大众Modified By: <<author>>\"大众 ] }], // vetur设置 \"大众vetur.format.defaultFormatter.html\公众: \"大众js-beautify-html\公众, \公众vetur.format.defaultFormatter.js\"大众: \"大众none\公众, \"大众vetur.format.defaultFormatterOptions\公众: { //beautify设置 \"大众js-beautify-html\公众: { \公众wrap_attributes_indent_size\"大众: 2, \"大众wrap_attributes\"大众: \公众force-expand-multiline\"大众 // auto|force|force-aligned|force-expand-multiline } }, // eslint设置 \"大众eslint.validate\"大众: [ \公众javascript\"大众, \"大众javascriptreact\公众, { \"大众language\公众: \"大众vue\"大众, \"大众autoFix\"大众: true } ], // 保存后自动格式化 \"大众eslint.autoFixOnSave\公众: true, \"大众editor.formatOnSave\"大众: true, \公众workbench.iconTheme\"大众: \"大众material-icon-theme\"大众, // icon图标 \公众workbench.colorTheme\"大众: \"大众One Dark Pro\公众 // 编辑器主题}备份及同步

忙活半天把上面的插件都装上及配置好，下次换新电脑的时候总不能重新再来一遍吧，以是压轴插件登场

Settings Sync

插件文档地址：https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

安装完成后须要做些其他事情：

创建GitHub Gist ID

点我去创建

创建完成后有个提示，一定要将赤色框所示的token记录下来，不然下次就看不到了。

上传设置

按Shift + Alt + U，会涌现一个出入token的框，将上面我们创建的token输入后回车。

完成后会给你天生一个GIST ID，将这个GIST ID记录下来，下次须要在其他电脑上规复数据的时候须要用到。

完全步骤Gif

下载设置