2 snippets vue 修改配置_VsCode从零开始配置一个属于自己的Vue开发环境

VsCode算是比较热门的一个代码编辑器了，全名Visual Studio Code，微软出品，下载地址：点我去下载

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

相关插件

Vetur

Vue 2 Snippets

language-stylus

Auto Close Tag

Auto Rename Tag

Bookmarks

Bracket Pair Colorizer

Copy Relative Path

Path Intellisense

"path-intellisense.mappings": {

"@": "${workspaceRoot}/src"

}

Document This

psioniq File Header

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

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

"psi-header.templates": [

{

"language": "*",

"template": [

"FileName: <>",

"Remark: <>",

"Project: <>",

"Author: <>",

"File Created: <>",

"Last Modified: <>",

"Modified By: <>"

]

}

]

Vue Peek

JavaScript (ES6) code snippets

Material Icon Theme

ESLint

StandardJS - JavaScript Standard Style

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

Version Lens

One Dark Pro

相关配置

{

// 编辑器默认设置

"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: <>",

"Remark: <>",

"Project: <>",

"Author: <>",

"File Created: <>",

"Last Modified: <>",

"Modified By: <>"

]

}],

// 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

下载设置

按Shift + Alt + D，它将询问您的GitHub Gist ID(我们在步骤创建GitHub Gist ID中生成的一个ID)

在窗口中输入该GitHub Gist ID，然后回车。

提示需要输入您的Gist ID(上面上传设置后生成的一个ID)

下载可能会需要点时间，完整过程Gif

插件配置

最后可以按照自己的需求配置自动上传与自动下载

"sync.autoDownload": false,// 是否自动下载

"sync.autoUpload": false// 是否自动上传

结语

至此教程就结束了，后面有其他问题或者有用的插件会补充进去。