[{"data":1,"prerenderedAt":405},["ShallowReactive",2],{"blog:\u002Fblog\u002Fvscode\u002Fintro":3},{"id":4,"title":5,"author":6,"body":7,"category":392,"date":393,"description":394,"draft":395,"extension":396,"image":397,"meta":398,"navigation":399,"path":400,"seo":401,"series":397,"seriesOrder":397,"seriesTitle":397,"stem":402,"tags":403,"updatedAt":397,"__hash__":404},"blog\u002Fblog\u002Fvscode\u002Fintro\u002Findex.md","認識 Visual Studio Code","charles",{"type":8,"value":9,"toc":381},"minimark",[10,15,19,22,26,33,44,48,53,72,102,108,112,143,262,299,303,306,309,324,327,331,365,368,377],[11,12,14],"h2",{"id":13},"什麼是-vs-code","什麼是 VS Code",[16,17,18],"p",{},"VS Code 全名為 Visual Studio Code，是由 Microsoft 開發的一款開源程式碼編輯器，支援多種程式語言，並提供豐富的擴充功能，讓開發者可以根據自己的需求進行客製化。",[16,20,21],{},"以單獨編輯檔案而言，VS Code 相對於大型 IDE 更輕量，因此可以快速啟動，並且內建許多方便的快捷鍵。而要進行專案開發時，透過豐富且完備的擴充套件，可以實現客製化 IDE 的效果。",[11,23,25],{"id":24},"vs-code-有多受歡迎","VS Code 有多受歡迎",[16,27,28],{},[29,30],"img",{"alt":31,"src":32},"alt text","\u002Fimages\u002Fblog\u002Fvscode\u002Fintro\u002Fimage.png",[16,34,35,36,43],{},"根據 ",[37,38,42],"a",{"href":39,"rel":40},"https:\u002F\u002Fsurvey.stackoverflow.co\u002F2024\u002Ftechnology#1-integrated-development-environment",[41],"nofollow","Stack Overflow Developer Survey"," 的調查，VS Code 已經蟬聯數年都是輾壓其他 IDE 為最受歡迎程式碼編輯器。",[11,45,47],{"id":46},"安裝-vs-code","安裝 VS Code",[49,50,52],"h3",{"id":51},"ubuntu-以瀏覽器下載安裝-vs-code","Ubuntu 以瀏覽器下載安裝 VS Code",[54,55,56,66,69],"ol",{},[57,58,59,60,65],"li",{},"到 ",[37,61,64],{"href":62,"rel":63},"https:\u002F\u002Fcode.visualstudio.com\u002FDownload",[41],"VS Code 官網"," 下載 deb 檔案。",[57,67,68],{},"開啟 Terminal，切換到下載目錄。",[57,70,71],{},"使用 dpkg 安裝 deb 檔案。",[73,74,79],"pre",{"className":75,"code":76,"language":77,"meta":78,"style":78},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","sudo dpkg -i code_1.94.2-1728494015_amd64.deb\n","bash","",[80,81,82],"code",{"__ignoreMap":78},[83,84,87,91,95,99],"span",{"class":85,"line":86},"line",1,[83,88,90],{"class":89},"sbgvK","sudo",[83,92,94],{"class":93},"s_sjI"," dpkg",[83,96,98],{"class":97},"stzsN"," -i",[83,100,101],{"class":93}," code_1.94.2-1728494015_amd64.deb\n",[103,104,105],"blockquote",{},[16,106,107],{},"請注意，版本號可能會有所不同，請以下載的檔案名稱為準，輸入 code 以 tab 鍵自動補全檔案名稱。",[49,109,111],{"id":110},"ubuntu-以指令安裝-vs-code","Ubuntu 以指令安裝 VS Code",[73,113,115],{"className":75,"code":114,"language":77,"meta":78,"style":78},"echo \"code code\u002Fadd-microsoft-repo boolean true\" | sudo debconf-set-selections\n",[80,116,117],{"__ignoreMap":78},[83,118,119,123,127,130,133,137,140],{"class":85,"line":86},[83,120,122],{"class":121},"sptTA","echo",[83,124,126],{"class":125},"sjJ54"," \"",[83,128,129],{"class":93},"code code\u002Fadd-microsoft-repo boolean true",[83,131,132],{"class":125},"\"",[83,134,136],{"class":135},"smGrS"," |",[83,138,139],{"class":89}," sudo",[83,141,142],{"class":93}," debconf-set-selections\n",[73,144,146],{"className":75,"code":145,"language":77,"meta":78,"style":78},"sudo apt-get install wget gpg\nwget -qO- https:\u002F\u002Fpackages.microsoft.com\u002Fkeys\u002Fmicrosoft.asc | gpg --dearmor > packages.microsoft.gpg\nsudo install -D -o root -g root -m 644 packages.microsoft.gpg \u002Fetc\u002Fapt\u002Fkeyrings\u002Fpackages.microsoft.gpg\necho \"deb [arch=amd64,arm64,armhf signed-by=\u002Fetc\u002Fapt\u002Fkeyrings\u002Fpackages.microsoft.gpg] https:\u002F\u002Fpackages.microsoft.com\u002Frepos\u002Fcode stable main\" |sudo tee \u002Fetc\u002Fapt\u002Fsources.list.d\u002Fvscode.list > \u002Fdev\u002Fnull\nrm -f packages.microsoft.gpg\n",[80,147,148,164,190,224,251],{"__ignoreMap":78},[83,149,150,152,155,158,161],{"class":85,"line":86},[83,151,90],{"class":89},[83,153,154],{"class":93}," apt-get",[83,156,157],{"class":93}," install",[83,159,160],{"class":93}," wget",[83,162,163],{"class":93}," gpg\n",[83,165,167,170,173,176,178,181,184,187],{"class":85,"line":166},2,[83,168,169],{"class":89},"wget",[83,171,172],{"class":97}," -qO-",[83,174,175],{"class":93}," https:\u002F\u002Fpackages.microsoft.com\u002Fkeys\u002Fmicrosoft.asc",[83,177,136],{"class":135},[83,179,180],{"class":89}," gpg",[83,182,183],{"class":97}," --dearmor",[83,185,186],{"class":135}," >",[83,188,189],{"class":93}," packages.microsoft.gpg\n",[83,191,193,195,197,200,203,206,209,211,214,218,221],{"class":85,"line":192},3,[83,194,90],{"class":89},[83,196,157],{"class":93},[83,198,199],{"class":97}," -D",[83,201,202],{"class":97}," -o",[83,204,205],{"class":93}," root",[83,207,208],{"class":97}," -g",[83,210,205],{"class":93},[83,212,213],{"class":97}," -m",[83,215,217],{"class":216},"srdBf"," 644",[83,219,220],{"class":93}," packages.microsoft.gpg",[83,222,223],{"class":93}," \u002Fetc\u002Fapt\u002Fkeyrings\u002Fpackages.microsoft.gpg\n",[83,225,227,229,231,234,236,238,240,243,246,248],{"class":85,"line":226},4,[83,228,122],{"class":121},[83,230,126],{"class":125},[83,232,233],{"class":93},"deb [arch=amd64,arm64,armhf signed-by=\u002Fetc\u002Fapt\u002Fkeyrings\u002Fpackages.microsoft.gpg] https:\u002F\u002Fpackages.microsoft.com\u002Frepos\u002Fcode stable main",[83,235,132],{"class":125},[83,237,136],{"class":135},[83,239,90],{"class":89},[83,241,242],{"class":93}," tee",[83,244,245],{"class":93}," \u002Fetc\u002Fapt\u002Fsources.list.d\u002Fvscode.list",[83,247,186],{"class":135},[83,249,250],{"class":93}," \u002Fdev\u002Fnull\n",[83,252,254,257,260],{"class":85,"line":253},5,[83,255,256],{"class":89},"rm",[83,258,259],{"class":97}," -f",[83,261,189],{"class":93},[73,263,265],{"className":75,"code":264,"language":77,"meta":78,"style":78},"sudo apt install apt-transport-https\nsudo apt update\nsudo apt install code\n",[80,266,267,279,288],{"__ignoreMap":78},[83,268,269,271,274,276],{"class":85,"line":86},[83,270,90],{"class":89},[83,272,273],{"class":93}," apt",[83,275,157],{"class":93},[83,277,278],{"class":93}," apt-transport-https\n",[83,280,281,283,285],{"class":85,"line":166},[83,282,90],{"class":89},[83,284,273],{"class":93},[83,286,287],{"class":93}," update\n",[83,289,290,292,294,296],{"class":85,"line":192},[83,291,90],{"class":89},[83,293,273],{"class":93},[83,295,157],{"class":93},[83,297,298],{"class":93}," code\n",[49,300,302],{"id":301},"windows-安裝-vs-code","Windows 安裝 VS Code",[16,304,305],{},"Windows 安裝相對簡單，除了到官網下載或 Microsoft Store 安裝外，也可以透過 winget 指令安裝。",[16,307,308],{},"打開終端機，輸入以下指令：",[73,310,312],{"className":75,"code":311,"language":77,"meta":78,"style":78},"winget install vscode\n",[80,313,314],{"__ignoreMap":78},[83,315,316,319,321],{"class":85,"line":86},[83,317,318],{"class":89},"winget",[83,320,157],{"class":93},[83,322,323],{"class":93}," vscode\n",[16,325,326],{},"即可完成安裝。",[11,328,330],{"id":329},"vs-code-的進階應用","VS Code 的進階應用",[332,333,334,337,340,347,353,359],"ul",{},[57,335,336],{},"設定檔管理\n設定檔可以記錄你的喜好設定、快捷鍵、Task 工作、snippets 程式碼片段、擴充套件，讓你在不同專案間輕鬆切換，避免在不同專案加載多餘的擴充套件以提升效能。",[57,338,339],{},"設定檔同步與雲端變更\n透過設定檔同步功能，可以將設定檔儲存到雲端，讓你在不同裝置上使用 VS Code 時，可以同步設定檔，不必重新設定。",[57,341,342,343,346],{},"dev container",[344,345],"br",{},"使用 dev container 可以在 docker 容器中開發，不必擔心本機環境的設定，只要有安裝 Docker，即可讓任何電腦、作業系統上的 VS Code 在開啟相同專案時得以確保以完全一致的開發環境進行開發，這對於團隊協作有很大的幫助。",[57,348,349,350,352],{},"連線到遠端主機 (SSH)",[344,351],{},"透過 Remote-SSH 擴充套件，可以在 VS Code 的相同介面直接連線到遠端主機進行開發，開啟目標主機的資料夾，修改其檔案並執行指令。",[57,354,355,356,358],{},"連線到 GitHub Codespace",[344,357],{},"與 Remote-SSH 類似，GitHub Codespace 可以讓你在瀏覽器中開啟 VS Code，並連線到 GitHub 上的專案進行開發。也可以在 VS Code 應用程式中直接開啟連線開發。",[57,360,361,362,364],{},"連線到遠端通道 (Remote Tunnels)",[344,363],{},"透過 Remote Tunnels 擴充套件，可以在 VS Code 中建立遠端通道連線，不必設定 SSH 伺服器，以 GitHub 帳號或 Microsoft 帳號驗證身分，就能讓內外網任何可連網裝置以 VS Code 應用程式或是網頁版 VS Code 進行遠端開發。\n甚至包含用平板、手機以瀏覽器存取完整的 VS Code 功能與擴充套件。",[11,366,367],{"id":367},"參考我的設定檔",[332,369,370],{},[57,371,372],{},[37,373,376],{"href":374,"rel":375},"https:\u002F\u002Fgithub.com\u002FCharles5277\u002Fvscode_setting_config",[41],"設定檔 - GitHub",[378,379,380],"style",{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":78,"searchDepth":192,"depth":192,"links":382},[383,384,385,390,391],{"id":13,"depth":166,"text":14},{"id":24,"depth":166,"text":25},{"id":46,"depth":166,"text":47,"children":386},[387,388,389],{"id":51,"depth":192,"text":52},{"id":110,"depth":192,"text":111},{"id":301,"depth":192,"text":302},{"id":329,"depth":166,"text":330},{"id":367,"depth":166,"text":367},"VS Code","2024-07-13","VS Code 是近年最熱門的程式碼編輯器，本篇將介紹 VS Code 的基本功能及使用方式，並簡介 VS Code 的進階應用。",false,"md",null,{},true,"\u002Fblog\u002Fvscode\u002Fintro",{"title":5,"description":394},"blog\u002Fvscode\u002Fintro\u002Findex",[392],"PkFfevKlyEHKKKlMXcndwA1TOKwMAy5BOEEGVjwNKhU",1780512501742]