vscode常用插件
前言
工预先善其事，必先利其器。vscode通过配置后就会特别好用，不过我第一次使用vscode的时候十分不友好，简直扎心。首先就是全英文，不太习惯，其次不能开箱就可以用，随后我就使用了HbuilderX。
不过后来因为公司前端开发是使用vscode，于是自己就又开始使用vscode。然后就是真香。首先今年vscode今年新出了简体中文的语言包，这让我能更好的了解vscode的各个功能。其次通过插件的安装，vscode写前端好顺手。
下面就是我常用的插件。
-
代码调试类：前端使用vscode的基本的功能。汉化包、浏览器运行。
-
代码补全插件：这个需要专门记，不过很能提高效率。但是初学者还是多敲代码好。敲熟练了再用这些工具。
-
代码显示类：方便找出代码显示和缩进等显示上的问题，虽然有时候会晃眼睛。
-
代码自动格式化插件：方便团队协作中统一代码书写。
代码调试类、代码显示类都是直接使用就行。代码补全以及自动格式化的插件就因人而异。主要是vetur和Vue VSCode Snippets需要多加使用。多看官网。
插件
名字取得很响亮。不过实际上就上面四种为主。而且许多插件更新换代快，有新的取代物。
还有一些如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
作用：代码格式化
自动格式化的配置
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
| 字首 | 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({ }) |