干货！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

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

2open in browser

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

3Debugger for Chrome

作用：用谷歌浏览器调试

 

代码补全类插件

方便敲代码。

1Vue VSCode Snippets

作用：顾名思义，vue的代码提示插件。

2Auto Close Tag

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

3Auto Rename Tag

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

4Path Intellisense

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

5Mithril Emmet

作用：提高代码敲写速度

 

代码显示类插件

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

1Color Highlight

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

2indent-rainbow

作用：带颜色的缩进。

3Bracket Pair Colorizer

作用：带颜色的括号。

 

代码自动格式化插件

统一代码的格式

1vetur

作用：vue自动格式化

2Prettier - Code formatter

作用：格式化代码

3Manta's Stylus Supremacy

内容：格式化样式

4beautify

作用：代码格式化

自动格式化的配置

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({ })