VsCode从零开始配置一个属于自己的Vue开发环境
栏目: JavaScript · 发布时间: 5年前
内容简介:原文地址:VsCode算是比较热门的一个代码编辑器了,全名Visual Studio Code,微软出品,下载地址:插件众多,功能齐全,平常开发过程中都是用的它,整理了下日常使用的插件及配置供大家参考,废话就不多说了,直接进入正题。
原文地址: https://liubing.me/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": "*", "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<br />配合
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
下载设置
按 Shift + Alt + D
,它将询问您的GitHub Gist ID(我们在步骤 创建GitHub Gist ID
中生成的一个ID)
在窗口中输入该GitHub Gist ID,然后回车。
提示需要输入您的Gist ID(上面上传设置后生成的一个ID)
下载可能会需要点时间,完整过程Gif
插件配置
最后可以按照自己的需求配置自动上传与自动下载
"sync.autoDownload": false,// 是否自动下载 "sync.autoUpload": false// 是否自动上传
结语
至此教程就结束了,后面有其他问题或者有用的插件会补充进去。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- [ webpack4 ] 配置属于自己的打包系统教程(一)—— 基础配置篇
- Docker + VS Code 配置属于自己的炼丹炉
- 打造属于你自己的instagram!
- 属于 Unity 的 Flutter——UIWidgets
- 利用Python写属于自己的翻译命令行
- 打造属于自己的underscore系列(六)- 洗牌算法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Just My Type
Simon Garfield / Profile Books / 2010-10-21 / GBP 14.99
What's your type? Suddenly everyone's obsessed with fonts. Whether you're enraged by Ikea's Verdanagate, want to know what the Beach Boys have in common with easy Jet or why it's okay to like Comic Sa......一起来看看 《Just My Type》 这本书的介绍吧!