前端開發(fā)工具Visual Studio Code.
工欲善其事，必先利其器。只有熟練使用一款開發(fā)工具，才能優(yōu)雅高效地編寫代碼。前端開發(fā)工具數(shù)不勝數(shù)，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......,其中VSCode以其輕量且強(qiáng)大的代碼編輯功能和豐富的插件生態(tài)系統(tǒng)，獨(dú)受前端工師的青睞。網(wǎng)上有很多有關(guān)vscode的配置以及使用博客很多很多，不過只要看本文這么一篇就足夠。
VScode下載安裝
vscode屬于開源軟件，可以直接官網(wǎng)下載對應(yīng)版本。
下載好直接點(diǎn)擊exe文件打開軟件
vscode編輯器界面
VScode中文設(shè)置
vscode默認(rèn)的語言是英文，不過簡單幾步就可以將vscode設(shè)置成中文。
按快捷鍵“Ctrl+Shift+P”。
在“vscode”頂部會出現(xiàn)一個(gè)搜索框。
輸入“configure language”，然后回車。
“vscode”里面就會打開一個(gè)語言配置文件。
將“en-us”修改成“zh-cn”。
按“Ctrl+S”保存設(shè)置。
關(guān)閉“vscode”，再次打開就可以看到中文界面了。
VScode用戶設(shè)置
打開設(shè)置
文件== 》 首選項(xiàng) ==》設(shè)置，打開用戶設(shè)置。VScode支持選擇配置，也支持編輯setting.json文件修改默認(rèn)配置。
常用配置項(xiàng)：
（1）editor.fontsize用來設(shè)置字體大小，可以設(shè)置editor.fontsize : 14;
（2）files.autoSave這個(gè)屬性是表示文件是否進(jìn)行自動(dòng)保存，推薦設(shè)置為onFocusChange——文件焦點(diǎn)變化時(shí)自動(dòng)保存。
（3）editor.tabCompletion用來在出現(xiàn)推薦值時(shí)，按下Tab鍵是否自動(dòng)填入最佳推薦值，推薦設(shè)置為on;
（4）editor.codeActionsOnSave中的source.organizeImports屬性，這個(gè)屬性能夠在保存時(shí)，自動(dòng)調(diào)整 import 語句相關(guān)順序，能夠讓你的 import 語句按照字母順序進(jìn)行排列，推薦設(shè)置為true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；
（5）editor.lineNumbers設(shè)置代碼行號,即editor.lineNumbers ：true；
禁用自動(dòng)更新
文件 > 首選項(xiàng) > 設(shè)置（macOS：代碼 > 首選項(xiàng) > 設(shè)置，搜索update mode并將設(shè)置更改為none。
VScode常用快捷鍵
高效的使用vscode,記住一些常用的快捷鍵是必不可少的
ps：windows的 Ctrl，mac下?lián)Q成Command就行了
編輯器操作
通過Ctrl + ` 可以打開或關(guān)閉終端
Ctrl+P 快速打開最近打開的文件
Ctrl+Shift+N 打開新的編輯器窗口
Ctrl+Shift+W 關(guān)閉編輯器
詞的操作
選中一個(gè)詞：ctrl+ d
ctrl+ f ：搜索
ctrl+ alt + f： 替換
ctrl+ shift + f：在項(xiàng)目內(nèi)搜索
行的操作
重開一行：光標(biāo)在行尾的話，回車即可；不在行尾，ctrl+ enter 向下重開一行；ctrl+shift + enter 則是在上一行重開一行
刪除一行：光標(biāo)沒有選擇內(nèi)容時(shí)，ctrl+ x 剪切一行；ctrl +shift + k 直接刪除一行
移動(dòng)一行：alt + ↑ 向上移動(dòng)一行；alt + ↓ 向下移動(dòng)一行
復(fù)制一行：shift + alt + ↓ 向下復(fù)制一行；shift + alt + ↑ 向上復(fù)制一行
ctrl + z 回退
段落操作
Home 光標(biāo)跳轉(zhuǎn)到行頭
End 光標(biāo)跳轉(zhuǎn)到行尾
Ctrl + Home 跳轉(zhuǎn)到頁頭
Ctrl + End 跳轉(zhuǎn)到頁尾
Ctrl + Shift + [ 折疊區(qū)域代碼
Ctrl + Shift + ] 展開區(qū)域代碼
Ctrl + / 添加或取消行注釋
Shift + Alt +A 塊區(qū)域注釋
VScode插件安裝
在輸入框中輸入想要安裝的插件名稱，點(diǎn)擊安裝即可。安裝后沒有效果，可以重啟vscode
1、View In Browser
在瀏覽器里預(yù)覽網(wǎng)頁必備。運(yùn)行html文件
2、open in browser
通過快捷鍵快速瀏覽器中打開當(dāng)前頁面
3、CSS Tree
給選中的HTML/JSX生成css樹
4、Auto Rename Tag
自動(dòng)修改匹配的 HTML 標(biāo)簽。
5、Path Intellisense
智能路徑提示，可以在你輸入文件路徑時(shí)智能提示。
6、CSS Peek
定位 CSS 類名。
7、vscode-json
處理 JSON 文件，用法看圖：
https://vdn1.vzuu.com/SD/cd9d9236-2357-11eb-8654-d2d78b7a1889.mp4?disable_local_cache=1&auth_key=1621426246-0-0-842154ca8c0e4ccd031d0758348df660&f=mp4&bu=pico&expiration=1621426246&v=hw
8、Regex Previewer
實(shí)時(shí)預(yù)覽正則表達(dá)式的效果。
