VScode新建自定義模板快捷方式

VS新建vue文件的自定義模板

在使用vscode開發的時候,新建vue文件是不可或缺的,但是VSCode并沒有vue文件的初始化模板,這個需要自定義模板。
我們可以使用vscodesnippets在新建.vue?文件后輕松獲得一套模板。

具體步驟

  • 打開VSCode?-> “文件(mac機選Code)” -> “首選項” -> "用戶代碼片段”,然后會打開一個彈框。
  • 在彈框中選擇"新建代碼片段"新建一個全局代碼片段文件,自定義名稱保存后,VS編輯器就會打開這個文件。
    在這里插入圖片描述
  • 然后復制以下內容覆蓋文件內容。
{// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the// same ids are connected.// Example:// "Print to console": {//  "prefix": "log",//  "body": [//      "console.log('$1');",//      "$2"//  ],//  "description": "Log output to console"// }"Create vue template": {"prefix": "vue","body": ["<template>","  <div></div>","</template>","<script>","export default {","  name: \"${1:component_name}\",","  data () {","   return {}","  },","   methods:{}","}","</script>","<style lang=\"${2:scss}\" scoped>","</style>"],"description": "Create vue template"}
}

prefix?表示對應生成代碼塊的命令(我設置的是vue
然后將文件保存關閉。

  • 然后新建一個.vue文件
    在新建的.vue的文件中輸入vue回車,然后就會生成初始化代碼塊。
    在這里插入圖片描述
  • 生成初始化模板如圖:
    具體參數可以根據實際修改,此處我是用的是scss預處理語言
    在這里插入圖片描述

注意:

步驟二還有一個方法(方法二: 在彈框中搜索vue,選中vue.json,在vue.json中編輯自定義模板)

  • 新建全局代碼片段的好處就是,在非vue文件中輸入vue命令都能新建出vue初始化代碼模板。
  • 如果是vue.json文件中定義初始化代碼模板的話,就只能在.vue文件中vue命令才會有效。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247346.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247346.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247346.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ESLint Unary operator ‘++‘ used.

ESLint Unary operator used. 安裝了ESLint&#xff0c;用這個工具之后發現居然不會寫代碼了。好尷尬~ 感覺自己以前寫的JS都是假的... 沒有操作 increment(state) {state.count ; },for(let i 0; i < temp.length; i} {//... } 然后報了如下錯誤 Unary operator u…

sencha touch筆記(6)——路由控制(1)

做項目的時候在界面的跳轉上遇到了挺大的問題&#xff0c;本來跳轉不想通過路由來控制的&#xff0c;沒辦法&#xff0c;只能再去看一下路由的跳轉方式了。 應用程序的界面發生改變后&#xff0c;可以通過路由讓應用程序的界面返回到改變之前的狀態&#xff0c;例如瀏覽器中頁面…

Angular rxjs operators 筆記

toArray /*toArray把結果都塞到數組里去 */ const source = interval(1000); const example = source.pipe(take(10),toArray() );example.subscribe(val => console.log(val)); // output: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] toArray /*pairwise把相鄰的兩個流組成數組 */…

Angular rxjs Subject筆記

BehaviorSubject /*ehaviorSubject接受一個默認參數,相當于new Subject后自動next(aa)之后到行為和Subject一致 */ const behave = new BehaviorSubject(aa); behave.subscribe(res => {console.log(res)

面試39 MySQL讀寫分離

&#xff08;1&#xff09;如何實現mysql的讀寫分離&#xff1f; 其實很簡單&#xff0c;就是基于主從復制架構&#xff0c;簡單來說&#xff0c;就搞一個主庫&#xff0c;掛多個從庫&#xff0c;然后我們就單單只是寫主庫&#xff0c;然后主庫會自動把數據給同步到從庫上去。 …

Angular自學筆記(一)ngModule 元數據

工作硬上開發angular項目,好難啊,上網搜資料教程真的賊少,吐槽真的沒什么人用angular,自己學習到處搜集整理的筆記,分享出來,方便查看理解總結。應該適用于angular11系列(更新真快,反正我也不知道之前低版本不同 手動狗頭) 什么是angular module(ngModule)? angula…

cookbook_數據結構和算法

1.1將數據分解為單獨的變量list_a [1,2,3,4,5,6,7,8,9] a,b,c,d,e,f,g,h,i list_a print(a,b,c,d,e,f,g,h,i) #使用相等數量的參數來接收_,b,c,d,e,f,g,h,_ list_a print(b,c,d,e,f,g,h) #不要的數據使用一個沒有用的變量接收 View Code1.2從任意長度的可迭代對象中分解元素…

Angular自學筆記(二)顯示數據 綁定屬性

顯示數據 1.顯示數據 ng的模版中,默認用雙大括號{{}}綁定組件中的變量顯示出來 import {Component } from @angular/core; @Component({selector: app-root,template: `<h1>{{title}}</h1><h2>My favorite hero is: {{myHero}}</h2>`

機器學習概覽

什么是機器學習&#xff1f; 廣義概念&#xff1a; 機器學習是讓計算機具有學習的能力&#xff0c;無需明確的編程 —— 亞瑟薩繆爾&#xff0c;1959 工程概念&#xff1a; 計算機程序利用經驗 E 學習任務 T&#xff0c;性能是 P&#xff0c;如果針對任務 T 的性能 P 隨著經驗 …

Angular自學筆記(?)TemplateRef和ViewContainerRef

ElementRef 由于ng是跨平臺的為了減少視圖層和渲染層的耦合也為了讓ng更適應多平臺,ng幫我們封裝了ElementRef,我們可以通過ElementRef拿到native元素(在瀏覽器中也就是我們常說的DOM元素) 下面我們看一段代碼 import {Component, ElementRef, AfterViewInit } from @angu…

python之re模塊

re模塊 re&#xff08;正則&#xff09;簡介 ? 正則就是用一些具有特殊含義的符號組合到一起&#xff08;稱為正則表達式&#xff09;來描述字符或者字符串的方法。或者說&#xff1a;正則就是用來描述一類事物的規則。 re元字符 元字符匹配內容\w匹配字母&#xff08;包含中文…

Angular自學筆記(?)ViewChild和ViewChildren

ViewChild 最好在ngAfterViewInit之后,獲取模版上的內容 獲取普通dom import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from @angular/core;@Component({selector: app-view-child

IPropertySet接口

Members AllProperties MethodsDescriptionCountThe number of properties contained in the property set.包含屬性個數GetAllPropertiesThe name and value of all the properties in the property set.GetPropertiesThe values of the specified properties.GetPropertyThe …

Angular自學筆記(?)ContentChild和ContentChildren

ContentChild 用法類似ViewChild, 獲取投影中到組件或指令還有元素dom等 獲取投影中但組件 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from @angular/core;@Component({selector: app-content-child-panel,templateUrl

Angular自學筆記(?)屬性型指令

基本概念 用于改變DOM元素的外觀或行為的指令 組件是一種特殊的指令 import {Component} from @angular/core; @Component({selector: app-root,template: `<!--<app-for></app-for>--><div app-for>dasfsada</div>`,

SNS編年史

準備起草。轉載于:https://www.cnblogs.com/cmleung/archive/2009/11/26/1611546.html

Angular自學筆記(?)結構型指令

內置指令的展開寫法 ngIf import {Component } from @angular/core; @Component({selector: app-root,template: `<button (click)="show = !show">toggle</button><p *ngIf="show as aa">一段文字 {{ aa }}</p><ng-template…

SQL on and 和 on where 的區別

on and 和 on where 的 區別 在使用 left join 時, on and 和 on where 會有區別&#xff1b;1. on的條件是在連接生成臨時表時使用的條件,以左表為基準 ,不管on中的條件真否,都會返回左表中的記錄  on 后面 and 都是對右表進行篩選 2.where是全部連接完后&#xff0c;對臨時…

:host :host-context ::ng-deep詳解

:host 與 ::ng-deep :host 表示選擇當前的組件。 ::ng-deep 可以忽略中間className的嵌套層級關系。直接找到你要修改的className。 在使用一些第三方的組件的時候&#xff0c;要修改組件的樣式。 這種情況下使用: :host ::ng-deep .className{新的樣式...... } :host {backg…

Java生鮮電商平臺-緩存架構實戰

Java生鮮電商平臺-緩存架構實戰 說明&#xff1a;在Java生鮮電商中&#xff0c;緩存起到了非常重要的作用&#xff0c;目前整個項目中才用的是redis做分布式緩存. 緩存集群 緩存集群存在的問題 1.熱key 緩存集群中的某個key瞬間被數萬甚至十萬的并發請求打爆。 2.大value 某個k…