vscode 快速生成html模板代码的几种方式

谁践踏了优雅 2023-09-27 09:32 27阅读 0赞

## 前言 ##

最近在用vscode学习前端，发现每次新建一个文件夹都要编写h5的基本标签，很麻烦，就想着能不能像IDEA一样可以自定义设置模板

![在这里插入图片描述][7c02c8ec10a84b4da520813f3238d56b.png]

经我搜索发现，是我想的多余了，vscode以及帮我们配置好了，我们只需要直接去使用即可，无需任何多余的操作

## 准备工作 ##

首先你需要新建一个html页面

![在这里插入图片描述][6bb3b93a7b1a429a9c1e385dab54beb3.png]

## 生成方式1 ##

在右侧编辑区输入！ 然后回车  
![在这里插入图片描述][7ed80d023f01436f899d6257a832ea39.png]  
就会自动帮我们填充代码，效果如下  
![在这里插入图片描述][3769f6d1010640928d3d3f4644fcd4c5.png]

<!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>
        
    </body>
    </html>

## 生成方式2 ##

和第一种方式类似 这次输入html:5  
![在这里插入图片描述][e95a80ccd2bf484a9cfaf0a48c0e0427.png]  
效果也是一样的  
![在这里插入图片描述][3f47cf6e0eda45e88224fddfc0da0ea2.png]

## 结语 ##

确实挺方便强大的，记录下

个人觉得这个模板就够了，如果后面需要更换或者自定义模板，再更新

[7c02c8ec10a84b4da520813f3238d56b.png]: https://img-blog.csdnimg.cn/7c02c8ec10a84b4da520813f3238d56b.png
[6bb3b93a7b1a429a9c1e385dab54beb3.png]: https://img-blog.csdnimg.cn/6bb3b93a7b1a429a9c1e385dab54beb3.png
[7ed80d023f01436f899d6257a832ea39.png]: https://img-blog.csdnimg.cn/7ed80d023f01436f899d6257a832ea39.png
[3769f6d1010640928d3d3f4644fcd4c5.png]: https://img-blog.csdnimg.cn/3769f6d1010640928d3d3f4644fcd4c5.png
[e95a80ccd2bf484a9cfaf0a48c0e0427.png]: https://img-blog.csdnimg.cn/e95a80ccd2bf484a9cfaf0a48c0e0427.png
[3f47cf6e0eda45e88224fddfc0da0ea2.png]: https://img-blog.csdnimg.cn/3f47cf6e0eda45e88224fddfc0da0ea2.png