0
点赞
收藏
分享

微信扫一扫

干货!15种vscode插件,提高开发效率


vscode常用插件

 

前言

工预先善其事,必先利其器。vscode通过配置后就会特别好用,不过我第一次使用vscode的时候十分不友好,简直扎心。首先就是全英文,不太习惯,其次不能开箱就可以用,随后我就使用了HbuilderX。

不过后来因为公司前端开发是使用vscode,于是自己就又开始使用vscode。然后就是真香。首先今年vscode今年新出了简体中文的语言包,这让我能更好的了解vscode的各个功能。其次通过插件的安装,vscode写前端好顺手。

下面就是我常用的插件。

  • 代码调试类:前端使用vscode的基本的功能。汉化包、浏览器运行。
  • 代码补全插件:这个需要专门记,不过很能提高效率。但是初学者还是多敲代码好。敲熟练了再用这些工具。
  • 代码显示类:方便找出代码显示和缩进等显示上的问题,虽然有时候会晃眼睛。
  • 代码自动格式化插件:方便团队协作中统一代码书写。

代码调试类、代码显示类都是直接使用就行。代码补全以及自动格式化的插件就因人而异。主要是vetur和Vue VSCode Snippets需要多加使用。多看官网。

 

插件

参考教程:​​史上最强的 VSCode 插件,提高开发效率​​

​​干货满满!25种绝佳VSCode扩展,体验便捷高效的生活​​

名字取得很响亮。不过实际上就上面四种为主。而且许多插件更新换代快,有新的取代物。

还有一些如ESlint、Browser Preview等,一个提示好烦,一个差一点的电脑还带不动。就很尴尬。

 

代码调试类插件

运行代码

1Chinese (Simplified) Language Pack for Visual Studio Code

干货!15种vscode插件,提高开发效率_web

作用:vscode上的简体中文语言包。

2open in browser

干货!15种vscode插件,提高开发效率_代码调试_02

作用:运行HTML文件。在HTML文件中右键“在浏览器打开“就可以运行HTML文件。我一开始接触vscode的时候,我还以为像eclipse是用运行来打开HTML文件的,并且那时候vscode还没出语言包,就没打开HTML文件。

3Debugger for Chrome

干货!15种vscode插件,提高开发效率_web_03

作用:用谷歌浏览器调试

 

代码补全类插件

方便敲代码。

1Vue VSCode Snippets

干货!15种vscode插件,提高开发效率_代码补全_04

作用:顾名思义,vue的代码提示插件。

2Auto Close Tag

干货!15种vscode插件,提高开发效率_vue_05

作用:自动补全标签。提高效率

3Auto Rename Tag

干货!15种vscode插件,提高开发效率_vue_06

作用:自动重命名HTML标签。不要改了开头那个,又去改结尾那个。

4Path Intellisense

干货!15种vscode插件,提高开发效率_html_07

作用:处理文件路径的时候可以自动填写

5Mithril Emmet

干货!15种vscode插件,提高开发效率_代码调试_08

作用:提高代码敲写速度

 

代码显示类插件

方便显示代码,分块找代码

1Color Highlight

干货!15种vscode插件,提高开发效率_代码补全_09

作用:颜色高亮显示,十分打眼,更好地知道颜色的显示。

2indent-rainbow

干货!15种vscode插件,提高开发效率_代码调试_10

作用:带颜色的缩进。

3Bracket Pair Colorizer

干货!15种vscode插件,提高开发效率_vue_11

作用:带颜色的括号。

 

代码自动格式化插件

统一代码的格式

1vetur

干货!15种vscode插件,提高开发效率_web_12

作用:vue自动格式化

2Prettier - Code formatter

干货!15种vscode插件,提高开发效率_html_13

作用:格式化代码

3Manta's Stylus Supremacy

干货!15种vscode插件,提高开发效率_代码调试_14

内容:格式化样式

4beautify

干货!15种vscode插件,提高开发效率_vue_15

作用:代码格式化

