目錄
vscode 小技巧-- 遊標操作
遊標操作實例
相同元素
自訂快速鍵
首頁 開發工具 VSCode 值的了解的一些vscode遊標操作,讓開發如絲般順滑!

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

Oct 28, 2022 pm 07:53 PM
vscode

這篇文章帶大家聊聊vscode中的遊標操作,本文只會牽涉到與我們最息息相關的遊標操作,那我們就開始吧!

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

我們的目標只有一個,讓我們喊出我們的口號:讓開發如絲般順滑!文章中的範例大多 mac 版為主,因為本身就是 mac,但 win 版無需擔心,破陣心法,牢記於心:command 就是 ctrl 鍵。

vscode 小技巧-- 遊標操作

        遊標操作我們日常使用方向鍵,我們在日常中其實肌肉記憶下意識也會用到很多它的技巧,例如按住cmd 鍵左右就可以到行首行尾,但卻很難總結,一葉遮目的感覺。我拋磚引玉給個突破點:顆粒度。我們日常使用時左右方向鍵只會一個字符,即顆粒度是字符,如果我們想到詞尾或句尾,這就很麻煩了;這句話其實就標明了我們的重點:顆粒度;那麼,如何操作那遊標的顆粒度呢? 【推薦學習:《vscode教學》】

水平方向上

結合方向鍵

顆粒度 mac win
單字 #option ctrl
#cmd 只用home/end 可以
程式碼區塊 cmd shift \ Ctrl shift \

垂直方向上

顆粒度 mac win
文字首/文字尾 Cmd 上下方向鍵 Ctrl Home/End 鍵
目前行程式碼上/下移 Option 上下方向鍵

#註:【目前行上/下移】不是遊標而是程式碼區塊操作(因為遊標操作直接方向鍵就可以了),但很適合放在這裡,這樣就可以和水平方向上匹配了;水平上:行-cmd 單字-option;垂直上文檔-cmd 行-option;

其他遊標運算

#mac #win
撤銷遊標處理 Cmd U Ctrl U

擴充:【選取】操作只需要再加個【shift】即可;【刪除】操作顆粒度同遊標操作,反方向則加fn即可(如刪除所在行遊標前所有內容為【cmd delete】而遊標後內容則為【cmd fn delete 】)

遊標操作實例

#針對單字的遊標移動

##想把遊標直接移動到整個單字,也就是function 的前面或後面,你只要按下Option(Windows 上是Ctrl 鍵)和左方向鍵。

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

遊標移到行首或行末

按住Cmd 左邊方向鍵(Windows 上是Home 鍵),就可以把遊標移到了這行的第一列

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

移到文件的第一行或最後一行

按下Cmd 和上下方向鍵即可(Windows 上是Ctrl Home/End 鍵)

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

程式碼區塊的移動

Cmd Shift \(Windows 上是Ctrl Shift \),就可以在這對花括號之間跳轉。

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

目前行上/下移

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

值的了解的一些vscode遊標操作,讓開發如絲般順滑!##其他遊標操作

撤銷遊標處理

#多遊標操作

        至此,我們已經了解了單遊標的移動,選取(其實就是移動加上

shift鍵),刪除(選取加delete)等操作,那麼,如果我們需要一次操作多個地方呢?這時我們就需要來到遊標操作的高階使用了,多遊標操作。

        關於這個主題,其實重點就是如何在需要的位置創建多遊標,因為創建後就和單遊標的操作一致了。

值的了解的一些vscode遊標操作,讓開發如絲般順滑!基本操作-滑鼠建立多遊標

#在鍵盤上按住「Option」(Windows 上是Alt),然後點選要新建遊標的地方即可。

但很明顯,這種方法普遍適用但不方便,我們每創建一個遊標都需要找到位置並點一下,八二原則,我們可以用快捷鍵實現常見的那20%的操作,下文主要介紹三種常見場景。 #處理場景捷徑
提效操作
##詳解

相同元素

Cmd D

選取元素,然後按下快速鍵,vscode 就會選取下一個相同的元素並創建遊標;再按再創建,依次類推。

上下行處理Cmd Option 下方向鍵Option Shift i#選取多行內容,然後按下快速鍵,vscode 在每一行行尾建立一個遊標
在目前遊標的下方建立一個遊標。 選取多行處理
關於遊標操作的延伸
###其他遊標運算####################################### #############意義######mac######win##################撤銷遊標處理# #####Cmd U######Ctrl U############

選取刪除聯想

        【選取】操作只需再加個【shift】即可;【刪除】操作顆粒度同遊標操作,反方向則加fn即可(如刪除所在行遊標前所有內容為【cmd#delete】而遊標後內容則為【cmd fn delete】)

        到此,我們就了解了vscode 本身對遊標操作的基本設計理念啦。

自訂快速鍵

        但如果我們用不慣呢? vscode 自然也不會這麼死板,它是支援為行為、也就是我們所說的命令自訂快捷鍵的,這裡說之前困惑過我的一點,就是我們說的創建遊標、移動等等對應vscode 而言其實就是一條內嵌的命令,理解了這個,才好進行自定義,我當初沒理解所以一直在想的問題是:我該怎麼去翻譯我要做的事情。

三步驟走:找到定義keyboard Shorycut的地方,找到對應的操作,為操作綁定快速鍵。

Eg:為【選取括號內所有內容】的運算綁定Cmd Shift ]快速鍵為例

找到定義keyboard Shorycut的地方

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

找到對應的動作

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

##為操作綁定快捷鍵

雙擊-》按下需要綁定的快捷鍵-》回車確定(按錯的話別回車就可以了)

