VS code的使用

本文介绍了VSCode这款强大的源代码编辑器,支持多种语言和运行时。分享了如何设置中文插件,以及对于Vue开发推荐的插件LiveServer、Vetur和vue-helper。此外,还展示了如何快速生成Vue模板,包括编写代码片段的步骤和使用方法,提高开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 1 .介绍

  • .VS Code是一个轻量级但功能强大的源代码编辑器,它运行在桌面上,可用于Windows、macOS和Linux。它内置了对JavaScript、TypeScript和Node.js并有丰富的扩展语言的其他语言(如C++,C,java,python,php,go)和运行时(如.NET和Unity)的支持。

2. 插件

(一).中文设置  按键按"Ctrl+Shift+X";然后在左侧"扩展"视图文本框中输入"Language Packs",安装中文插件。

如图:

(二). vue的开发,安装的插件有:Live Server、Vetur、vue-helper。

如图:

       

3. 快速生成代码

点击设置,点击进入用户代码片段,输入html就可以快速生成vue模板

如何编写呢?

1.双引号需要替换   \ 替换 \”

2.代码前后需要双引号  

方法:前面双引号  按住鼠标滑轮下拉可以添加

      后面双引号  点击END跳到后面了

3.后面需要添加逗号

代码:

    "快速生成vue模板":{

       //配置简写

       "prefix": "vue",

       //如果有一行,可以是字符串

       //如果是多行,需要时数组

       "body": [

           "<!DOCTYPE html>",

           "<html lang=\"en\">",

           "<head>",

           "    <meta charset=\"UTF-8\">",

              "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",

           "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

           "    <title>Document</title>",

           "</head>",

           "<body>",

           "    <div id=\"app\">",

           "<p>{{msg}}</p>",

           "    </div>",

           "<script src=\"vue.js\"></script>",

           "",

           "<script>",

           "    const vm = new Vue ({",

           "        el:'#app',",

           "        data:{",

           "            msg:'防守打法',",

           "          ",

           "        },",

           "    })",

           "</script>",

           "</body>",

           "</html>"

       ]

使用方法:在页面输入vue就可以快速生成vue模板。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值