Rumah alat pembangunan VSCode 怎么使用vscode写html5

怎么使用vscode写html5

Mar 17, 2020 am 09:23 AM
vscode

怎么使用vscode写html5?

自定义html5模板

我们每次新建html模板时候,总是感觉太单调,例如我是希望每次新建都自动引入Vue并新建一个空的页面模板,这是是完全可以实现的:

推荐学习:vscode教程

(1)找到html.json文件:点击设置,找到用户代码片段

050b0d49c655f13d06dfd5a7fcc3596.png

 

搜索html,出现html.json文件,点击即可

 833d5b3da1a7f6a424e53f6f13c6da2.png

(2)打开html.json文件后即可自定义设置H5模板

 44ab55503c5c2991e284c1446294c54.png

 

 附上html.json文件配置,直接填入原大括号中即可:

"h5 template": {
        "prefix": "vh", // 对应的是使用这个模板的快捷键
        "body": [
         "<!DOCTYPE html>",
         "<html lang=\"en\">",
         "<head>",
         "\t<meta charset=\"UTF-8\">",
         "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
         "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
         "\t<title>Document</title>",
         "\t<script src=\"./lib/vue-2.4.0.js\"></script>",     
         "</head>\n",
         "<body>",
         "\t<div id =\"app\"> </div>\n",
         "\t<script>",
         "\t //创建Vue实例,得到 ViewModel",
         "\t var vm = new Vue({",
         "\t\tel: '#app',",
         "\t\tdata: {},",
         "\t\tmethods: {}",
         "\t });",
         "\t</script>",
         "</body>\n",
         "</html>"
        ],
        "description": "HT-H5" // 模板的描述
     }
Salin selepas log masuk

 

 转义字符解释:

\t \" \n都是转义字符,而空格就是单纯的空格,输入时可以输入空格

\t 的意思是 横向跳到下一制表符位置 等于 Tab键

\" 的意思是 双引号

\n 的意思是回车换行

Atas ialah kandungan terperinci 怎么使用vscode写html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode May 09, 2024 am 09:37 AM

Bagaimana untuk melihat dokumen perkataan dalam vscode Bagaimana untuk melihat dokumen perkataan dalam vscode

Cara melukis carta alir dengan vscode_Cara melukis carta alir dengan kod visual_studio Cara melukis carta alir dengan vscode_Cara melukis carta alir dengan kod visual_studio Apr 23, 2024 pm 02:13 PM

Cara melukis carta alir dengan vscode_Cara melukis carta alir dengan kod visual_studio

Bagaimana untuk menulis Maude dalam Vscode_Bagaimana untuk menulis Maude dalam Vscode Bagaimana untuk menulis Maude dalam Vscode_Bagaimana untuk menulis Maude dalam Vscode Apr 23, 2024 am 10:25 AM

Bagaimana untuk menulis Maude dalam Vscode_Bagaimana untuk menulis Maude dalam Vscode

Caltech Cina menggunakan AI untuk menumbangkan bukti matematik! Mempercepatkan 5 kali terkejut Tao Zhexuan, 80% langkah matematik adalah automatik sepenuhnya Caltech Cina menggunakan AI untuk menumbangkan bukti matematik! Mempercepatkan 5 kali terkejut Tao Zhexuan, 80% langkah matematik adalah automatik sepenuhnya Apr 23, 2024 pm 03:01 PM

Caltech Cina menggunakan AI untuk menumbangkan bukti matematik! Mempercepatkan 5 kali terkejut Tao Zhexuan, 80% langkah matematik adalah automatik sepenuhnya

Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode May 09, 2024 am 09:52 AM

Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode Bagaimana untuk membolehkan kemas kini latar belakang dalam vscode

Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja May 09, 2024 am 09:43 AM

Bagaimana untuk menambah fail ke vscode ruang kerja Bagaimana untuk menambah fail ke vscode ruang kerja

Bagaimana untuk menetapkan sisipan lancar animasi dalam tutorial VScode VScode untuk menetapkan sisipan lancar animasi Bagaimana untuk menetapkan sisipan lancar animasi dalam tutorial VScode VScode untuk menetapkan sisipan lancar animasi May 09, 2024 am 09:49 AM

Bagaimana untuk menetapkan sisipan lancar animasi dalam tutorial VScode VScode untuk menetapkan sisipan lancar animasi

Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode May 09, 2024 am 10:30 AM

Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode Bagaimana untuk melumpuhkan fail konfigurasi wsl dalam vscode

See all articles