2 snippets vue 修改配置_vue-snippets: 支持 Vue 3 的语法高亮，代码格式化和代码提示的 Visual Studio Code 插件。...

Vue 2/3 代码片段语法高亮格式化插件

这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

你可以在 VS Code 编辑器底部栏右下角打开 Auto Format Vue 开关，它可能帮你在代码保存的时候自动格式化 vue 文件的格式，默认是关闭状态。

如果你不想自动格式化 vue 文件，你也可以在 vue 文件中点击鼠标右键，在出现的菜单栏中选择 Format Document 菜单项，则文件会执行一次格式化。

你可以在文件夹右键的菜单栏中使用 Vue Generator Component ，弹窗中填入组件名，会自动生成一个默认组件模板，便于你快速创建一个组件。

代码片段

Vue 3 代码片段

包含常用 Vue3 代码片段，比如你输入 reactive，选择 reactive 的代码片段，则编辑器会自动帮你生成 const data = reactive({...}) 代码，提高你的开发效率。

关键字

JavaScript 代码片段

import

import {...} from "@vue/composition-api"

import

import {...} from 'vue'

newVue

newVue({...})

defineComponent

defineComponent({...})

export

export default { ... }

setup

setup(${...}) {...}

reactive

const data = reactive({...})

watch

watch(..., ...)

watchFn

watch(() => {...})

watchArray

watch([...]) => {...}

watchEffect

watchEffect(() => {...})

computed

computed(() => { get: () => {...}, set: () => {...}})

toRefs

toRefs(...)

ref

ref(...)

props

props(...)

onBeforeMount

onBeforeMount(...)

onMounted

onMounted(...)

onBeforeUpdate

onBeforeUpdate(...)

onUpdated

onUpdated(...)

onBeforeUnmount

onBeforeUnmount(...)

onUnmounted

onUnmounted(...)

onErrorCaptured

onErrorCaptured(...)

Vue 2 代码片段

兼容所有常用 Vue 2 代码片段，如下：

关键字

JavaScript 代码片段

import

import ... from ...

newVue

new Vue({...})

VueConfigSilent

Vue.config.silent = true

VueConfigOptionMergeStrategies

Vue.config.optionMergeStrategies

VueConfigDevtools

Vue.config.devtools = true

VueConfigErrorHandler

Vue.config.errorHandler = function (err, vm, info) {...}

VueConfigWarnHandler

Vue.config.warnHandler = function (msg, vm, trace) {...}

VueConfigIgnoredElements

Vue.config.ignoredElements = [''] \

VueConfigKeyCodes

Vue.config.keyCodes

VueConfigPerformance

Vue.config.performance = true

VueConfigProductionTip

Vue.config.productionTip = false

vueExtend

Vue.extend( options )

VueNextTick

Vue.nextTick( callback, [context] )

VueNextTickThen

Vue.nextTick( callback, [context] ).then(function(){ })

VueSet

Vue.set( target, key, value )

VueDelete

Vue.delete( target, key )

VueDirective

Vue.directive( id, [definition] )

VueFilter

Vue.filter( id, [definition] )

VueComponent

Vue.component( id, [definition] )

VueUse

Vue.use( plugin )

VueMixin

Vue.mixin({ mixin })

VueCompile

Vue.compile( template )

VueVersion

Vue.version

data

data() { return {} }

watchWithOptions

key: { deep: true, immediate: true, handler: function () { } }

vmData

${this, vm}.$data

vmProps

${this, vm}.$props

vmEl

${this, vm}.$el

vmOptions

${this, vm}.$options

vmParent

${this, vm}.$parent

vmRoot

${this, vm}.$root

vmChildren

${this, vm}.$children

vmSlots

${this, vm}.$slots

vmScopedSlots

${this, vm}.$scopedSlots.default({})

vmRefs

${this, vm}.$refs

vmIsServer

${this, vm}.$isServer

vmAttrs

${this, vm}.$attrs

vmListeners

${this, vm}.listeners

vmWatch

${this, vm}.$watch( expOrFn, callback, [options] )

vmSet

${this, vm}.$set( object, key, value )

vmDelete

${this, vm}.$delete( object, key )

vmOn

${this, vm}.$on( event, callback )

vmOnce

${this, vm}.$once( event, callback )

vmOff

${this, vm}.$off( [event, callback] )

vmEmit

${this, vm}.$emit( event, […args] )

vmMount

${this, vm}.$mount( [elementOrSelector] )

vmForceUpdate

${this, vm}.$forceUpdate()

vmNextTick

${this, vm}.$nextTick( callback )

vmDestroy

${this, vm}.$destroy()

renderer

const renderer = require('vue-server-renderer').createRenderer()

createRenderer

createRenderer({ })

preventDefault

preventDefault();

stopPropagation

stopPropagation();

关键字

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

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 Router 代码片段

routerLink

routerView

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

mapGetters

import { mapGetters } from 'vuex'

mapMutations

import { mapMutations } from 'vuex'

mapActions

import { mapActions } from 'vuex'

state

mutations

actions

modules

plugins

dispatch

registerModule

unregisterModule

hotUpdate

关键字

Nuxt.js 代码片段

nuxt

nuxtChild

nuxtLink

asyncData

asyncData() {}

插件设置

你可以在插件的选项中自定义代码格式化的格式，便于定制你的 vue 代码格式，配置参数如下：

