按我說的來,讓 VS Code 好用 10 倍 | VS Code 新手指南

2021-02-20 GitHubDaily

想必你也已經聽過身邊不止一個人這麼說。最近的 JS 2019 報告中，VS Code 也是以壓倒性的優勢獲勝第一，其他的編輯器只能被無情碾壓在地上摩擦……但是呢，VS Code 並不是像 PyCharm/WebStorm 那樣開箱即用的，需要額外安裝一些插件、掌握一些快捷鍵和技巧，才能順手的用起來。我們花了一周的時間，為你整理了可能是最全的 VS Code 新手指南，分為快捷鍵速查表、10個超好用插件、新手使用教程三部分，讓小白也能快速上手、效率加倍。先上兩張我們整理的 VS Code 常用快捷鍵的速查表：快捷鍵熟了，才能發現 VS Code 有多方便。真正的大神寫起代碼來那是手不離鍵盤。
🔎Chinese(Simplified) Language Pack for Visual Studio Code
安裝之後一秒漢化 VS code ，再也不用擔心看不懂英文。這是一個不錯的主題插件，不過挑選主題還是看個人，也可以在直接搜索 「theme」能得到很多主題，找到合適自己的。可以放大標記，調整代碼間距，快速格式化代碼，可以讓雜亂的 HTML、CSS、JS代碼瞬間變得整齊，利於他人閱讀，也方便後期維護。設置文件圖標，根據各種類型的文件，設置對應的文件圖標，我們看文件列表的時候，一目了然，能快速找到需要的文件（特別是文件多，類型也多的時候）。光標懸浮在圖片路徑上時，顯示圖片預覽，這樣我們在敲代碼的時候一下子就能知道有沒有引用了正確的圖片或圖標。我們日常敲代碼很多命名都是使用英文單詞，粗心的小夥伴可能會拼錯，這個插件就是單詞拼寫錯時的拯救神器，它可以標誌錯的單詞，還可以提示單詞的正確拼法。有了它，就再也不用因為單詞拼錯找半天的 bug 了做前端開發的時候，我們需要打開瀏覽器進行預覽和調試頁面。這個插件就可以實現靜態、動態頁面的實時預覽，保存就能看見頁面更新，不需要手動去刷新。寫代碼的時候，能提示我們的縮進是否到位，每步交替四種不同的顏色，沒有到位的話顏色變紅，看著代碼整整齊齊的就很舒心。為圓括號，方括號和彎曲的括號提供彩色；相同顏色表示相同級別的括號，孤立的右括號以紅色突出顯示，對寫 JavaScript 的人比較有用。可以把代碼保存成美觀的圖片，主題不同，代碼配色方案也不同，也可以自己設置邊框顏色、大小、陰影，在教程或者文檔中提供代碼示例時挺有用的。VS Code 官方下載地址：https://code.visualstudio.com界面上分為這幾個部分，先整體了解下每個部分是做什麼的然後在 VScode 裡面打開這個文件夾，也可以按快捷鍵 (Command /Ctrl+ O)新建文件（Command/Control + N)，要寫後綴名，VScode 才能識別出來是什麼類型的文件。編輯代碼，保存，用的是上面推薦的 Live Server 插件預覽，安裝插件後，右鍵選擇 " Open with Live Server "打開或點擊右下角的 "Go Live"。這篇乾貨總結寫了很久，也是想把關於 VS Code 你應該知道的一切都在這一篇文章裡告訴你。如果你也感受到了 VS Code 的強大，就趕緊在 2020 年用起來吧！如果你身邊也有使用  VS Code 的小夥伴，歡迎把這篇文章分享給 TA，哪怕對你們有一點點幫助，我就很開心啦 😘

實測兩款 GitHub 開源搶票插件，所有坑我們都幫你踩過了

效果酷炫！開源可視化神器：帶你看盡項目的滄桑變化！

「我的名片可以運行 Linux」

2019 年賺錢最多的 13 個技術崗位

