插件
主題
Snazzy Operator
- Oceanic Next - 我使用了 Oceanic Next (dimmed bg)
- emedy - 我使用了 Remedy Dark (straight)
風格
vetur
針對Vue.js框架,提供代碼風格和語法提示
提高效率
Auto Rename Tag
自動修改對應標簽
在 settings.json 文件中的 auto-rename-tag.activationOnLanguage
中添加一項以設置擴展名將被激活的語言。默認情況下,它是[“ *”],將為所有語言激活。
"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
Bracket Pair Colorizer 2
用顏色標識匹配的括號以及括號內容
Highlight Matching Tag
突出顯示匹配的開始或結束標簽及標簽內容。
我使用的擴展的樣式:
"highlight-matching-tag.styles": {
"opening": {
"left": {
"custom": {
"borderWidth": "0 0 0 1.5px",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
},
"right": {
"custom": {
"borderWidth": "0 1.5px 0 0",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
}
}
}
Image preview
懸停時顯示圖像預覽。
Settings Sync
多台機器上同步vscode設置
TODO Highlight
在代碼中突出顯示 TODO,FIXME 和其他注釋。
語法補充
react es語法快捷鍵
ES7 React/Redux/GraphQL/React-Native snippets
React生成模板代碼快捷鍵
Simple React Snippets
針對js的插件,包含了js的常用語法關鍵字,很實用
JavaScript Snippet Pack
ES6生成模板代碼快捷鍵
JavaScript (ES6) code snippets
格式化
快速格式化代碼
Prettier - Code formatter
發布
Live server
從端口預覽非編譯靜態文件
# 文件注釋和函數注釋
KoroFileHeader
=================================
# 寫CSS顏色代碼工具。使用:按#就出現了。比color pick好用一點
vs color picker
# sass轉換css、 min.css工具
easy sass
# 快速格式化代碼
Format Modified
# 正則大全
any-rule
參考閱讀
問題
vscode配置插件時候不能正確跳轉json
C:\Users\XXXX\.vscode\extensions
從這里手動配置json
VS code快捷鍵
1、注釋:
a) 單行注釋:[ctrl+k,ctrl+c] 或 ctrl+/
b) 取消單行注釋:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)
c) 多行注釋:[alt+shift+A]
d) 多行注釋:/**
2、移動行:alt+up/down
3、顯示/隱藏左側目錄欄 ctrl + b
4、復制當前行:shift + alt +up/down
5、刪除當前行:shift + ctrl + k
6、控制台終端顯示與隱藏:ctrl + ~
7、查找文件/安裝vs code 插件地址:ctrl + p
8、代碼格式化:shift + alt +f
9、新建一個窗口: ctrl + shift + n
10、行增加縮進: ctrl + [
11、行減少縮進: ctrl + ]
12、裁剪尾隨空格(去掉一行的末尾那些沒用的空格) : ctrl + shift + x
13、字體放大/縮小: ctrl + ( + 或 - )
14、拆分編輯器 :ctrl + 1/2/3
15、切換窗口: ctrl + shift + left/right
16、關閉編輯器窗口: ctrl + w
17、關閉所有窗口 : ctrl + k + w
18、切換全屏 :F11
19、自動換行: alt + z
20、顯示git: ctrl + shift + g
21、全局查找文件:ctrl + p
22、顯示相關插件的命令(如:git log):ctrl + shift + p
23、選中文字:shift + left / right / up / down
24、折疊代碼: ctrl + k + 0-9 (0是完全折疊)
25、展開代碼: ctrl + k + j (完全展開代碼)
26、刪除行 : ctrl + shift + k
27、快速切換主題:ctrl + k / ctrl + t
28、快速回到頂部 : ctrl + home
29、快速回到底部 : ctrl + end
30、格式化選定代碼 :ctrl + k / ctrl +f
31、選中代碼 : shift + 鼠標左鍵
32、多行同時添加內容(光標) :ctrl + alt + up/down
33、全局替換:ctrl + shift + h
34、當前文件替換:ctrl + h
35、打開最近打開的文件:ctrl + r
36、打開新的命令窗:ctrl + shift + c