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

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