VsCode 使用基礎(chǔ)_VsCode入門小技巧

Visual Studio Code(以下簡稱vscode)是一個輕量且強大的代碼編輯器,支持Windows,OS X和Linux。內(nèi)置JavaScript、TypeScript和Node.js支持,而且擁有豐富的插件生態(tài)系統(tǒng),可通過安裝插件來支持C++、C#、Python、PHP等其他語言。
在做LuaIde插件的時候發(fā)現(xiàn)很多第一次接觸VsCode 的同學(xué)會問一些基礎(chǔ)問題 為了不必要的時間浪費,寫下這個簡單介紹:
這里是作者的插件--> LuaIde
LuaIde是用于Lua語言編輯.首先它是一個代碼編輯器,其次才是調(diào)試器.作者現(xiàn)階段更注重的代碼編輯的提示效果.
安裝
根據(jù)自己的系統(tǒng)進行下載 地址
導(dǎo)航區(qū)資源管理區(qū)搜索GIT調(diào)試擴展(插件中心) -->需要什么插件都可以在這查找打開工作區(qū)
對VsCode 來說沒有所謂的項目,一個目錄就是一個項目(個人理解)
openProject.gif
配置
請注意 vscode中的設(shè)置都是通過配置文件實現(xiàn)的沒有設(shè)置面板,配置文件分為
系統(tǒng)默認配置全局配置 (可修改 針對全局 )工作區(qū)配置(可修改 針對工作區(qū)) ->設(shè)置工作區(qū)配置后vscode會在工作區(qū)目錄創(chuàng)建.vscode 目錄 并創(chuàng)建setting.json setting.json文件只對工作區(qū)有用.
下圖為打開vscode配置的方法
打開設(shè)置.gif
vscode 有很多設(shè)置你可以打開設(shè)置挨個查看.這里不對每個設(shè)置進行介紹.插件安裝直接通過擴展 進行搜索安裝
插件搜索安裝.gif
如果不能通過網(wǎng)絡(luò)下載 但能獲得 .vsix 插件文件 也可以通過本地安裝
本地安裝插件.gif
調(diào)試
VsCode 的調(diào)試也是通過配置來實現(xiàn)的,不同的插件調(diào)試配置也是不一樣的,如LuaIde的調(diào)試配置是由作者自定義的所以這一點需要注意.
調(diào)試的配置是可以設(shè)置多個的.下圖演示了LuaIde 的調(diào)試配置
VSCode 使用入門
安裝
- 下載:點我去下載
- 安裝:雙擊即可安裝,根據(jù)需要選擇即可。
配置
- Ctrl + Shift + P 或 F1 打開命令面板(也可以使用 查看->命令面板打開);
- 輸入 user set 后按回車打開用戶配置;
- 使用 "editor.fontFamily":"Consolas, 'Courier New', monospace" 選擇字體樣式,默認為"Consolas, 'Courier New', monospace";使用 editor.fontSize":14 控制字體大小,默認為14;使用 "editor.wrappingColumn":0使文本自動換行,默認為300;在左側(cè)的默認配置中會有詳細的中文描述,配置文件是json格式的文本文檔。
插件
- Ctrl + Shift + P 或 F1 打開擴展面板,輸入 install 后按回車打開擴展安裝面板;或點擊側(cè)邊欄的最后一個按鈕;或使用ctrl + shift + x命令打開;或使用 查看->擴展打開擴展面板。
- 在對話框中輸入[string ]@sort:installs可以根據(jù)下載量排序查看,選擇所需插件,單擊安裝即可。
- @sort:installs:根據(jù)下載量排序查看所有插件,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 :調(diào)試JavaScript
- Git History:顯示git log和line history
Git 的使用
- 需要本機已經(jīng)安裝 Git
- 無需安裝插件,單機側(cè)邊欄的第三個圖標即可進行 add、commit、push、pull。(或者使用ctrl+shift+g打開,或使用 查看->Git 打開Git)
主題更換
- 圖標主題:Ctrl+shift +p 打開命令面板,輸入 icon theme 后回車,選擇一個即可。
- 顏色主題:Ctrl+shift +p 打開命令面板,輸入 color theme 后回車,選擇一個即可。
跳轉(zhuǎn)
- 跳轉(zhuǎn)到文件:Ctrl+P。
- 跳轉(zhuǎn)到符號:Ctrl+shift+o,可以跳轉(zhuǎn)到文件中的方括號、大括號等等。
- 跳轉(zhuǎn)到行:Ctrl+G,可以跳轉(zhuǎn)到指定行。
Debug
- 使用ctrl+d 打開debug面板。
- 可以根據(jù)需要配置launch.json
常用功能
- Emmet:使用 Tab 自動補全HTML標簽
- Markdown Preview:使用 Ctrl + shift + v預(yù)覽markdown文件
- 使用shift + alt + up/down可以向上/下復(fù)制選中內(nèi)容或者當前行
相關(guān)文章
vscode(Visual Studio Code)配置PHP開發(fā)環(huán)境的方法(已測)
Visual Studio Code一個輕量且強大的代碼編輯器,支持Windows,OS X和Linux。內(nèi)置JavaScript、TypeScript和Node.js支持,而且擁有豐富的插件生態(tài)系統(tǒng),可通過安裝插件來支2018-04-06在vscode中安裝使用pylint-django插件解決pylint的一些不必要的錯誤提
這篇文章主要介紹了在vscode中使用pylint-django插件解決pylint的一些不必要的錯誤提示,需要的朋友可以參考下2018-04-06Visual Studio Code 使用指南(vscode技巧)
VSCode是微軟推出的一款輕量編輯器,采取了和VS相同的UI界面,搭配合適的插件可以優(yōu)化前端開發(fā)的體驗,這里為大家介紹一下vscode的技巧,需要的朋友可以參考下2018-04-05visual studio code教程 vscode的基礎(chǔ)使用和自定義設(shè)置方法
這篇文章主要基于基礎(chǔ)web前端開發(fā),visual studio code教程——基礎(chǔ)使用、擴展插件安裝使用以及少許自定義配置,需要的朋友可以參考下2018-04-04VS Code有哪些常用的快捷鍵? Visual Studio Code常用快捷鍵大全
Visual Studio Code簡稱VSCode,是一款好用的代碼編輯器,最近,很多網(wǎng)友問小編VS Code有哪些常用的快捷鍵?今天小編就給大家整理了最高效的Visual Studio Code常用快捷鍵大2018-04-03使用vscode 編輯調(diào)試php 配置方與VSCode斷點調(diào)試PHP
以前的php調(diào)試工具,類似zendstudio 或者phpclipse,storm運行太慢了,還是這個好用, 這里就為大家分享一下,需要的朋友可以參考一下2018-04-06