VSCode怎么用? vscode小白快速入門教程

初次使用命令面板界面概覽交互式演習場命令行的使用
VSCode 入門,今天我們先來聊一下 VS Code 的安裝和更新、VS Code 初次使用的指引界面、語言設(shè)置,以及命令行使用等基礎(chǔ)問題,以便你能快速上手VS Code。
安裝與版本選擇
VS Code 有兩個不同的發(fā)布渠道:一個是我們經(jīng)常使用的穩(wěn)定版(Stable),每個月發(fā)布一個主版本;另外一個發(fā)布渠道叫做 Insiders,每周一到周五 UTC 時間早上6點從最新的代碼發(fā)布一個版本,這也是 VS Code 團隊在使用的版本,目標是可以第一時間用上自己新加的功能并及時發(fā)現(xiàn)問題。微軟內(nèi)部對這個做法還有個專門的名詞,叫做“吃自己的狗糧” (eat your own dog food)。
除去VS Code核心開發(fā)團隊,現(xiàn)在全世界大概還有一萬五千名用戶在使用 Insiders 版本。不過,如果你剛剛接觸 VS Code ,那么穩(wěn)定版本肯定更適合你。但如果你已經(jīng)使用 VS Code 有一段時間,我還是非常推薦你試一試 Insiders ,因為使用這個版本有這樣幾個好處:
你可以盡早使用上最新的功能。一般來說新功能會先在 Insiders 版本里上線,運行一段時間穩(wěn)定后,會隨著當月的穩(wěn)定版本發(fā)布。但如果是改動比較大的功能,比如編輯器網(wǎng)格布局、自定義 Windows 菜單欄,可能會在 Insiders 里運行兩個月才會最終推向所有用戶。
你可以深度參與 VS Code 產(chǎn)品的開發(fā)過程。一個新功能首次被添加到 Insiders 版本時,往往是不成熟的,而你可以在 GitHub 上第一時間反饋你對這個新功能的看法和建議,甚至可以為它貢獻代碼。
下載和安裝 Insiders 版本也很簡單,打開 VS Code 官網(wǎng)(https://code.visualstudio.com),點擊綠色下載按鈕旁的下拉按鈕,就可以針對不同平臺選擇可用的 Insiders 版本了。而且,VS Code 安裝完之后就會自動更新,你并不需要前往官網(wǎng)重新下載。同時,專欄里面使用的 VS Code 版本也將是最新的穩(wěn)定版,這樣便于大家理解。
初次使用
VS Code 第一次啟動后會顯示一個“歡迎使用”的頁面,這個界面主要是方便你快速打開文件、文件夾以及訪問歷史文件,同時還會附帶一些幫助信息,比如“快捷鍵速查表”。
你可以多多點擊和訪問這個界面上的各種鏈接和按鈕,主動發(fā)現(xiàn)和了解你可能感興趣的功能。這里我主要講一下“學習”區(qū)域的三個功能:命令面板、界面概覽和交互式演習場。
命令面板
首先來看命令面板,它是 VS Code 快捷鍵的主要交互界面,你可以通過 F1 或者“Cmd+Shift+P ”(Windows 上是 “Ctrl+Shift+P”) 打開。這里提醒一下,如無特殊說明,我在這個專欄里默認基于macOS平臺進行講解,但也會本著為你提供方便的原則,同時給出Windows或Linux平臺下的操作說明。通過編輯器來實現(xiàn)高效編程的思路是一致的,這和具體的使用平臺無關(guān),所以你大可不必為此擔心。
你可以在命令面板中快速搜索命令并且執(zhí)行。如果你的 VS Code 是簡體中文版,那么你可以在命令面板里使用中文或者英文來搜索命令。VS Code 的絕大多數(shù)命令都可以在命令面板里搜到,所以熟練使用命令面板,你就可以擺脫鼠標,完全通過鍵盤操作來完成全部編碼工作。
界面概覽
第二個是界面概覽,它展示了 VS Code 默認界面里的不同部件的位置、名稱和快捷鍵。VS Code 強調(diào)無鼠標操作,但是對于初學者而言快捷鍵的記憶是個麻煩,這個界面恰好可以幫助你渡過最初的不適應階段。
交互式演習場
第三個是交互式演習場,打開這個界面,你會看到一個全英文的初學者教程,其中通過各種交互示例給出了 VS Code 的核心功能,展示了一些高級代碼編輯功能的使用,每個功能都會有一個代碼片段和編輯器供你實時使用。
這個界面現(xiàn)在還沒有中文版,不過沒有關(guān)系,它里面提到的所有功能我都會在這個專欄中詳細介紹。
命令行的使用
接下來我們看一下命令行的使用。命令行你應該不陌生,我們腦海中的大神級程序員都是可以在Linux中隨意敲打長串的命令,或是與黑客斗智斗勇,或是解決某個緊急的線上問題。而對于VS Code而言,最基礎(chǔ)的命令行當然是讓你能夠不動鼠標,就能快速打開界面了。
如果你是 Windows用戶,安裝并重啟系統(tǒng)后,你就可以在命令行中使用 code
或者 code-insiders
了,如果你希望立刻而不是等待重啟后使用,可以將 VS Code 的安裝目錄添加到系統(tǒng)環(huán)境變量 PATH
中, Windows 64 位下的 VS Code 安裝路徑是 C:\Program FIles\Microsoft VS Code
下。
如果你是在 macOS 上使用,安裝后打開命令面板,搜索Shell 命令:在 PATH 中安裝 “Code” 命令
并執(zhí)行,然后重啟終端模擬就可以了。
如果你是使用 Linux 的話,我相信你一定知道怎么在終端中調(diào)用 VS Code。
接下來,我們看一下 VS Code 的命令行都支持哪些操作,這里我先運行了 code --help
來打印出 VS Code 命令行所支持的所有參數(shù)。
最基本的命令行使用方式是在 code
命令后加上文件或者文件夾的地址,這樣VS Code 就會在一個新窗口中打開這個文件或文件夾。
如果你希望使用已經(jīng)打開的窗口來打開文件,可以在 code
命令后添加參數(shù) -r
來進行窗口的復用。
你也可以使用參數(shù) -g <file:line[:character]>
打開文件,然后滾動到文件中某個特定的行和列,比如輸入 code -r -g package.json:128
命令,你就可以打開 package.json 這個文件,然后自動跳轉(zhuǎn)到 128 行。這個命令可以方便你從終端里快速地在 VS Code 里打開一個文件進行預覽,一個特別常見的例子就是當我們使用腳本執(zhí)行某個命令,這個命令告訴我們某個文件的某一行出現(xiàn)了錯誤,我們就能夠快速定位了。
VS Code 也可以用來比較兩個文件的內(nèi)容,你只需使用 -d
參數(shù),并傳入兩個文件路徑,比如輸入 code -r -d a.txt b.txt
命令,就可以比較a.txt和b.txt兩個文件的內(nèi)容了。有了這個命令,你就可以既使用命令行運行腳本,也可以借助 VS Code 的圖形化界面進行文件內(nèi)容的對比了。
VS Code 命令行除了支持打開磁盤上的文件以外,也接受來自管道中的數(shù)據(jù)。這樣你就可以將原本在命令行中展示的內(nèi)容,實時地展示在 VS Code 里,然后在編輯器中搜索和修改。比如,你可以把當前目錄下所有的文件名都展示在編輯器里,此時只需使用ls | code -
命令。
另外,VS Code 命令行還能夠管理插件,查看 VS Code 的運行情況,記錄和分析 VS Code 運行性能,這些我會在之后的章節(jié)介紹。當然,你也可以現(xiàn)在小試牛刀,試試它的威力。
在我的日常工作中,經(jīng)常會使用終端來操作腳本。這個時候,如果我需要打開 VS Code,使用命令行來打開 VS Code 再方便不過了。
另外 VS Code 的命令行的各個參數(shù),其實能夠定制 VS Code 是怎樣運行的,比如--disable-extensions
、--max-memory
,它們都有特殊的應用場景。當然,如果你發(fā)現(xiàn)了哪個配置是你特別希望默認就打開的,那么你可以在 shell 環(huán)境里創(chuàng)建一個別名 (alias),而不用局限于 code
這個命令。
以上就是vscode小白快速入門教程,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
vscode怎么寫markdown? VSCode編輯Markdown的技巧
vscode怎么比較兩個文件的區(qū)別? vscode對兩個文件內(nèi)容進行對比技巧
VSCode怎么添加IntelliJ IDEA的快捷鍵? VSCode新增快捷鍵擴展的技巧
相關(guān)文章
VS Code標題模式怎么設(shè)置為可執(zhí)行文件?
VS Code標題模式怎么設(shè)置為可執(zhí)行文件?VS Code中標題模式是可以選擇的,該怎么設(shè)置為可執(zhí)行模式呢?下面我們就來看看VSCode設(shè)置標題模式可執(zhí)行文件的方法2022-07-01Vscode如何關(guān)閉警報提示?Vscode關(guān)閉警報提示教程
Vscode是一款實用I的代碼編輯器,支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性,那么我們在使用的時2022-06-30Vscode如何設(shè)置垂直滾動敏感性數(shù)值?Vscode設(shè)置垂直滾動敏感性數(shù)值教程
VSCode是一個運行于 OS X,Windows和 Linux 之上的,針對于編寫現(xiàn)代 WEB 和云應用的跨平臺編輯器,今天咱們就來看看怎么設(shè)置垂直滾動敏感性行數(shù)吧2022-06-30VSCode怎么開啟保留新線? Visual Studio Code設(shè)置保留新線的方法
VSCode怎么開啟保留新線?保留新線在設(shè)置中就可以開啟,具體在哪里呢?下面我們就來看看Visual Studio Code設(shè)置保留新線的方法2022-06-22VS Code怎么關(guān)閉php模板語言標記? VSCode關(guān)閉格式模板設(shè)置的技巧
VS Code怎么關(guān)閉php模板語言標記?在使用VS Code,很多功能都不知道在哪里設(shè)置,下面我們就來看看VSCode關(guān)閉格式模板設(shè)置的技巧,詳細請看下文介紹2022-06-13- VS Code中g(shù)it承諾的時間表日期在哪里設(shè)置?VS Code中配置git的時候,承諾時間表日期默認狀態(tài)是可以更換的,該怎么設(shè)置呢?下面我們就來看看詳細的教程2022-06-13
VS Code怎么設(shè)置全局工具欄? VSCode關(guān)閉全局工具欄的技巧
VS Code怎么設(shè)置全局工具欄?VS Code軟件中的全局工具欄不想要顯示了,可以關(guān)閉,該怎么關(guān)閉呢?下面我們就來看看VSCode關(guān)閉全局工具欄的技巧,詳細請看下文介紹2022-06-10VSCode如何更新? VSCode手動更新與自動更新的設(shè)置方法
VSCode如何更新? VSCode之前設(shè)置過禁止自動更新,如果有版本更新可以自己選擇更或者不更,下面我們就來看看VSCode手動更新與自動更新的設(shè)置方法2022-06-10VSCode怎么設(shè)置保護套? VSCode保護套開啟和關(guān)閉方法
VSCode怎么設(shè)置保護套?經(jīng)常使用VSCode編程開發(fā),有時候需要保護套,該怎么開啟或者關(guān)閉呢?下面我們就來看看VSCode保護套開啟和關(guān)閉方法2022-06-10VSCode鼠標懸停顯示提示框怎么關(guān)? VSCode關(guān)閉顯示鏈接懸停的技巧
VSCode鼠標懸停顯示提示框怎么關(guān)?Visual Studio Code軟件鼠標經(jīng)過代碼,如果有停頓會顯示一個提示框,想要關(guān)閉,該怎么關(guān)閉呢?下面我們就來看看VSCode關(guān)閉顯示鏈接懸停的2022-06-10