提高 VSCode 寫代碼效率的技巧

2021-12-29 算法愛好者

VSCode 是我們寫代碼常用的編輯器,它的功能很多,但其實我們有很多功能都沒用到,這篇文章就是想梳理下那些可能你不知道的但是卻對效率提高很有幫助的一些技巧。

包括:

一鍵執行 npm scripts

執行 npm scripts 需要在命令行?那是你沒用過 vscode 自帶的這個功能。

vscode 會掃描所有的 npm scripts,然後列出來,直接點擊 run 就會打開 terminal 來跑,而且高版本 vscode 還可以直接 debug 來跑。

根本不需要自己輸入 npm run xxx。

在側欄打開文件

當打開文件的時候,默認會在當前編輯器打開,如果想新開一個編輯器打開呢?這時候可以按住 option 再點擊文件,就會新開一個編輯器打開文件了。

因為默認 vscode 都是在當前編輯器打開新文件,如果不知道按住 option 點擊可以新開編輯器,還是挺麻煩的事情。

更強大的搜索

搜索這個面板有個按鈕可能很多同學都沒注意到過,點擊之後會打開搜索頁面來搜索,可以預覽的搜索結果更豐富,行數更多。

比如我搜索一個 @babel/core:

看,是不是比在左側那個小框裡顯示的更多。

對比一下就可以看出來,還是在右邊搜索結果更清晰一些,因為會顯示多行。

文件 diff 顯示目錄信息

當我們改了多個文件的時候,會列在 source control 面板的列表裡,有多個同名文件的時候特別不直觀。

這時候其實可以切換成 tree view 的,顯示目錄樹。

當有多個同名文件的時候,這樣會清晰的多:

編輯器一鍵預覽 markdown

markdown 需要安裝插件麼?不需要,vscode 本身就內置了這個功能。

右上角有個預覽按鈕,點擊就會打開 markdown 預覽界面,按住 option 再點擊,則是同個窗口打開預覽。

預覽之後再點擊 show source 按鈕就會回去

編輯區一鍵 diff快速切換 diff 和文件編輯視圖

當改了文件內容的時候,可以點擊編輯區右上角的按鈕,直接打開 diff,可能很多同學都沒注意到這些按鈕,但其實是很有用的。

再次點擊就可以回到文件編輯狀態

看功能描述 open changes、open files,很明顯就是用於 diff 視圖和文件編輯視圖的切換。

diff 視圖快速在 diff 之間跳轉

當文件內容特別多,比如好幾千行的時候,要找 diff 還是比較麻煩的。其實根本不用自己去找,還容易漏,vscode 編輯器提供了上下按鈕,可以直接跳到上一個 diff、下一個 diff

一鍵預覽、一鍵 diff,這些都是能提高效率的功能。

快速搜索功能入口

知道 vscode 有某個功能但是不知道入口在哪?直接用 help下面的搜索框,搜索結果會直接標出來在哪個菜單下有什麼按鈕。

編輯快捷鍵

編輯器最主要的功能還是編輯,但其實有很多 vscode 的強大編輯功能大家可能沒有過,我來羅列一下。

行上下移動/複製

如果把一行內容上移下移怎麼做?

手動剪切粘貼的效率太低了,不如試下 option + 上/下 的快捷鍵,快速把一行內容上下移動。

移動的時候想複製呢?再按住 shift 就行了。

快速刪除行

我們知道了如何快速複製行,那快速刪除行呢?

按 command + shift + k 就好了。

如果刪除多行,那麼先選中,再按 command + shift + k。

多光標同時編輯

同時修改多個地方的內容?按住 option 點擊要修改的地方就可以了。

如果是上下行的同一位置呢?那就 option + command + 上/下,這樣就是添加多行的同一位置的光標。

comand + shift + p 相關

這可能是大家都知道的一個快捷鍵,輸入框中會有一個 > 代表後面是命令,但還有一些大家可能不知道。

比如直接 command + p,不按 shift,這時候就是搜索文件。

比如直接按 ctrl + g,或者在輸入框輸入冒號就代表後面是跳轉的行號,可以快速跳到某一行

當然搜索文件的時候也可以加冒號和行號,快速跳到該文件的那一行。

快速切換大小寫

還有一個小功能,有個內置的 upppercase、lowercase 的切換功能,可以快速切換選中內容的大小寫。

總結

本文梳理了 vscode 中那些可以提效的一些功能,大家可能沒有注意到過。

熟悉了這些功能的使用,相信會給我們日常開發提升一些效率,學習下每天寫代碼的工具的使用技巧還是挺有意義的。

