怎么使用vscode写html5-VSCode-php.cn

Rumah

alat pembangunan

VSCode

怎么使用vscode写html5

Mar 17, 2020 am 09:23 AM

vscode

怎么使用vscode写html5？

自定义html5模板

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

推荐学习：vscode教程

（1）找到html.json文件：点击设置，找到用户代码片段

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

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

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

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

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

Artikel Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas Tag

Kod&IT

Suara

Perniagaan

Pemasaran

Pengesan AI

Chatbot

Reka bentuk&Seni

Artikel Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Tag artikel panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7134

Tutorial Java

1534

Tutorial Laravel

1257

Tutorial PHP

1205

Tutorial CakePHP

1154

Tunjukkan Lagi

Related knowledge

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 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 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 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 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 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 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 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