简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > alat pembangunan > VSCode > teks badan

vscode如何实现实时预览效果

王林
Lepaskan： 2020-01-10 10:00:40
asal
11789 orang telah melayarinya

vscode如何实现实时预览效果

1、打开VScode，点击【扩展】，在搜索框中输入Live Server，在搜索结果中找到如下插件，选择安装

bcf7b72f33d81c4f2bd1f67f4137aa4.png

2、安装完成后重启软件，使插件生效

3、重启过之后，新建一个工作区（也可以直接拖一个文件夹到vscode中），在这里创建一个HTML文件做测试，注意单独新建一个HTML文件拖动到IDE中是使用不了Live Server的，需要把这个HTML文件放到创建的工作区(文件夹)中，新建完成后我们可以在状态栏上看到一个Go Live，单击会自动打开浏览器并显示

提示：如果之前也有HTML项目，直接把项目根文件夹拖动到VScode中就会自动添加到工作区

2358364d0ff200ad98cb86baf712cc0.png

1497032592fb24ee9fec99b662c87b5.png

4、如果没有状态栏上，也可以在文件上单击右键，选择Open With Live Server这一项

4fe5b1d24486daae0ac604a064fdfb9.png

5、接下来修改代码，只需要ctrl+S保存修改后的代码，浏览器即可自动刷新

20df32ec9d964275ce82b47cd834e4e.png

相关文章教程推荐：vscode教程

Atas ialah kandungan terperinci vscode如何实现实时预览效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
vscode 实现 效果
sumber：php.cn
Artikel sebelumnya：vscode如何取消标签提示下划线 Artikel seterusnya：vscode如何更换代码编辑框背景
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 terbaru oleh pengarang
Isu terkini
kaedah routeAreCached() dalam Laravel tidak ditentukan Tolong beri saya sedikit bantuan. Saya cuba menyediakan pasport untuk aplikasi Laravel say...
daripada 2023-11-08 18:45:24
0
2
181
"'vue-cli-service@latest' tiada daripada pendaftaran Windows npm tetapi berfungsi dengan baik dalam WSL" Saya mempunyai aplikasi Vue yang saya cuba jalankan menggunakan npmrunstart, tetapi apabil...
daripada 2023-11-07 10:01:47
0
1
290
Kod Visual Studio Intellisense dan autolengkap - Vite, JSconfig dan alias - tidak dapat mengetahui kombinasi yang betul Baru mula bekerja dengan Visual Studio Code sekali lagi selepas bertahun-tahun menggunakan...
daripada 2023-11-04 16:37:58
0
1
250
Mencipta aplikasi Next.js dalam Kod VS tidak mempunyai folder Halaman atau Gaya Apabila mencipta aplikasi Next.js dalam VSCode, saya menjalankan arahan berikut: "npx...
daripada 2023-11-03 11:53:11
0
1
260
Vuejs - Titik putus tidak ditetapkan dalam VSCODE Saya cuba menyahpepijat vuejs menggunakan vscode, saya telah mencuba banyak tutorial/jawap...
daripada 2023-11-02 15:53:39
0
2
292
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！