Visual Studio Code 使用指南


    安裝

  VSCode是微軟推出的一款輕量編輯器,采取了和VS相同的UI界面,搭配合適的插件可以優化前端開發的體驗。

  HTML Snippets:增強了zen-coding,增加了H5的自動補全,安裝后每次打開自動啟用(可能與其他插件沖突)。

  下載地址:https://code.visualstudio.com/Download

 

  配置

  Ctrl + Shift + P 或 F1 打開命令面板(也可以使用 查看-》命令面板打開);

  輸入 user set 后按回車打開用戶配置;

  使用 “editor.fontFamily”:“Consolas, ‘Courier New’, monospace” 選擇字體樣式,默認為“Consolas, ‘Courier New’, monospace”;使用 editor.fontSize“:14 控制字體大小,默認為14;使用 ”editor.wrappingColumn“:0使文本自動換行,默認為300;在左側的默認配置中會有詳細的中文描述,配置文件是json格式的文本文檔。

  

  插件

  Ctrl + Shift + P 或 F1 打開擴展面板,輸入 install 后按回車打開擴展安裝面板;或點擊側邊欄的最后一個按鈕;或使用ctrl + shift + x命令打開;或使用 查看-》擴展打開擴展面板。

  在對話框中輸入[string ]@sort:installs可以根據下載量排序查看,選擇所需插件,單擊安裝即可。

  @sort:installs:根據下載量排序查看所有插件,asc 升序排列,desc 降序排列。

  @sort:raTIng :分級查看,asc 升序排列,desc 降序排列。

  string可以為空

 

  推薦插件

  C/C++:添加C/C++支持,包括但不限於自動補全

  Python:自動縮進,補全,查錯,debug,代碼格式化等等

  beauTIfy:格式化html,css,js

  vscode-icons:一款很火的圖標主題

  HTML Snippets:可以在不輸入 《 的情況下提示

  View In Browser:在瀏覽器中打開 HTML 文件

  Crane - PHP Intellisense:PHP代碼的自動補全插件

  jQuery Code Snippets:一款jQuery重度患者的插件

  Debugger for Chrome :調試JavaScript

  Git History:顯示git log和line history

 

  Git 的使用

  需要本機已經安裝 Git

  無需安裝插件,單機側邊欄的第三個圖標即可進行 add、commit、push、pull。(或者使用ctrl+shift+g打開,或使用 查看-》Git 打開Git)

  

  主題更換

  圖標主題:Ctrl+shift +p 打開命令面板,輸入 icon theme 后回車,選擇一個即可。

  顏色主題:Ctrl+shift +p 打開命令面板,輸入 color theme 后回車,選擇一個即可。

  

  跳轉

  跳轉到文件:Ctrl+P。

  跳轉到符號:Ctrl+shift+o,可以跳轉到文件中的方括號、大括號等等。

  跳轉到行:Ctrl+G,可以跳轉到指定行。

  

  Debug

  使用ctrl+d 打開debug面板。

  可以根據需要配置launch.json

  

  常用功能

  Emmet:使用 Tab 自動補全HTML標簽

  Markdown Preview:使用 Ctrl + shift + v預覽markdown文件

  使用shift + alt + up/down可以向上/下復制選中內容或者當前行

 

  常用插件

  View In Browser

  - 預覽頁面(ctrl+F1)

  vscode-icons

  - 側欄的圖標,對於一個有視覺強迫症的人是必須要的

  HTML Snippets

  - 支持HTML5的標簽提示

  HTML CSS support

  - css自動補齊

  JS-CSS-HTML Formatter

  

  格式化

  jQuery Code Snippets

  jquery 自動提示

  Path Autocomplete

  - 路徑自動補齊

  Npm Intellisense

  - npm包代碼提示

  ESLint

  - 檢測JS必備

  Debugger for Chrome

  - 方便調試

  Auto Rename Tag

  - 自動同步修改標簽

  Bootstrap 3 Snippets

  - bootstrap必備

  Vue 2 Snippets

  - vue必備

  background

  - 一個萌萌的插件,可以自己設置vsc的背景圖

  

  常用快捷鍵

  (在快捷鍵部分, ⌘ 指 Command 鍵,⇧ 指 Shift 鍵,⌃ 指 Control 鍵,⌥ 指 OpTIon/Alt 鍵。)

  這里主要就是實驗F1上的快捷鍵,一些我認為沒用的我就不列出來了。

  向上(下)復制行 shift + alt + top(down)

  向上(下)移動行* alt + top(down)*

  新建一個窗口 ctrl + shift + N

  行增加縮進: ctrl + [

  行減少縮進 * ctrl + ]**

  裁剪尾隨空格(去掉一行的末尾那些沒用的空格): ctrl + shift + x

  強烈建議把這個啟用,這樣保存的時候就會自動刪掉那些沒用的空格,在很多公司的代碼規范里都是不允許存在這些空格的。

  顯示隱藏側邊欄:ctrl + B

  拆分編輯器(最多拆分成三塊):ctrl + /按ctrl + 1(2,3)就可以在拆分后的編輯器里切換

  方法縮小ctrl +(-)

  關閉編輯器 ctrl + W(F4)

  切換編輯器 ctrl + shift + left(right)

  也可以用 ctrl+1(2,3)

  顯示和隱藏側邊欄 ctrl + B

  切換全屏 F11

  切換自動換行 alt + Z

  顯示Git ctrl + shift + G

  前提是你的項目必須是一個git項目

  這個還是很有用的,有時候我們的屏幕不夠大,可是代碼沒有自動換行,所以被遮住的代碼就會看不到,但是你用這個快捷鍵就可以換行看到了。這個我是在用戶設置里面設置成自動換行的。

  

  修改用戶設置

  把默認的用戶設置成適合我們自己的還是很重要的。

  也很簡單,文件 – 首選項 – 用戶設置,然后出來左邊的默認設置是不能改的,需要在右邊setTIngs.json中覆蓋。

  

  修改快捷鍵

  文件 – 首選項 – 鍵盤快捷方式,和修改用戶設置的時候一樣,找到你要修改的快捷鍵名字,右邊覆蓋就可以了,一些還沒有綁定快捷鍵的功能可以在左邊的最下面看到,然后快捷鍵的名字就是這個。

 

   新建文件

  右鍵 – 新建文件,文件后綴名自己加上,自動識別。

       新建.html文件后,空白頁,沒有頁面默認代碼結構,此時在編輯區輸入html,回車第二個或者第三個即可。

 

技術群 : 192713488

 


免責聲明!

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



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