2023年春節前夕mac筆記本罷工了，開工后喜提了紅米筆記本w11系統，搭建前端環境時，下載了VScode編輯器，從而來匯總一下vscode常用的一些插件和設置問題，從而得到一款不卡頓的編輯器。
一、vscode下載
我是在筆記本的store商店下載的，當然大家也可以去vscode官網下載（https://code.visualstudio.com/Download），安裝步驟不在贅述。
二、常用插件
1、chinese 簡體中文
? ? ? 適用于想漢化vscode界面的同學，安裝后使用ctrl+shift+p，并重啟軟件 更新配置，可以在擴展界面搜索 display language 回車選擇簡體中文，配置生效
2、live server
? ? ? 開啟一個本地服務器，支持代碼熱更新，修改代碼后自動刷新頁面
使用：在html頁面點擊鼠標右鍵，選擇open in live server選項
3、html css support
? ? ? ?
4、open in browser
? ? ?打開瀏覽器瀏覽功能
5、prettier 代碼格式化
安裝完成
在設置界面搜索format
editer default formatter? ? ?設置為prettier?
并勾選format on save(保存時格式化)
6、css peek 定位樣式的插件
7、JavaScript (ES6) code snippets（js的快速插入）
8、Bracket Pair Color DLW? ?快速匹配括號顏色，已經并入vscode
9、Vetur? （vue插件）
屬性自動換行的問題，不換行的操作如下：
? vs安裝vetur插件
? 打開vscode的設置界面，找到format->default formatter.html
設置好之后，往下滑到Format：defaultF偶然Matter option，在setting.json中設置信息
"vetur.format.options.tabSize": 4, // 每個縮進級別的空格數，由所有格式化程序繼承
"vetur.format.defaultFormatterOptions": {
?"js-beautify-html": {
?????// - auto: 僅在超出行長度時才對屬性進行換行
?????// - force: 對除第一個屬性外的其他每個屬性進行換行
?????// - force-aligned: 對除第一個屬性外的其他每個屬性進行換行，并保持對齊
?????// - force-expand-multiline: 對每個屬性進行換行
?????// - aligned-multiple: 當超出折行長度時，將屬性進行垂直對齊
?????// - force-expand-multiline：屬性折行對齊方式 "wrap_attributes": "auto", "wrap_line_length": 1200, // 設置一行多少字符換行 "semi": false,
????// 是否在每行末尾添加分號 "singleQuote": true, // 使用單引號
?????},
?????// 補充：script標簽內 js 代碼保存自動換行的問題
"vetur.format.defaultFormatter.js": "vscode-typescript",
?"vetur.format.scriptInitialIndent": true,
?// js部分是否有初始縮進
?"vetur.format.styleInitialIndent": true,
?// style部分是否有初始縮進
?}
10、ES7 React/Redux/GraphQL/React-Native snippets（react插件）
11、Code Spell Checker（檢查代碼拼寫是否正確）
12、project-tree（自動生成項目目錄文件結構樹，并寫入readme中）
使用shift+ctrl+p輸入project tree 找到需要生成目錄的項目回車
三、快捷鍵
新建文件：ctrl+n
文件之間的切換：ctrl+tab
放大視圖：ctrl+加號鍵
縮小視圖：ctrl+減號鍵
全屏顯示：F11
生成骨架屏：輸入“? ！”，按下tab鍵
利用插件在瀏覽器中預覽：點擊鼠標右鍵，在彈出出口中點擊“open in default browser”
注釋：ctrl+/
四、vscode setting配置
方式一、界面操作
1、字體設置
? ?2、html標簽同步修改功能，等同于auto rename tag 插件
打開設置，搜索linked editing， 勾住該選項
2、settings.json文件
打開方式：ctrl + shift + p,搜索settings(JSON),選用戶設置的settings,打開文件設置相關信息
詳細配置可參考：
https://zhuanlan.zhihu.com/p/676121508
五、總結vscode配置
方式：1、插件，? ? ?2、設置界面操作，? 3、settings.json文件
