码迷,mamicode.com
首页 > 其他好文 > 详细

VsCode从零开始配置一个属于自己的Vue开发环境

时间:2020-02-06 01:34:50      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:class   括号   编辑器   oct   sni   ubi   快捷键   The   snippet   

 

VsCode算是比较热门的一个代码编辑器了,全名Visual Studio Code
下载地址:点我去下载
插件众多,功能齐全,我在平常开发过程中都是用的它,整理了些自认好用的插件,

自己也记录下,万一以后换电脑了捏??

参考文档:https://liubing.me/vscode-vue-setting.html

Vetur

插件文档地址:https://marketplace.visualstudio.com/items?itemName=octref.vetur
开发Vue必装的一个插件

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

技术图片

安装完成后显示这样的,看着是不是贼拉舒服

技术图片

Vue 2 Snippets

插件文档地址:https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
主要加强vue的便捷写法

技术图片

技术图片

 

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
对括号进行着色,方便区分,下面的图分别是安装前后的比较

技术图片

技术图片

 

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
这个不用多说了,规范代码格式的。

 

注:新手上路,后面发现其他问题或者有用的插件会补充进去,大家有更好用插件的多多留言奥??。

 

VsCode从零开始配置一个属于自己的Vue开发环境

标签:class   括号   编辑器   oct   sni   ubi   快捷键   The   snippet   

原文地址:https://www.cnblogs.com/hq-HQ/p/12267266.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!