使用vscode,新建vue模板

第一步: 新建模板并保存

文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存


第二步: 添加配置,让vscode允许自定义的代码片段提示出来

文件 --> 首选项 --> 设置 ---> 添加这2项

// Specifies the location of snippets in the suggestion widget
"editor.snippetSuggestions": "top",
// Controls whether format on paste is on or off
"editor.formatOnPaste": true


第三步: 复制以下代码,保存重启vscode

{
     "Print to console": {
         "prefix": "vue",
         "body": [
             "<template>",
             " <div class= \" page \" > \n ",
             " </div>",
             "</template> \n ",
             "<script type= \" text/ecmascript-6 \" >",
             "export default {",
             " data() {",
             " return { \n ",
             " }",
             " },",
             " components: { \n ",
             " }",
             "}",
             "</script> \n ",
             "<style scoped lang= \" stylus \" >",
             "</style>",
             "$2"
        ],
         "description": "Log output to console"
    }
}


第四步:测试是否添加成功

测试方法: 新建vue后缀文件,输入vue,按下tab键,OK

猜你喜欢

转载自blog.csdn.net/corey_mengxiaodong/article/details/80312749