自动格式化的配置

​​ESlint自动格式化配置的官方文档​​

​​Prettier - Code formatter的官方文档​​

beautify就不使用了。开发vue的时候ESlint和Prettier其实包含在了vue CLI中了。vscode插件用vetur就可以满足基本需求。

教程:​​vscode 配置vue+vetur+eslint+prettier自动格式化功能​​

vetur

​​官方文档​​

可以语法高亮、snippet、Emmet、错误检查、格式化。跟瑞士军刀一样。

 

 

代码补全的常用输入

我就主要讲Vue VSCode Snippets。

Vue VSCode Snippets

​​Vue VSCode Snippets官方文档​​

字首

HTML代码段内容

​template​

``

​script​

``

​style​

``

​vText​

​v-text=msg​

​vHtml​

​v-html=html​

​vShow​

​v-show​

​vIf​

​v-if​

​vElse​

​v-else​

​vElseIf​

​v-else-if​

​vForWithoutKey​

​v-for​

​vFor​

​v-for="" :key=""​

​vOn​

​v-on​

​vBind​

​v-bind​

​vModel​

​v-model​

​vPre​

​v-pre​

​vCloak​

​v-cloak​

​vOnce​

​v-once​

​key​

​:key​

​ref​

​ref​

​slotA​

​slot=""​

​slotE​

``

​slotScope​

​slot-scope=""​

​component​

``

​keepAlive​

``

​transition​

``

​transitionGroup​

``

​enterClass​

​enter-class=''​

​leaveClass​

​leave-class=''​

​appearClass​

​appear-class=''​

​enterToClass​

​enter-to-class=''​

​leaveToClass​

​leave-to-class=''​

​appearToClass​

​appear-to-class=''​

​enterActiveClass​

​enter-active-class=''​

​leaveActiveClass​

​leave-active-class=''​

​appearActiveClass​

​appear-active-class=''​

​beforeEnterEvent​

​@before-enter=''​

​beforeLeaveEvent​

​@before-leave=''​

​beforeAppearEvent​

​@before-appear=''​

​enterEvent​

​@enter=''​

​leaveEvent​

​@leave=''​

​appearEvent​

​@appear=''​

​afterEnterEvent​

​@after-enter=''​

​afterLeaveEvent​

​@after-leave=''​

​afterAppearEvent​

​@after-appear=''​

​enterCancelledEvent​

​@enter-cancelled=''​

​leaveCancelledEvent​

​@leave-cancelled=''​

​appearCancelledEvent​

​@appear-cancelled=''​

 

字首

Vue路由器摘要内容

​routerLink​

``

​routerView​

``

​to​

​to=""​

​tag​

​tag=""​

​newVueRouter​

​const router = newVueRouter({ })​

​routerBeforeEach​

​router.beforeEach((to, from, next) => { }​

​routerBeforeResolve​

​router.beforeResolve((to, from, next) => { }​

​routerAfterEach​

​router.afterEach((to, from) => { }​

​routerPush​

​router.push()​

​routerReplace​

​router.replace()​

​routerGo​

​router.back()​

​routerBack​

​router.push()​

​routerForward​

​router.forward()​

​routerGetMatchedComponents​

​router.getMatchedComponents()​

​routerResolve​

​router.resolve()​

​routerAddRoutes​

​router.addRoutes()​

​routerOnReady​

​router.onReady()​

​routerOnError​

​router.onError()​

​routes​

​routes: []​

​beforeEnter​

​beforeEnter: (to, from, next) => { }​

​beforeRouteEnter​

​beforeRouteEnter (to, from, next) { }​

​beforeRouteLeave​

​beforeRouteLeave (to, from, next) { }​

​scrollBehavior​

​scrollBehavior (to, from, savedPosition) { }​

 

字首

Vuex代码段内容

​newVuexStore​

​const store = new Vuex.Store({ })​

更多内容请关注:​​GitHub​​​、​​gitee​​

 

举报

相关推荐

0 条评论