前端開發神器 VSCode 使用總結


VSCode 是微軟出品的,基於 Electron 和 TypeScript 的,集成了 git 版本管理和命令行終端,而且開源穩定,插件豐富,再搭配一款 Chrome 瀏覽器,可以說是前端開發神器了。

安裝指南

VSCode 需要用到 node.js 和 git,如果沒有就到https://nodejs.org/en/download/下載 node.js,然后到https://git-scm.com/downloads下載並安裝 git,注意自己的系統版本,最后到https://code.visualstudio.com下載 vscode 並安裝好。

https://code.visualstudio.com

推薦插件

project manager // 項目管理
prettier // 自動格式化你的代碼
gitlens // 查看 git 修改記錄
bracket pair colorizer2 // 彩色括號匹配
code spell checker // 單詞拼寫檢查
eslint // javascript 代碼風格檢查工具
git history // git 歷史
npm intellisense // npm 自動補全
path intellisense // 自動補全文件路徑
material icon theme // 好看的圖標
highlight matching tag // 高亮匹配標簽
better toml // toml 文件支持
auto rename tag // 自動重命名標簽
auto close tag // 自動關閉標簽
debugger for chrome // 在 chrome 里調試
visual studio intellicode // 智能補全
Markdown All in One // 寫 markdown 神器
ES7 React/Redux/GraphQL/React-Native snippets // react 代碼簡寫
react native tools // 寫 react native
vetur // 寫 vue
javascript(es6) code snippets // javascript 代碼簡寫

推薦快捷鍵

F1 打開可以輸入命令
F2 重命名變量,方便重構
F5 運行和調試代碼
F12 去到定義的地方
shift+F12 查找所有引用
ctrl+g 會讓你輸入數字,快速定位到指定行
ctrl+enter 在下方另起一行
crtl+f 查找
ctrl+shift+n 多開一個 vscode 編輯器
ctrl+b 開關側邊欄
ctrl+h 替換
ctrl+r 打開最近文件
ctrl+` 終端
ctrl+tab 切換文件
ctrl+shift+e 切到資源管理器
ctrl+p 快速打開文件
ctrl+[ 左移代碼
ctrl+] 右移代碼
ctrl+/ 行注釋
ctrl+t 匹配文本來打開文件
ctrl+shift+t 重新打開關閉的文件
ctrl+shift+home/end 選擇光標左側/右側全部內容
ctrl+backspace 刪除上一個詞
ctrl+delete 刪除光標右側的詞
ctrl+左/右 跳到上/下一個詞
ctrl+shift+左/右 逐個選詞
鼠標滾輪或者shift+alt+鼠標拖拽 批量選中,方塊選擇
ctrl+shift+pageup/pagedown 切換文件
ctrl+d 選中當前詞語
ctrl+enter 下方插入一行
alt+左/右箭頭 跳回來/過去
alt+shift+上/下箭頭 向上/下復制行


免責聲明!

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



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