以 Vue 為例,如何在 VSCODE 自訂程式碼片段 Code Snippets?

Snippet Generator

好,我習慣用的編輯器是 VSCODE,雖然有安裝一些 Snippets 擴充套件,讓我敲程式碼時比較不會因為打錯浪費時間 debug。但,真正開發時,創建結構時常常都要建立新檔案去切分 component,打幾乎同樣的程式碼有點煩,所以~找了一下該怎麼來設定自己要的程式碼片段。希望有幫助到你:)

一、設定 Setting.json

1-1. command + ,
1-2. 右上角 {},打開自定檔
1-3. 新增以下語法:

// 啟用自訂程式碼樣版
"editor.tabCompletion": "on",

// 如果你跟我一樣,有裝其他的 Snippet,可以將編輯器的權重提高
"editor.snippetSuggestions": "top",

二、在 VSCODE 新增自己的片段

2-1. shift + command + p

2-2. 輸入 "User Snippets",選擇 Preferences:Configure User Snippets

2-3. 選擇語言,可以是 Global,因以 Vue 為例,我選擇 Vue。

有些參數說明,接下來,可以自己去瞭解參數或是使用 Snippets 設定產生工具!

VSCODE 官方說明

三、利用 snippet generator 創造自己的設定檔,感謝大大,快去追蹤他 XD

snippet generator

產生器支援 VSCODE、SUBLIME、ATOM 唷,選擇自己的編輯器來設定吧。

prefix 就是你到時要生成自訂程式碼要輸入的。

{
// 第一次建立的朋友
// 記得產生器產生的設定檔需要放在一個『物件』裡
// 之後可以往下繼續新增你其他的 Snippets
// 將自訂的程式碼設定檔貼在這裡
}

像這樣:

{
"Askie 自訂的 Vue 樣板": {
"prefix": "vuetem",
"body": [
"<template>",
" <section>Hello</section>",
"</template>",
"",
"<script>",
"export default {",
" name: 'Hello',",
" data() {",
" return {};",
" },",
" computed: {},",
" created() {},",
" mounted() {},",
" methods: {},",
" components: {},",
"};",
"</script>",
"",
"<style lang=\"scss\" scoped>",
"</style>",
""
],
"description": "Askie 自訂的 Vue 樣板"
}
}

Easy?
不過我有踩一下雷,就是第一步驟的設定檔,以及最後要將設定內容全放在一個物件中,怕忘了,也感覺新手第一次建立時會遇到問題,所以簡單做個紀錄。

輕鬆地提交 Hexo 部落格的 Sitemap.xml 到 Google Search Console 符合無障礙規範一定要了解!把「通用設計」的思考融入骨子裡

留言