導(dǎo)語

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

webstorm

1. 打開設(shè)置

打開設(shè)置：
File => Settings

2. 安裝vue插件

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

webstorm_1.png

3. 自定義模板

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

webstorm_2.png

4. 參考

給出一份我自己的作為參考，可按自己常用規(guī)則優(yōu)化修改。
其中，${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

在應(yīng)用市場中安裝Vetur

2. 使用

此時，在vue項目中新建.vue文件，然后輸入vue時，按tab鍵則會出來一份默認的模板。由于默認模板涵蓋內(nèi)容過少，因此我們?nèi)孕枰獙R進行自定義模板配置。

3. 自定義模板

1. 打開 文件 => 首選項 => 用戶片段
2. 搜索關(guān)鍵詞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"
    }
}