VScode是微軟開發的一款輕量級,開源代碼編輯器,可以使用其進行各項前端程序的開發和調試。本文主要面向編程新手提供編程環境搭建的幫助和建議。
1.下載和安裝VSCode
下載
VSCode下載地址:https://code.visualstudio.com/,點擊Download按鈕,選擇適合你計算機操作系統的類型的安裝包下載即可。新購置的計算機大部分都是64位的操作系統,建議下載64位安裝包,部分win7系統是32位的建議下載32位的安裝包。
安裝
VSCode的安裝非常簡單,只要根據軟件安裝提示,點擊“下一步”和完成即可。
2.VSCode漢化
VSCode這款軟件對中文使用這非常友好,我們可以通過安裝中文插件的方式實現軟件的漢化。
在輸入框中輸入“ Chinese (Simplified) Language ”; 回車搜索漢化插件; 找到之後點擊“install” 按鈕安裝即可。我的機器上是已經安裝好了,因此沒有install按鈕。
**【注意】**安裝完成之後,關閉VSCode軟件,重啓即可。注意,如果不重啓漢化的效果是看不到的。
3.安裝打開默認瀏覽器插件
1)打開VScode插件商城
2)在輸入框中輸入“ Open in Browser ”; 回車搜索打開默認瀏覽器插件; 找到之後點擊“install” 按鈕安裝即可。我的機器上是已經安裝好了,因此沒有install按鈕。
安裝完成之後,重啓VSCode,打開一個HTML文件,右鍵鼠標,彈出的菜單欄中會出現“Open Defualt Browser” 打開默認瀏覽器 和“ Open In Other Browsers”打開其他瀏覽器兩個選項。
3)默認瀏覽器修改位Chrome谷歌瀏覽器。
大部分計算機的默認瀏覽器都是IE或者其他瀏覽器。但在進行網頁或者其他前端程序開發時通常推薦使用的都是谷歌Chrome瀏覽器。
修改默認瀏覽器:選擇文件—首選項—設置,在搜索欄輸入open-in-browser.default,出現以下在編輯框中編輯 ,在編輯框中輸入“Chrome”。重啓VSCode,即可。
4.安裝Live Server插件
Live Server插件是一款特別使用的插件,它可以幫我我們實時刷新瀏覽器。當我們修改完HTML代碼之後,只要保存修改,就可以在瀏覽器裏面實時查看修改的效果。
1)打開插件商城
2)搜索“Live Server”插件,安裝
3)Live Server插件安裝成功之後,重啓VSCode,打開一個HTML文件,右鍵鼠標,彈出的菜單欄中會出現“Open with Live Server” 打開默認瀏覽器 和“ Stop Live Server”打開其他瀏覽器兩個選項。
5.使用VSCode創建項目
1)選定一個磁盤目錄創建一個文件夾或者直接使用已有的文件夾。
2)打開VSCode—>文件—>打開文件夾,找到剛剛創建或者需要使用的文件夾,確定就可以在VSCode的左側導航欄中發現引入的文件夾以及裏面已有的文件。
3)創建HTML文件。選定要添加文件的目錄,右鍵“新建文件”,文件命名時需要添加後綴。比如創建HTML文件,應命名爲” XXXX.html“
6.VSCode常用快捷鍵
1) !+enter : 快速生稱html代碼框架
2) shift+alt+向下的方向鍵: 向下複製當前行
3) shift+alt+向上的方向鍵: 向上複製當前行
4) ctrl+S: 保存
5)shift+alt+F: 格式化代碼
6) ctrl+F: 查找和替換