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