經(jīng)歷:
最近sublime和webstorm的序列號頻頻失效爱谁,經(jīng)常在關(guān)鍵時候掉鏈子,深有體會,剛好身邊有朋友也有使用VS code锯七,對比atom,sublime,webstorm這些編輯器,個人覺得VS code是一款不錯編輯器誉己,比sublime插件多眉尸,比Atom的界面好看,比webstorm更輕量級巫延⌒澹可謂聚齊各家優(yōu)點于一身,關(guān)鍵還 免費 免費 免費炉峰,再也不用為編輯器付費而困擾畏妖,還有向右大大看齊
Settings Sync
云同步插件和設(shè)置
自己調(diào)試VS code,感興趣可以下載試試
1.安裝Settings Sync插件后重啟
2.鍵盤按 ctrl + shift + p 疼阔,彈出框輸入sync 然后選擇sync高級選項 →`從公共配置里下載gist
3.鍵盤按ctrl + shift + p戒劫, 輸入sync 選擇下載配置復(fù)制下面代碼進去
d3bc45d8096f6bc3d9d46c69ed7052cd
4.控制臺顯示下載插件中,下載好婆廊,重啟下 迅细,OK
HTML Snippets
超級實用且初級的 H5代碼片段以及提示
Atom Keymap
Sublime Text Keymap and Settings Importer
IntelliJ IDEA Keybindings
替換其他編輯器快捷鍵(多選一)
Color-Highlight
在編輯器中高亮顯示顏色。
Guides
代碼的標簽對齊線淘邻。
HTML CSS support
css 自動補齊
Npm Intellisense
在import語句中自動完成npm模塊引入的代碼插件
Debugger for Chrome
讓 vscode 映射 chrome 的 debug功能茵典,靜態(tài)頁面都可以用 vscode 來打斷點調(diào)試
background
設(shè)置背景
beautify
在Visual Studio代碼中美化JavaScript,JSON宾舅,CSS统阿,Sass和HTML彩倚。
Auto Close Tag
自動閉合HTML標簽
Auto Rename Tag
修改HTML標簽時,自動修改匹配的標簽
Bracket Pair Colorizer
讓括號擁有獨立的顏色扶平,易于區(qū)分
Open-In-Browser
由于 VSCode 沒有提供直接在瀏覽器中打開文件的內(nèi)置界面帆离,所以此插件可以打開命令面板選項。
Live Server
用于服務(wù)器端頁面的Live Server结澄,如PHP
Indenticator
縮進高亮
IntelliSense for CSS class names
CSS類名智能命名提示
JavaScript (ES6) code snippets
ES6語法提示
Path Intellisense
編輯器中輸入路徑時,自動補全
Git History
查看和搜索git日志以及圖表和細節(jié)哥谷。查看文件的前一個副本。查看和搜索歷史
CSS Peek
能在源代碼中的字符串中找到對應(yīng)的css(類和ID)麻献。顯示在那個css文件里们妥,還有在第幾行。
Easy WXLESS
微信小程序WXSS文件專用赎瑰,保存可自動生成并同步編譯成同名css文件
px2rem
px值轉(zhuǎn)rem
Vue插件
vetur
語法高亮王悍、智能感知、Emmet
注意vue文件代碼格式化餐曼,需要在首選項-設(shè)置-用戶設(shè)置添加這行代碼
"vetur.format.defaultFormatter.html": "js-beautify-html", //vue中HTML部分格式化
Vue 2 Snippets
基于最新的 Vue 官方語法高亮文件添加了語法高亮压储,并且依據(jù) Vue 2 的 API 添加了代碼補全
vscode-element-helper
Element-UI 庫代碼提醒
主題推薦:淺色調(diào)
Brackets Light Pro
Quiet Light
vs code默認快捷鍵:
- 打開一個新窗口: Ctrl+Shift+N
- 關(guān)閉窗口: Ctrl+Shift+W
- 新建文件 Ctrl+N
- 歷史打開文件之間切換 Ctrl+Tab,Alt+Left源譬,Alt+Right
- 代碼行縮進Ctrl+[集惋, Ctrl+]
折疊打開代碼塊 Ctrl+Shift+[, Ctrl+Shift+]
Ctrl+C Ctrl+V如果不選中踩娘,默認復(fù)制或剪切一整行
代碼格式化:Shift+Alt+F刮刑,或Ctrl+Shift+P后輸入format code
修剪空格Ctrl+Shift+X
上下移動一行: Alt+Up 或 Alt+Down
向上向下復(fù)制一行: Shift+Alt+Up或Shift+Alt+Down
在當前行下邊插入一行Ctrl+Enter
在當前行上方插入一行Ctrl+Shift+Enter
光標相關(guān)
移動到行首:Home
移動到行尾:End
移動到文件結(jié)尾:Ctrl+End
移動到文件開頭:Ctrl+Home
移動到后半個括號 Ctrl+Shift+]
選中當前行Ctrl+i(雙擊)
選擇從光標到行尾Shift+End
選擇從行首到光標處Shift+Home
刪除光標右側(cè)的所有字Ctrl+Delete
Shrink/expand selection: Shift+Alt+Left和Shift+Alt+Right
Multi-Cursor:可以連續(xù)選擇多處,然后一起修改养渴,Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
同時選中所有匹配的Ctrl+Shift+L
Ctrl+D下一個匹配的也被選中(被我自定義成刪除當前行了雷绢,見下邊Ctrl+Shift+K)
回退上一個光標操作Ctrl+U
重構(gòu)代碼
跳轉(zhuǎn)到定義處:F12
定義處縮略圖:只看一眼而不跳轉(zhuǎn)過去Alt+F12
列出所有的引用:Shift+F12
同時修改本文件中所有匹配的:Ctrl+F12
重命名:比如要修改一個方法名,可以選中后按F2理卑,輸入新的名字翘紊,回車,會發(fā)現(xiàn)所有的文件都修改過了藐唠。
跳轉(zhuǎn)到下一個Error或Warning:當有多個錯誤時可以按F8逐個跳轉(zhuǎn)
查看diff 在explorer里選擇文件右鍵 Set file to compare帆疟,然后需要對比的文件上右鍵選擇Compare with 'file_name_you_chose'.
查找替換
查找 Ctrl+F
查找替換 Ctrl+H
整個文件夾中查找 Ctrl+Shift+F
參考文檔:
VS Code 使用小技巧