- EOF -

覺得本文有幫助?請分享給更多人

推薦關注「算法愛好者」,修煉編程內功

點讚和在看就是最大的支持❤️

相關焦點

  • 強力推薦提高開發效率 VSCode 的插件!
    現在大部分做前端開發,基本都在使用 vscode 吧;這裡推薦一下我常用的提高工作效率的插件。主題1.代碼片段1. JavaScript (ES6) code snippets主要是 ES6 的代碼片段,很實用。2.
  • 使用代碼片段的正確姿勢,打造高效的vscode開發環境
    在完成一個項目以後,往往都會寫出許多有價值的代碼,或是絞盡腦汁解決的難題,或是靈光一現的小技巧,又或是需要給組裡的人分享經驗,分享代碼。對於我而言,我有時確實會把足夠酷炫或者自豪的項目封裝成一個包(例如npm或者是nuget等等),但面對粒度再小一點的一個function甚至是一行代碼就不太合適了。
  • vscode入門:熟悉vscode和初級配置
    提高效率需要藉助於合適的工具,更需要自己熟練使用,積累久了便可自成體系風格。登錄vscode官網,下載對應平臺的安裝包安裝即可,下載安裝的過程中可以了解一下release notes,看看官方文檔。默認是英文界面,可以修改成中文(初期為了熟悉工具,最好使用熟悉的語言,英語大神可以跳過這一步)。點擊界面左下角的設置按鈕,選擇最上面的Command Palette...
  • vscode寫Python數據處理分析代碼,由安裝配置到cell交互模式
    因此我決定寫幾篇 Python 數據處理分析必備的入門知識系列文章,以幫助有需要的小夥伴們更好入門。系列相關文章: Python玩數據入門必備系列:環境安裝前言上一節我們已經安裝了 Python ,但是我們不希望直接在黑烏烏的命令窗口或白茫茫的記事本中寫代碼,本文主要介紹 vs code 的安裝、配置以及 cell 交互模式安裝 vs code首先,一樣使用以下搜尋引擎:搜索關鍵字 "vscode"點擊第一個搜索結果的
  • 眾所周知,擁有了vscode就擁有了一切
    常規用法vscode 寫代碼支持各種流行的程式語言,包括c++, Java, js等等。通過相應的插件你甚至能夠對它們進行編澤運行。Remotessh -遠程連接工具這是我經常使用並且必不可少的辦公工具,可以連接到伺服器進行相關的工作,通過它可以直接進行伺服器上的代碼編寫調試等等操作。
  • 這是一個在你寫代碼時瘋狂稱讚你的 VSCode 插件
    VSCode Rainbow Fart ,一款在你編程時持續誇你寫的牛逼的這個插件會根據你寫的代碼的不同,誇的也不同。真人萌妹子的語音,誇的節奏也很真實。真實程式設計師鼓勵師!詳情請看視頻,相信你看完一定會轉發的。我已安裝上了,其中有一部分會有嘲諷,也不是全部都是誇你,比如你寫了很多if,會聽到 「你就是想太多如果,才找不到女朋友吧」,還有一部分並沒有觸發誇誇。哈哈,就當是編程的一種樂趣吧。
  • 12 個我最喜歡的 VSCode 擴展
    VSCode之所以能成為如此出色的代碼編輯器,其原因之一是由社區創建的龐大的擴展庫,可以大大提高開發人員的工作效率。以下是一些我最喜歡的VSCode擴展。1. Rainbow Brackets這個簡單的擴展可以使代碼裡括號的顏色變得豐富多彩,以便我們輕鬆找到匹配對。
  • 這幾個編程小技巧,讓你代碼效率提高一個檔次
    今天CoCo醬給大家介紹幾個編程小技巧讓你的代碼迅速提高檔次 1 for循環變量初始化在c語言中,我們常常這樣使用for語句:for (int i = 0; i < strlen(s); i++)這看起來似乎很完美
  • 2020 vscode 好用的十佳擴展
    vscode作為免費開源的文本編輯器,它已經越來越受開發者喜愛。因為豐富的插件,它可以媲美IDE,同時它還有著不俗的啟動速度,可以說它是一款披著文本編輯器的IDE一點也不為過。vscode有著無數的插件,今天我們就來盤點一下2020年vscode相對來說非常好用的十佳擴展。Import Cost在開發過程中,我們可能經常會發現自己在項目中添加了依賴項。儘管模塊化開發已成為當今軟體開發的關鍵部分,但最好還是確保對依賴的過度依賴。
  • 我最喜歡的 12 個VSCode 插件!
    VSCode 之所以是如此出色的代碼編輯器,其原因之一是由社區創建的龐大的插件庫,從而提高了開發人員的工作效率。以下是一些我最喜歡的VSCode 插件。1. Rainbow Brackets地址:https://marketplace.visualstudio.com/items?
  • 2019年JavaScript開發者必備的10個vscode插件
    VSCode現在前端圈特別火爆,基本人手一件,那麼選擇一個好的插件能夠幫我們提高開發效率,和開發體驗。今天給大家推薦的這個10個插件希望對大家有所幫助。之前我們還熱衷使用Atom,webstorm,在前兩年的時候改用了vscode,感覺非常好,性能也不錯。而且vscode的社區和市場也日漸強大,這也是我選擇vscode的原因之一。
  • 誰會不愛讓代碼騷裡騷氣的VSCode擴展插件呢?
    所以今天,筆者打算寫一寫自己用過的VS Code擴展插件,它們不僅能提高你的生產力,還能讓你寫出騷裡騷氣的代碼。  本文分為兩部分介紹,一是提高生產力的擴展插件,二是編程格式擴展插件。既然一會兒要談到格式,先讓大家看看筆者的VS Code長什麼樣:
  • 2021 精選15+VSCode插件推薦
    Tabnine - 人工智慧助手是一款人工智慧代碼完成工具,AI 代碼片段、代碼建議、代碼預測、代碼提示,PRO每個月12刀,支持洞察與分析、公共代碼的高級完成、定製選項等,窮還沒體驗過。這款插件支持駝峰、小駝峰、下劃線等等寫法來寫變量名、屬性名、類名和方法名的。
  • vscode插件體系詳解
    事實上很多 vscode 的核心功能也是通過插件實現的。本文我們將從以下三個方面詳述 vscode 的插件機制:閱讀本文後續內容,需要對 vscode 的插件開發有基本的了解。關於 vscode 的插件開發可參考 vscode 的官方教程 。1.
  • 「收藏」提高PyCharm效率的10個小技巧
    PyCharm是最常用的python開發IDE,程式設計師可以通過PyCharm強大的功能節約大量時間用來 (摸魚) 工作,提高生產效率。阿狗總結了10個自己會用到的PyCharm中可以提高擼碼效率的小技巧,希望能幫助到需要的小夥伴。
  • 用VScode寫一個OutLook監控腳本
    我們可以看到,郵件的標題已經顯示在控制臺中。我們在要查看的地方打一個斷點,然後點擊左邊三角圖標,最後選擇「Python File」。小結今天主要給大家演示了,如何在VScode中進行Python代碼的編寫以及調試。以及如何通過python來獲取OutLook的內容。這裡只是簡單的和大家介紹了一下,如果想了解更多vscode的內容,歡迎大家關注我們。
  • 24 款神級插件,讓你的 vscode 更牛逼!
    大家好,我是小編火寶~之前的文章經常會提到 vscode,有小夥伴反饋說 vscode 雖然挺好用,但是插件太多了,不知道要安裝哪些。亂裝一通不但效果不好,甚至還會導致每次打開vscode都要吃掉不少內存,非常得慢。
  • 【Web逆向】【vscode插件】quokka pro 激活碼
    作者論壇帳號:濤之雨前言似乎是本地算法
  • 超另類:在vscode下實現編譯仿真下載,你絕對想不到
    生命在於運動,技術在於折騰,你是否厭倦了在keil、iar下孜孜不倦的寫代碼、debug,是否玩累了在外部編輯器下寫代碼,然後在轉到ide下進行仿真、下載等操作呢?這個教程將介紹下如何在vscode下實現這些操作,真正實現一個vscode可以吃天、實現編譯仿真下載一條龍服務,而你只需要在vscode下的終端敲幾個命令而已。。。
  • 那些你應該考慮卸載的 VSCode 擴展
    這篇文章可能會得罪一部分 VSCode 擴展的作者,但是我實在是看不慣網上很多的文章還在推薦一些已經過時的擴展,我覺得作為 VSCode 的老粉,我有必要寫一篇文章科普一下。其實 VSCode 自身已經支持在 import/require 也就是導入語句中使用路徑補全,但是在其它場景中寫路徑字符串時還是沒有提示。如果你覺得在導入語句中有路徑補全已經能夠滿足你的使用需求,那我覺得這個插件可以考慮卸載了。類似的還有 Path Autocomplete。