前端開發 - Vscode軟件前端開發環境構建

vscode是免費開源的,可以直接在官網下載

網址:https://code.visualstudio.com/在這裏插入圖片描述

vscode怎樣設置成中文模式

( a )按快捷鍵Ctrl + Shift + P , 在vscode頂部會出現一個搜索框

在這裏插入圖片描述

( b ) 輸入configure language,然後回車 ,vscode裏面就會打開一個語言配置文件

configure language 配置語言
在這裏插入圖片描述

( c ) 將en修改成zh-cn,按Ctrl + S保存設置,然後重啓該軟件

![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20200520150937472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1Y2hlbmd5aXhpbg==,size_16,color_FFFFFF,t_7

( d ) 結果

在這裏插入圖片描述

創建工作區

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

前端開發必備插件

(1) 安裝插件的方法

在這裏插入圖片描述
在這裏插入圖片描述

(2) vscode-icons

讓 vscode 資源樹目錄加上圖標
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

(3) Live Server

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

有時會遇到Live Server失效的情況

此時瀏覽器不能自動開啓,但手動打開瀏覽器輸入地址有效。
這個問題不易解決,可使用View In Brower代替

(4) View In Brower

在瀏覽器中預覽頁面
在這裏插入圖片描述

(5)Markdown Preview

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章