VSCode 的安裝與配置

轉(zhuǎn)載:http://www.itdecent.cn/p/18f5c2ab578e

安裝

官網(wǎng)下載安裝包

安裝時(shí)把以下選項(xiàng)選中:

使用

找個(gè)地方新建一個(gè)目錄(目錄名不要中文),假設(shè)目錄名為 vs-demo

右鍵點(diǎn)擊該目錄,open with code

使用Ctrl+Shift+E打開資源管理器,在 vs-demo 目錄里新建 HTML 文件,文件名為 index.html

在 index.html 依次輸入:英文感嘆號、回車 鍵,即可看到一個(gè)完整的 HTML 頁面

由于 vscode 時(shí)常更新,如果回車鍵不行,就試試Tab鍵

這種快捷寫法叫做 Emmet,目前所有的前端編輯器都支持 Emmet。

關(guān)于 Emmet 的更多快捷寫法,見:

官網(wǎng)的視頻介紹

Emmet 作弊表

配置

VSCode 的配置方式就寫編輯一個(gè)配置文件,打開「文件 - 首選項(xiàng) - 設(shè)置」,對應(yīng)快捷鍵為Ctrl + ,

左側(cè)為系統(tǒng)默認(rèn)配置項(xiàng),右側(cè)為你要覆蓋的配置項(xiàng)。把你要修改的項(xiàng)從左邊拷貝到右邊,然后保存,即可生效。

設(shè)置字體與字號

在右側(cè)文件中添加一行(注意末尾要有英文逗號)

"editor.fontSize": 18,

保存,字號就變大了。

設(shè)置字體也是類似,添加

"editor.fontFamily": "Consolas, 'Courier New', monospace",

即可將字體設(shè)置為你想要的。這里推薦「10大最適合編程的字體推薦下載」,夠你玩一上午了。我用的編程字體一般是Source Code Pro和M Plus這兩款。

其實(shí) VSCode 默認(rèn)的配置就挺好的。

插件安裝

VSCode 自帶 Emmet、Git 繼承和 JS 調(diào)試功能,已經(jīng)十分完善了,但是還是有一些特殊的需求,這個(gè)時(shí)候我們就可以安裝第三方插件了。由于第三方插件不是微軟生產(chǎn)的,所以質(zhì)量良莠不齊,請注意甄別。

安裝 open in browser

按Ctrl + Shift + X打開擴(kuò)展面板,然后輸入open in browser,點(diǎn)擊第一個(gè)結(jié)果的「安裝」按鈕,稍等片刻就安裝好了(相比之下 Sublime 的插件安裝體驗(yàn)就差很多)。

然后你在任意 HTML 文件右鍵,就可以看到Open In Default Browser這個(gè)按鈕了,點(diǎn)就試試看。

Git 操作

要在 VSCode 里面操作 Git,前提是你已經(jīng)配置好了 Git,如果你沒有配置過,那么就在 Git Bash 里輸入以下命令:

git config--globaluser.name 你的英文名git config--globaluser.email 你的郵箱git config--globalpush.defaultmatching git config--globalcore.quotepathfalsegit config--globalcore.editor"vim"

然后你就愉快地使用 VSCode 的 Git 功能了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 安裝 從官網(wǎng)下載安裝包 安裝時(shí)把以下選項(xiàng)選中: 使用 找個(gè)地方新建一個(gè)目錄(目錄名不要中文),假設(shè)目錄名為 vs-...
    鷓鴣少閱讀 32,442評論 0 6
  • 一直以來,大家對開發(fā)的代碼編輯器都沒有一個(gè)最好的選擇,而vscode是我發(fā)現(xiàn)速度相對快,對于新版的html css...
    云翼飛閱讀 11,300評論 0 2
  • VSCode 安裝1.從官網(wǎng)下載安裝包安裝時(shí)把以下選項(xiàng)選中:image.png 使用1.找個(gè)地方新建一個(gè)目錄(目錄...
    浮云都想對你說閱讀 559評論 0 1
  • 1.一份工作代表現(xiàn)在的水平深淺,持續(xù)耕耘
    道馬閱讀 228評論 0 0
  • 感情里的等待,總是一種漫長而曲折的過程。 敏敏是個(gè)活潑好玩的女生,阿俊則文藝安靜。朋友們都知道,阿俊一直默默的喜歡...
    小朋友嘿哈閱讀 181評論 0 1

友情鏈接更多精彩內(nèi)容