1.全局快捷鍵
2.如何讓你的文件類型一目了然
插件搜索icons 安裝vscode-icons
安裝完成后圖標
3. 如何更加高效地管理項目
vscode默認一次只能打開一個項目，安裝Project Manger可以不用重啟編輯器快速切換不同的項目
打開命令行輸入Project Manger，保存項目就可以在左下角或者Project中快速切換
4.格式化代碼
vscode默認格式化代碼快捷鍵
也可以安裝beautify插件來個性化配置需要的格式方式
5.搭建各類語言的運行環(huán)境
Code Runner
安裝完成后點擊右上角的播放按鈕就可以執(zhí)行
6.和chrome聯(lián)動
7.規(guī)范代碼
安裝ESLint 規(guī)范代碼，需要npm全局安裝eslint，然后eslint --init初始化配置
8.提高react開發(fā)效率的插件
9.常用dark主題
10.react中的jsx語法中自動補全標簽
找到“文件”->“首選項”->“設置”，在設置中輸入下面配置
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {"javascript": "javascriptreact"}
11.縮進問題
vscode —— 編碼縮進空格轉(zhuǎn)為tab
12.vue文件的縮進
首先在應用商店中搜索“Vetur”插件安裝，然后進行下面操作：
文件->首選項->設置，然后在右邊編輯框輸入以下設置
個人習慣四空格，官方推薦2空格，通過右鍵格式化文件進行格式
{
"vetur.format.defaultFormatter.html": "prettier"
//設置右鍵格式化時為單引號
"prettier.singleQuote": true,
//設置縮進為 4空格
"prettier.tabWidth": 4,
}
13.版本管理
- Better Merge : 用來解決文件沖突的不二利器，經(jīng)過多個版本的更新，穩(wěn)定很多。。推薦
- Folder Indexing: 提高文件的索引速度[常駐于內(nèi)存中]，這對于項目比較大的小伙伴必須安裝啊
-
Git Indicators: 類似
github上的統(tǒng)計提交代碼增減條目，在狀態(tài)欄顯示，很小巧實用 - gitk:有了這個，版本實時比對，這個真心好
- indent-rainbow: 會給縮進添加一種顏色,讓你更加直觀的看到代碼層次
14.自己的配置
{
"workbench.iconTheme": "vscode-icons",
"window.zoomLevel": 1,
"editor.mouseWheelZoom": true,
"vetur.format.defaultFormatter.html": "prettier",
//設置右鍵格式化時為單引號
"prettier.singleQuote": true,
//設置縮進為 4空格
"prettier.tabWidth": 4,
"view-in-browser.customBrowser": "chrome",
"explorer.confirmDragAndDrop": false,
}
15.新增
- Bracket Pair Colorizer ：讓代碼的各種括號呈現(xiàn)不同的顏色。
- Color Picker ：可以直接在編輯器里打開色板，選擇各種模式的顏色。
- Document This ：可以給函數(shù)、類等自動的加上詳細的注釋。
-
gi ：可以給
.gitignore文件添加各種語言忽略文件配置。
16.VSCode settings Sync插件同步用戶配置
vscode同步多臺電腦的配置的插件
VSCode settings Sync插件同步用戶配置
GitHub Gist: 5165be4a0a0b5c10354db8eadb8cd39f
17.prettier 保存前格式化代碼
如果沒有自動格式化設置 setting - 搜索save
18.VScode 實時代碼不提示配置解決
當使用vscode進行編碼時，會遇到輸入的新代碼不會進行提示，此時打開對應的設置即可！
詳細配置： "editor.suggest.snippetsPreventQuickSuggestions": false
