VSCode系列之認識VSCode

本文內容如有錯誤、不足之處,歡迎技術愛好者們一同探討,在本文下面討論區留言,感謝。

簡述

VSCodeVisual Studio Code 的縮寫, 官網 https://code.visualstudio.com/,一直是前端開發中非常好用的工具。
VSCode 是一款介於 IDE 和編輯器之間的工具,其界面風格乾淨、漂亮,擁有衆多的插件工具,並且是開源、免費的工具。

基本功能

VS Code 特點:

  • 開源,免費
  • 自定義配置
  • 集成git
  • 智能提示強大
  • 支持各種文件格式
  • 調試功能強大
  • 各種方便的快捷鍵
  • 強大的插件擴展

界面

在這裏插入圖片描述

簡單功能介紹

命令面板

命令面板是 vscode 快捷鍵的主要交互界面,可以使用 F1 或者 Ctrl+Shift+P 打開。

在命令面板中你可以輸入命令進行搜索(中英文都可以),然後執行。命名面板中可以執行各種命令,包括編輯器自帶的功能和插件提供的功能。

在這裏插入圖片描述

功能介紹

在這裏插入圖片描述

藉助 IntelliSense 超越了語法突出顯示和自動完成功能,該功能基於變量類型,函數定義和導入的模塊提供了智能完成功能。
在這裏插入圖片描述
直接從編輯器調試代碼。啓動或附加到正在運行的應用程序,並使用斷點,調用堆棧和交互式控制檯進行調試。
在這裏插入圖片描述
Git 和其他 SCM 提供商合作從未如此簡單。直接在編輯器中檢查差異,暫存文件並進行提交。從任何託管的 SCM 服務中推入和拉出。
在這裏插入圖片描述
是否需要更多功能?安裝擴展以添加新的語言,主題,調試器,並連接到其他服務。擴展程序在單獨的進程中運行,確保它們不會降低編輯器的速度。
在這裏插入圖片描述
藉助 Microsoft Azure,您可以在 VS Code 內輕鬆部署和託管 ReactAngularVueNodePython(以及更多!)網站,存儲和查詢基於關係和文檔的數據,並通過無服務器計算輕鬆擴展。

安裝插件

安裝插件的3中方法
方法一:按 F1Ctrl+Shift+p,輸入 install Extensions
在這裏插入圖片描述
方法二:ctrl + P 然後輸入 >ext install
在這裏插入圖片描述
方法三: 點擊插件圖標
在這裏插入圖片描述
插件查找界面,在搜索框中搜索插件,然後點擊 install 即可,放心 VSCode 對中方程序開發非常友好,所有插件不用擔心在外網無法下載或者下載速度非常慢,都是非常快的。
在這裏插入圖片描述

中文界面

安裝 Chinese(Simplied) Lang 插件,在插件搜索框中輸入 Chinese(Simplied) Lang
在這裏插入圖片描述

實用技能

  • 調整字符的大小寫
    選中,然後在命令面板輸入 trans 然後選擇需要做的操作
    在這裏插入圖片描述

  • 多光標特性
    按住 alt ,然後用鼠標點,鼠標點在哪裏哪裏就會出現一個光標
    在這裏插入圖片描述

  • 快速選中
    Ctrl+d 第一次按下時,它會選中光標附近的單詞;
    第二次按下時,它會找到這個單詞第二次出現的位置,創建一個新的光標,並且選中它。(注:Ctrl+k 跳過當前的選擇)
    在這裏插入圖片描述

  • 界面大小
    ctrl + +/- 快速放大/縮小頁面內容
    在這裏插入圖片描述

  • 快速打開文件
    Ctrl+P 輸入你要打開的文件名,回車打開,按 Cmd+Enter ,就會在一個新的編輯器窗口打開。
    在這裏插入圖片描述

  • 行跳轉
    Ctrl+g 輸入行號,如果你想跳轉到某個文件的某一行,你只需要先按下 Cmd + P,輸入文件名,然後在這之後加上 :和指定行號。
    在這裏插入圖片描述

總結

本文簡單介紹 VSCode 工具的界面內容和插件使用、中文界面,以及一些使用小技巧。

參考資料

VSCode 官網

宇宙最強vscode教程(基礎篇)

Visual Studio Code(VS code)你們都在用嗎?或許你們需要看一下這篇博文

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章