這裡多說一句,快捷鍵其本質就是行為和特定按鍵【在特定場景下】的綁定,在vscode 中透過JSON 進行描述,我們可以透過執行

>Open Keyboard Shortcuts(JSON)進行查看,如果我們需要實作一個高階的快捷鍵,就會需要這些知識了。

值的了解的一些vscode遊標操作,讓開發如絲般順滑!

#屬性#意思備註命令值在什麼情況下這個快捷鍵綁定能夠生效#捷徑
#Command
#When
Key

  • #其中的when的定義注意點比較多,所有取值可以查看文檔
  • 而對於高級寫法,VS Code也支援幾個基礎的操作符。這樣我們就能夠書寫相對複雜的條件語句了。
  • !
取反。例如我們希望當遊標不在編輯器裡時,綁定一個快捷鍵,那麼我們可以使用 !editorFocus,使用 !進行取反。

==

等於。 when 條件值除了是 boolean 以外,也可以是字串。例如

resourceExtname

對應的是開啟的檔案的後綴名,如果我們想給 js 檔案綁定一個快捷鍵,我們可以用

resourceExtname == .js

&&
And 運算子。我們可以將多個條件值組合使用,例如我希望當遊標在編輯器裡且編輯器裡正在編輯的是 js 文件,那麼我可以用

editorFocus && resourceExtname == .js###。 #########=~ ###正規表示式。還是使用上面的例子,如果我要偵測檔案後綴是不是 js,我也可以寫成 ###resourceExtname =~ /js/###,透過正規表示式來判斷。 ############總結#########        到此,遊標操作相關的分享就結束啦,關於vscode 的了解,它並非銀彈,沒它也能用,但總覺得程式設計本身枯燥的事情,還是需要這種探尋的快樂的,生而有崖而學無涯,用我那時候學完寫的隨筆感想為我們這部分分享結個尾好了:人生性懶惰,不只是表面,更是思想,懶於思考只是習慣於遇坑填坑,跳進坑裡幾乎是一件必然事件,勤於思考,享受思考。 ######        最後,順口溜總結下,希望對諸君有所幫助:移動考慮顆粒度,多個就上快捷鍵,定制還需自綁定,操作牢記 shift 鍵。 ######更多關於VSCode的相關知識,請造訪:###vscode基礎教學###! ######

以上是值的了解的一些vscode遊標操作,讓開發如絲般順滑!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vscode需要什麼電腦配置 vscode需要什麼電腦配置 Apr 15, 2025 pm 09:48 PM

VS Code 系統要求:操作系統:Windows 10 及以上、macOS 10.12 及以上、Linux 發行版處理器:最低 1.6 GHz,推薦 2.0 GHz 及以上內存:最低 512 MB,推薦 4 GB 及以上存儲空間:最低 250 MB,推薦 1 GB 及以上其他要求:穩定網絡連接,Xorg/Wayland(Linux)

vscode怎麼定義頭文件 vscode怎麼定義頭文件 Apr 15, 2025 pm 09:09 PM

如何使用 Visual Studio Code 定義頭文件?創建頭文件並使用 .h 或 .hpp 後綴命名在頭文件中聲明符號(例如類、函數、變量)使用 #include 指令在源文件中包含頭文件編譯程序,頭文件將被包含並使聲明的符號可用

vscode開始怎麼設置 vscode開始怎麼設置 Apr 15, 2025 pm 10:45 PM

要開啟並設置 VSCode,請按照以下步驟操作:安裝並啟動 VSCode。自定義首選項,包括主題、字體、空格和代碼格式化。安裝擴展以增強功能,例如插件、主題和工具。創建項目或打開現有項目。使用 IntelliSense 獲得代碼提示和補全。調試代碼以步進代碼、設置斷點和檢查變量。連接版本控制系統以管理更改和提交代碼。

vscode啟動前端項目命令 vscode啟動前端項目命令 Apr 15, 2025 pm 10:00 PM

啟動前端項目在 VSCode 中的命令是 code .。具體步驟包括:打開項目文件夾。啟動 VSCode。打開項目。在終端面板中輸入啟動命令 code .。按回車鍵啟動項目。

vscode用的是什麼語言 vscode用的是什麼語言 Apr 15, 2025 pm 11:03 PM

Visual Studio Code (VSCode) 由 Microsoft 開發,使用 Electron 框架構建,主要以 JavaScript 編寫。它支持廣泛的編程語言,包括 JavaScript、Python、C 、Java、HTML、CSS 等,並且可以通過擴展程序添加對其他語言的支持。

vscode什麼語言寫的 vscode什麼語言寫的 Apr 15, 2025 pm 11:51 PM

VSCode 是用 TypeScript 和 JavaScript 編寫的。首先,它的核心代碼庫是用 TypeScript 編寫的,這是一種擴展了 JavaScript 並增加了類型檢查功能的開源編程語言。其次,VSCode 的一些擴展和插件是用 JavaScript 編寫的。這種組合使 VSCode 成為一款靈活且可擴展的代碼編輯器。

vscode上一步下一步快捷鍵 vscode上一步下一步快捷鍵 Apr 15, 2025 pm 10:51 PM

VS Code 一步/下一步快捷鍵的使用方法:一步(向後):Windows/Linux:Ctrl ←;macOS:Cmd ←下一步(向前):Windows/Linux:Ctrl →;macOS:Cmd →

vscode運行任務快捷鍵 vscode運行任務快捷鍵 Apr 15, 2025 pm 09:39 PM

在 VSCode 中運行任務:創建 tasks.json 文件,指定 version 和任務列表;配置任務的 label、command、args 和 type;保存並重新加載任務;使用快捷鍵 Ctrl Shift B (macOS 為 Cmd Shift B) 運行任務。

See all articles