GitHub 熱榜第一：最全中華古詩詞資料庫，收錄30多萬詩詞

相關焦點

  • 我最終還是選擇了VS code!
    強大的遠程開發、豐富的插件、輕量化的編輯器.每一點都讓我覺得它恰到好處。本文，我就來詳細介紹一下vs code的遠程開發並推薦5款我個人認為不錯的插件。一直喜歡的有界面的Pycharm不能用了，xshell自家的Xmanger收費。只能自己安裝xming，設置轉發隧道，用xming顯示Pycharm客戶端。這時候，我覺得也許我可以在探索遠程開發的道路上停下腳步了，但是，這時候我卻遇到了vs code。
  • VS Code安裝及使用基礎教程
    /docs/getstarted/keybindings快捷鍵pdf文檔：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdfvs code 的常用快捷鍵Ctrl + Shit + F 會激活這個工具欄的全局搜索功能Ctrl + F局部搜索, 搜索當前文件中的內容Ctrl + G 輸入行號可以跳轉到指定的行
  • 我最終還是選擇了 VS Code!
    我一直認為vs code是一款名不副實的開發工具，直到它的遠程開發功能吸引我開始慢慢嘗試著使用它、適應它，才慢慢發現它的優秀及強大之處。強大的遠程開發、豐富的插件、輕量化的編輯器.每一點都讓我覺得它恰到好處。本文，我就來詳細介紹一下vs code的遠程開發並推薦5款我個人認為不錯的插件。
  • 15款好用的VS Code插件
    用好 VS Code 插件，不僅能節省你的時間，還能提高工作效率。 VS Code 有個市場，它提供很多插件。開發人員可以把插件安裝到文本編輯器，增強編輯器功能。在視圖菜單中，選擇擴展選項或按下 shift + cmd + X 即可進入市場。善用 VS Code 插件，不僅節省時間，還能提高工作效率，讓你成為更好的開發人員。
  • 15 款好用的 VS Code 插件
    在視圖菜單中，選擇擴展選項或按下 shift + cmd + X 即可進入市場。善用 VS Code 插件，不僅節省時間，還能提高工作效率，讓你成為更好的開發人員。該插件允許我們在更改 IDE 中的代碼時，自動重新加載 Web 頁面。
  • ​這樣配置,讓你的VS Code好用到飛起!
    VS Code是一個開源的跨平臺開發工具，是我目前用的最順手的編輯器。
  • 《計算機科學基礎 I》微課002——vs code運行C++
    ▼ 圖1 vs code官網 ▼vs code的主要機制是通過安裝各類擴展，再配合語言本身的編譯器或者解釋器對編寫的代碼進行處理，相當於是一個「中間商」的角色，因此嚴格的說vs code並不是傳統意義上的ide，這一點和Sublime Text、Atom等是相似的。
  • 如何編寫 VS Code 擴展 | Linux 中國
    生成一個擴展骨架要在全局範圍內安裝並運行 Yeoman 生成器，請在命令提示符或終端中輸入以下內容： npm install -g yo generator-code導航到要生成擴展的文件夾，鍵入以下命令，然後按回車： 根據提示，你必須回答一些關於你的擴展的問題：◈ 你想創建什麼類型的擴展
  • VS Code 中的 Vim 操作 | 無需修改 VSC 默認快捷鍵 | 常用組合與邏輯
    Vim是一種邏輯，而非死記硬背快捷鍵（我還算不上 Vim 愛好者，這句話不是我說的，是 Linux 社區的一些朋友們說的）。vim 中 o 與 O如上，用 o 可以很輕鬆地向下插入一行，而用 O 則是向上插入一行。
  • 學與教|Vs code的keil環境搭建
    本期內容：學與教系列之單片機開發軟體vs code配置，替代keil
  • 從零開始開發 VS Code 插件之 Translator Helper
    好在 VS Code 提供了非常完善的開發文檔，我花了兩三個小時就完成了主要功能的開發。其實對一個完善的插件來說，找 icon、寫文檔、做示例也相當費時間，於是拖到最近才正式發布。我現在的做法是，同時開兩個 VS Code，一個是英文原版的倉庫，一個是中文倉庫，兩邊對照看。
  • 網頁版VS Code來了,特斯拉Xbox手機都能用,隨時隨地寫bug
    甚至有人發現了這個快捷功能：直接在GitHub各種頁面上按下「。」按鍵，就能進入在線編輯界面：不過，也不是不能在瀏覽器上就完成代碼的編譯工作——你可以藉助Codespaces的雲伺服器來付費計算：就比如插件，別看現在少，官方說幾乎每天都有新的在加入～而且大家還能貢獻自己開發的插件，開發規範和發布規則都可去VS Code官網查看。誒？
  • VS Code 裡面還能找女朋友?
    這個 VS Code 插件叫做 vsinder，什麼意思？就是 VS Code + Tinder （一個國外交友軟體）的簡寫，Logo 是這樣的：點擊一下，一上來就要求 Sign-in，這裡是用的 GitHub 來登錄的，點擊之後會跳轉到 vsinder 的 SSO 登錄頁面，GitHub 登錄成功之後就會提示授權成功：
  • VS Code 使用指南
    它將 Chromium 和 Node.js 完美融合，讓開發者能用使用 HTML 來實現 App UI，用 Node.js API 來訪問文件系統。這裡說一個技巧，當我們用 VSC 打開一個文件的時候，VSC 會默認啟動一個新的 VSC 窗口，這樣啟動的時間比較長，我們可以通過設置全局設置項裡的 window.openFilesInNewWindow: false 來使用已經打開的 VSC 實例打開新文件，這樣就幾乎沒有了等待的時間。
  • 10個提高開發效率的 VS Code 快捷鍵!
    Ctrl + Shift + M：快速顯示錯誤和警告(Mac: Cmd + Shift + M)每個人都喜歡沒有 but 的代碼，這個快捷鍵可以幫助我們更好的查看錯誤原因。Ctrl + Shift + L：多光標選擇(Mac: Cmd + Shift + L)添加其他光標以編輯所有當前選中項，通常比進行搜索和替換全部操作更容易出錯。
  • 厭倦了 VS Code?試試 Lite-XL吧
    原文：https://betterprogramming.pub/bored-of-vs-code-try-lite-xl-76d4cb3f8dda我是Visual Studio Code的鐵桿粉絲，已經三年了。
  • 把VS Code打造成Java開發IDE,也挺爽!
    最終，我選定了輕量級的Visual Studio Code（以下簡稱VS Code）。各種IDE選型比較的過程就不贅述了，Eclipse、NetBeans、Srping Tools Suite等等，只能說青菜蘿蔔各有所愛。
  • VS Code 中文社區 Workshop 基礎篇 —— First Step to VS Code
    VS Code 學習資料老師推薦了學習資料：VS Code 官網是一個很好的選擇 https://code.visualstudio.com/；知乎玩轉 VS Code 專欄 https://zhuanlan.zhihu.com/vs-code；VS Code 插件開發樣例- GitHub 上的代碼倉庫 microsoft/vscode-extension-samples
  • VS Code 必知必會的 20 個快捷鍵!
    註：可以在編碼的任何時候使用它，但是我更喜歡在我的代碼寫完的時候格式化一下。這個快捷鍵可以幫你去掉前面和後面多餘的空格，這樣子就可以不用使用嚴格的 Lint 檢查了。如果你使用的是新版本的 VS Code， 你可以在用戶設置頁面設置，如下圖：有些時候，代碼文件非常大，但是你只是想知道代碼的大體邏輯。這個時候代碼摺疊就非常必要。
  • code-server 使用指南:如何在瀏覽器上使用 VS Code
    我平時寫腳本或項目，通常是在 IDE 配好遠程伺服器再同步代碼。但最近同事和我吐槽，他的電腦重裝了系統，導致要重新安裝和配置 IDE。