vscode 插件

苯宝宝
179 阅读2分钟

前言

本篇文章主要用于记录苯宝宝在使用过的插件的一些基本用法。

vscode 插件

1.Auto Close Tag

2.Auto Rename Tag

3.Bracket Pair Colorizer

4.Code Runner

5.CSS Peek

6.GitLens — Git supercharged

7.JavaScript (ES6) code snippets

8.JavaScript Snippet Pack

9.Live Server

10.Visual Studio IntelliCode

11.vscode-icons

12.Vue VSCode Snippets

这是一个vue代码自动补全工具。下面列出常用的命令以及补全的代码

vfor

<div v-for="item in items" :key="item.id">
    {{ item }}
</div>

vmodel

 <input v-model="data" type="text" />

vmodel-num

 <input v-model.number="numData" type="number" step="1" />

von

 v-on:event="handle"

vslot

 v-slot=""

vslot-named

 <template v-slot:name>defaultcontent</template>

vbi

 v-bind=""

ve

 v-else

vh

 v-html="html"

vi

 v-if="condition"

vs

 v-show="condition"

vm

 实例

vm+other

 this.$attrs/vue.$attrs
 this.$emit('event', […args])
 this.$nextTick(callback)
 this.$refs
 this.$set(target, key, value)

实例上的方法都可以写到这个上面

vel：带props的组件

<component :component=""></component>

vsrc

<img :src="'/path/to/images/' + fileName" alt="altText"/>

vstyle

<div :style="{ fontSize: data + 'px' }"></div>

vclass

<div :class="{ className: data }"></div>

vco

<div :class="[classNameA, classNameB]"></div>

vcm

<div :class="[classNameA, {classNameB : condition}]"></div>

van

<transition
    mode="out-in"
    @before-enter="beforeEnter"
    @enter="enter"

    @before-leave="beforeLeave"
    @leave="leave"
    :css="false">

</transition>

vr：name路由

<router-link :to="{name: 'name'}">LinkTitle</router-link>

vrpa：path路由

<router-link to="path">LinkTitle</router-link>

vrnp：name路由带param参数

<router-link :to="{name: 'name', params:{id: 'value'} }">LinkTitle</router-link>

rv

<router-view></router-view>

vprops

props: {
      propName: {
          type: Number,
          default: 
      },
  },

vfilter

filters: {
    fnName: function(value) {
        return value;
    }
}

vmi

const mixinName = {
    mounted() {
        console.log('hello from mixin!');
    },
};

vmiu

mixins: [mixinName],

vcommit

mutationName() {
    this.$store.commit('mutationName', payload);
}

vdis

actionName() {
    this.$store.dispatch('actionName', payload);
}

vim：引入组件

import New from '@/components/New.vue';

vimd:动态引入组件

New = () => import('@/components/New.vue')

14.Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code（*）

  • install插件
  • ctrl + shift + P : 显示命令面板，选择configure display language

image.png

  • 选择zh-cn image.png

15.Quokka.js(*) ---显示变量结果

据说是开发很香的一款利器，这里说下我使用这个插件的一些坑

  • install插件，运行的时候报错：nodejs没有安装，看文档该插件依赖nodejs，啥也不说，去安装。。。
  • ctrl + 'shift' + 'P'：显示命令面板，输入：quokka，显示可用的命令 image.png
  • 版本问题：有免费版和pro版
  • 可以搭着Quokka Statusbar Buttons一起用，快捷键：ctrl+J或ctrl+k
  • 可以帮助您在实际使用之前研究库的函数，如 Lodash 或 MomentJS
  • 可以用于异步调用。
  • 状态值代表的含义
    • 灰色 - 代表没有被执行
    • 绿色 - 代表已经被执行
    • 黄色 - 代表仅部分被执行
    • 红色 - 代表该源码行是错误的来源，或者在是错误的堆栈中
  • 缺点：免费版需要新建quokka文件，再将代码复制到新建的文件才能执行

16.括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)（*）

  • install插件可直接使用

17.TODO代办（*）

  • install插件可直接使用
  • // TODO: 备忘
  • // FIXME: 修改

18.REST Client(*)

发送HTTP请求并直接在Visual Studio代码中查看响应

  • install插件可直接使用
  • 新建一个.http的文件用来发送请求
  • 将光标移动到要发送请求的url后面，右键选择send Request或快捷键ctrl+alt+R发送请求

19.Breadcrumbs面包屑（*）

可以快速定位到方法名

  • install插件可直接使用
  • 在文件上方可看到一个路径 image.png

20.Turbo Console Log（*）

该插件可以快速生成console.log()方法

  • 选中变量，ctrl+alt+L，快速生成console.log()方法，参数为选中的变量

image.png

  • alt+shift+d:删除所以通过该插件添加的console.log()方法
avatar
文章
阅读
粉丝