vscode/webstorm自定義vue模板

導語

在進行vue項目時，我們需要對編譯器進一步配置來支持vue文件以及相關模板語法的高亮顯示等。本文列出關於webstorm和vscode兩種常用編譯器的模板語法配置。

---

webstorm

1. 打開設置

打開設置：
File => Settings

2. 安裝vue插件

在搜索區輸入plugins，或者找到plugins選項，右邊的Marketplace搜索vue，安裝。

3. 自定義模板

有時候我們新建vue文件時默認的模板不是我們想要的，這時可以自定義模板：
還是在設置中，搜索框輸入file and code template或者在設置中找到該選項也行，在右側選擇vue模板，然後在編輯區修改模板即可。如圖

4. 參考

給出一份我自己的作爲參考，可按自己常用規則優化修改。
其中，${COMPONENT_NAME}直接獲取組件名。

<template>
    <div>
        
    </div>
</template>

<script>
    export default {
        name: "${COMPONENT_NAME}",
        props: [],
        components: {

        },
        data () {
            return {

            }
        },
        methods: {

        },
        mounted () {

        }
    }
</script>

<style type="text/scss" lang="scss" scoped>

</style>

---

vscode

1. 安裝Vetur

在應用市場中安裝Vetur

2. 使用

此時，在vue項目中新建.vue文件，然後輸入vue時，按tab鍵則會出來一份默認的模板。由於默認模板涵蓋內容過少，因此我們仍需要對齊進行自定義模板配置。

3. 自定義模板

1. 打開 文件 => 首選項 => 用戶片段
2. 搜索關鍵詞vue
3. 在候選列表中選擇vue.json
4. 在打開的文件中自定義配置即可

如果沒有找到vue.json，可以重啓一下vscode試一下。

4. 參考

給出一份參考

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div>\n",
            "    </div>",
            "</template>\n",
            "<script>",
            "export default {",
            "    props: {\n",
            "    },",
            "    components: {\n",
            "    },",
            "    data() {",
            "        return {\n",
            "        };",
            "    },",
            "    watch: {\n",
            "    },",
            "    methods: {\n",
            "    },",
            "    mounted() {\n",
            "    },",

            "};",
            "</script>\n",
            "<style scoped lang=\"${1:scss}\" type=\"text/scss\">\n",
            "</style>\n",
        ],
        "description": "Create vue template"
    }
}