vue3snippets.arrowParens

vue3snippets.bracketSpacing

vue3snippets.endOfLine

vue3snippets.htmlWhitespaceSensitivity

vue3snippets.insertPragma

vue3snippets.jsxBracketSameLine

vue3snippets.jsxSingleQuote

vue3snippets.printWidth

vue3snippets.proseWrap

vue3snippets.quoteProps

vue3snippets.requirePragma

vue3snippets.semi

vue3snippets.singleQuote

vue3snippets.tabWidth

vue3snippets.trailingComma

vue3snippets.useTabs

vue3snippets.vueIndentScriptAndStyle

键值

例子

默认值

vue3snippets.printWidth

10/20/30/40/n

vue3snippets.tabWidth

1/2/3/4/n

vue3snippets.singleQuote

false/true

false

vue3snippets.trailingComma

none/es5/all

es5

vue3snippets.bracketSpacing

true

vue3snippets.jsxBracketSameLine

false/true

false

vue3snippets.semi

false/true

true

vue3snippets.requirePragma

false/true

false

vue3snippets.insertPragma

false/true

false

vue3snippets.useTabs

false/true

false

vue3snippets.proseWrap

preserve/always/never

preserve

vue3snippets.arrowParens

avoid/always

always

vue3snippets.jsxSingleQuote

false/true

false

vue3snippets.htmlWhitespaceSensitivity

css/strict/ignore

css

vue3snippets.vueIndentScriptAndStyle

false/true

false

vue3snippets.endOfLine

auto/lf/crlf/cr

vue3snippets.quoteProps

as-needed/consistent/preserve

as-needed

Vue 2/3 详细教程

附赠一些 Vue 中文教程，希望能帮助你快速上手：

感谢

Tencent Alloyteam Team && Qian Feng Team

| [

Eno Yao](https://github.com/Wscats) | [

Aaron Xie](https://github.com/aaron-xie) | [

DK Lan](https://github.com/dk-lan) | [

Yong](https://github.com/flowerField) | [

Li Ting](https://github.com/Liting1) |

Xin | [

Lemon](https://github.com/lemonyyye) | [

Jing](https://github.com/vickySC) | [

Lin](https://github.com/shirley3790) | [

Tian Fly](https://github.com/tiantengfly) |

| - | - | - | - | - | - | - | - | - | - |

希望你能喜欢这个插件！

如果插件能帮助到您，恳请您在商店中给我们一个五星的好评，您的鼓励是我们前进的最大动力，谢谢

2 snippets vue 修改配置_vue-snippets: 支持 Vue 3 的语法高亮，代码格式化和代码提示的 Visual Studio Code 插件。...相关推荐

2 snippets vue 修改配置_Vue - VSCode 基本配置 ESLine Prettier 代碼自動風格化
Vue - VSCode 基本配置 ESLine & Prettier 代碼自動風格化這裡記錄 Vue 初始設定會用到的一些基本設定包括語法亮潔以及代碼自動風格化設定．另外會提到如何在 ...
在Visual Studio Code中配置GO开发环境
一.GO语言安装详情查看:GO语言下载.安装.配置二.GoLang插件介绍对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github ...
Linux操作系统Ubuntu 22.04配置Visual Studio Code与C++代码开发环境的方法
本文介绍在Linux Ubuntu操作系统下,配置Visual Studio Code软件与C++ 代码开发环境的方法. 在文章虚拟机VMware Workstation Pro中配置Linu ...
2 snippets vue 修改配置_VsCode从零开始配置一个属于自己的Vue开发环境
VsCode算是比较热门的一个代码编辑器了,全名Visual Studio Code,微软出品插件众多,功能齐全,平常开发过程中都是用的它,整理了下日常使用的插件及配置供大家参考,废话就不多说了,直 ...
【猿说VUE】Visual Studio Code安装配置
Visual Studio Code安装配置现在使用Visual Studio Code编码的人越来越多,凭借着免费,开源,轻量,跨平台的特点得到了大量开发人员的喜爱.该编辑器也集成了所有一款现代编 ...
Visual Studio Code 配置 gcc
作者:谭九鼎链接:https://www.zhihu.com/question/30315894/answer/154979413 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
【环境配置】Visual Studio Code 如何编写运行 C、C++ 程序？
作者:谭九鼎链接:https://www.zhihu.com/question/30315894/answer/154979413 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
Linux环境中Visual Studio Code 安装配置及其卸载（详细教程）
两篇相关博文: 在VMware15中创建虚拟机安装ubuntu系统(超详细教程) Linux环境编译运行C/C++语言程序----配置gcc.g++(详细教程) 此篇分享我在linux环境下安装VS ...
Visual Studio Code+Vue
参考链接: (一)Vue--如何创建一个Vue项目(完整步骤) - 㭌(mou)七 - 博客园基于Visual Studio Code搭建Vue开发环境初学Vue------使用Vue-cli搭建 ...

2 snippets vue 修改配置_vue-snippets: 支持 Vue 3 的语法高亮，代码格式化和代码提示的 Visual Studio Code 插件。...

2 snippets vue 修改配置_vue-snippets: 支持 Vue 3 的语法高亮，代码格式化和代码提示的 Visual Studio Code 插件。...相关推荐

最新文章

热门文章