VS Code 編輯器


  編輯區分為多列或多欄, 可以同時對比或編輯多個不同的文件,如下所示

  主要有三種方法,1,在左側文件列表中選中要在右側打開的文件,然后右側,單擊open to the Side 即可

   2, 按住Ctrl 鍵, 雙擊要打開的單個文件

   3,選中要打開的單個文件, 按ctrl + \

  把整個編輯區域分為多欄后,怎么能在這么多欄中進行快速切換?按ctrl +1, ctrl +2, ctrl + 3, 1, 2, 3 就是代表的第幾欄,1 代表第1 欄,2代表示第二欄。 

  VS Code 快捷鍵

    1, Shift+ Alt  + A 切換 塊級注釋,經常使用Ctrl + / 生成行注釋,竟然不知道塊級注釋的快捷鍵。

  VS Code 設置

  1,更改編輯器的默認設置

  文件 =>首選項 => 設置 或 ctrl + ,(逗號) ,打開設置面板, 可以看到它有兩個面板,

  

  user 面板就是用戶設置,我們所有的更改設置都在這里實現。想要更改哪個設置,就在上面的搜索框中搜索,然后找到它,再進行修改了。比如縮進問題,有人喜歡縮進2格,有人喜歡縮進4格。它的設置命令是 tabSize,在搜索輸入框中輸入tabSize,  如上圖所示,左側出現這個命令所在的地方,text Editor 就是編輯器,點擊它,可以看到右側可以更改的設置。有一個4,表示縮進4格,你想改成2格,就寫2,改完之后要記得按ctrl + s 保存。

  還有一個要修改的可能是換行。 VS Code 在輸寫代碼時,默認是不換行的,一行代碼可以一直寫下去,這不可避免會出現橫向滾動條,不利於我們看代碼。換行用的命令是wordWrap, 搜索它,然后找到它

  

  可以看到Controls how lines should wrap 下拉框,點擊,你會看到選項,選擇on 就是換行。移到on 選項,沒有選擇的時候,下拉框的底部出現提示,line will wrap at the viewport width, 根據可視區的寬度換行。

  有的人可能還會修改主題顏色,編輯器左側底部有一個設置的圖標,在其上面右擊,選擇顏色主題 ,就會出現下拉列表框 

  這時按上下箭頭就可以實時預覽效果,就是當我們按向下的箭頭移動到某個顏色主題上,編輯器就會動態變化,以顯示效果,我們可以仔細看看,如果喜歡那個主題,直接按enter鍵就好了,當然,你也可以安裝其它的顏色主題,和安裝插件一樣,這個以后再說。

  2,集成終端

  VS Code 把我們集成終端也包括進來了,就是我們的cmd 命令窗口,我們可以通過 查看=> 集成終端 打開它,也可以通過 ctrl + ` 打開它。打開以后,它的默認位置是編輯器的下方, 在Win10下,默認的shell命令是 powershell , 如下圖。

  這時,如果我們想要修改默認的shell命令,比如改成git-bash命令,怎么辦? 還是要通過更改默認設置來實現。ctrl+, 命令打開設置面板,搜索integrated.shell , 可以看到

它有windows, mac, linux 等系統,每一個都有edit in setting json. 點擊windows 下面的,出現一個setting.json 文件

  找到bash命令的安裝目錄,它是一個.exe文件,一般都在bin 目錄下。我的安裝目錄是 "C:\\Program Files\\Git\\bin\\bash.exe",  "terminal.integrated.shell.windows" 改為 "C:\\Program Files\\Git\\bin\\bash.exe", 覆蓋掉默認選項就可以了。這是重新打開集成終端 就要看到bash命令了。

  其實window 下面還有更簡單的操作,terminal 右側有幾個選項,

 

  單擊上圖中最左側下拉列表框,最下面有一個Select Default Shell, 點擊,在編輯器的上部出現了一個選項框,列出了系統中所有命令,里面就有git bash, 可能是安裝git bash 的時候采取的默認安裝的原因吧,選擇它。這時你還要做一步操作,才可以看到,那就是點擊上圖中的加號。這時再點擊下拉列表框,有了git bash。 Select Default Shell -> 彈窗中選擇一個要加入的命令 -> 點擊上圖中的加號,添加命令。 你多操作幾次,會出現下拉列表框中出現了很多命令,沒有關系,刪除也很簡單,下拉列表框中選中要刪除的那個命令,比如上圖中的1:bash, 點擊右側的刪除圖標,就刪除了。在加號和刪除圖標中間還有一個圖標,它是分屏,點擊一下,terminal 面板會為了兩屏,每屏各自的命令,應該是你下拉列表框中選中的命令和這個命令的在下拉列表中選項列表中的下一個命令。

  alt + 左右箭頭,可以在兩個命令窗口來回切換。

  如果你不想使用VS code的終端,也可以很方便的很用外部的終端。代碼編輯區中的任意位置點擊一下,按ctrl + shift +c 就可以了。

  3, 安裝插件

  VS Code 的插件安裝也比較簡單, 在編輯器的側邊欄中有一個按鈕 , 點擊它,可以看到下圖,有些推薦安裝的插件。我們想要安裝哪個插件,直接在輸入框中輸入名稱,它會自動進行搜索。在結果列表中找到安裝的插件,直接點安裝就要可以了,安裝完成后,重新打開編輯器才生效。

  我們也來安裝幾個插件:

  1, Bracket Pair Colorizer: 直譯,給括號添加顏色。它的主要作用是給匹配的一對括號添加顏色,當括號有多重嵌套時,我們能快速找出哪一對是匹配的,很大程度上避免’ missing part ) ‘的錯誤。比如下面的代碼,多種括號的匹配就很輕松看出來。

  2, Live Server: 如果你用過 Adobe Brackets 編輯器,它有一個live preview的功能, 如果我們修改 html和 css代碼,它能直接顯示更改后的內容,而不用刷新瀏覽器。Live Server就是VS Code 編輯器中干這個活的。安裝該插件后,打開一個html文件,在其內容上右擊,可以發現 open with Live Server 字樣, 單擊它,它會用默認瀏覽器打開該文件,而且是以服務器的方式,端口是5500, 當然 VS Code 編輯器的狀態欄也會顯示,如下圖

  當我們想要關閉Live Server 時,直接點擊上圖中的端口位置,就會自動關閉服務器。

  3,TabOut: 當我們按Tab鍵時,它可以跳出括號,引號等。

  4, path AutoComplete, 路徑自動補全

  5,  Indent rainbow插件,代碼進行縮進時,它能清晰的進行顯示行與行之間的匹配, 直接看下圖就可以了。

  6, TODO-HIGHLIGHT 插件:有時寫一個代碼時,雖然功能實現了,但是感覺不太完美,或者是還沒有寫完, 我們需要標注一下, 這時會寫TODO: 標識,TODO-HIGHTLIGHT 插件就是高亮這個TODO的。 // TODO: 需要重新寫了, 不要忘記TODO 后面的冒號:還要大寫。

  7, Auto Close Tag 插件:自動閉合標簽,主要是這個插件支持JSX, .vue 文件。 當我們寫組件<Row> 時,閉合標簽就會出現。

  8, Auto Rename Tag 插件:自動重命名標簽, 當我們修改標簽名稱時,不管它是開始標簽,還是結束標簽,只要修改其中的一個,另一個就會隨之更改。

  9, Bookmarks 書簽, 當一個文件非常大的時候,在文件中來回跳轉非常方便,尤其是在.vue 文件中template 和style 來回切換。安裝成功后,在編輯器的左側側邊欄有一個, 點擊它,可以顯示所有的書簽,當然現在還沒有一個書簽。怎么創建書簽呢?在代碼編輯區右鍵單擊,Bookmark: toggle 命令,默認快捷鍵是ctrl + alt + k;, 你會發現在點擊右鍵的那一行前面加了一個藍色的書簽

  同時,再點擊, 有一個書簽了,顯示的是書簽所在文件,點擊一下文件,就看到真正的書簽了。點擊書簽,直接在跳轉編輯區書簽的位置。

  建立書簽非常簡單了,那如果在一個文件中有多個書簽,怎么在各個書簽中來回切換呢?還是右鍵單擊,有Bookmarks: Jump to Next, Bookmarks: Jump to Previous, 點擊來回跳轉,它后面也顯示了快捷鍵。

  刪除書簽,還是使用Bookmark: toggle 命令, 不過,你要把光標放到想要刪除的書簽所在的行,再使用這個命令。

  除了常用的這幾個功能,Bookmarks 也提供了其它功能,可以ctrl + shift +p 打開命令面板,然后在輸入框中輸入bookMarks, 選擇要使用的命令。

  10, EditorConfig for VS Code: 保證團隊代碼規范

  11, Code Runner: 可以直接運行js 代碼,尤其是學js 語法的時候,寫一段小實例代碼,直接運行,非常方便。在文件中右擊,有一個run code  命令,點擊直接執行整個文件

  12,TSLint,如果開發ts 的話,安裝

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM