| 干货！15种vscode插件，提高开发效率 | 您所在的位置：网站首页 › vscode的less插件 › 干货！15种vscode插件，提高开发效率 |
干货！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 SnippetsVue VSCode Snippets官方文档 字首HTML代码段内容template``script``style``vTextv-text=msgvHtmlv-html=htmlvShowv-showvIfv-ifvElsev-elsevElseIfv-else-ifvForWithoutKeyv-forvForv-for="" :key=""vOnv-onvBindv-bindvModelv-modelvPrev-prevCloakv-cloakvOncev-oncekey:keyrefrefslotAslot=""slotE``slotScopeslot-scope=""component``keepAlive``transition``transitionGroup``enterClassenter-class=''leaveClassleave-class=''appearClassappear-class=''enterToClassenter-to-class=''leaveToClassleave-to-class=''appearToClassappear-to-class=''enterActiveClassenter-active-class=''leaveActiveClassleave-active-class=''appearActiveClassappear-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``toto=""tagtag=""newVueRouterconst router = newVueRouter({ })routerBeforeEachrouter.beforeEach((to, from, next) => { }routerBeforeResolverouter.beforeResolve((to, from, next) => { }routerAfterEachrouter.afterEach((to, from) => { }routerPushrouter.push()routerReplacerouter.replace()routerGorouter.back()routerBackrouter.push()routerForwardrouter.forward()routerGetMatchedComponentsrouter.getMatchedComponents()routerResolverouter.resolve()routerAddRoutesrouter.addRoutes()routerOnReadyrouter.onReady()routerOnErrorrouter.onError()routesroutes: []beforeEnterbeforeEnter: (to, from, next) => { }beforeRouteEnterbeforeRouteEnter (to, from, next) { }beforeRouteLeavebeforeRouteLeave (to, from, next) { }scrollBehaviorscrollBehavior (to, from, savedPosition) { } 字首Vuex代码段内容newVuexStoreconst store = new Vuex.Store({ }) 更多内容请关注：CSDN、掘金、GitHub、gitee
|
【本文地址】