Visual Studio Code
介紹
Visual Studio Code 是一款非常輕量的前端代碼撰寫工具，也是目前比較主流的，其中還包含了豐富的插件市場、非常好看的界面風格、可在軟體內直接使用命令列工具等，
:::warning 建議
在學習前端之前可以先把軟體下載好，方便實踐操作，
:::
安裝
官方下載地址：https://code.visualstudio.com
漢化
我們下載完后是英文版的，所以要去 VS Code 的插件市場中去下載中文版插件 Chinese
安裝插件后，重新啟動 VS Code
開發習慣配置
以下是我的個人習慣，小伙伴們可以自行看是否需要
- 設定手動代碼提示快捷鍵
檔案 -> 首選項 -> 鍵盤快捷鍵方式
或者 Windows 快捷鍵：CTRL + K + S
擴展插件
VS Code 強大的插件市場，主要介紹幾款常用的插件，
:::tip 提示
如果你目前用不上這些插件，可以先不用安裝，
:::
One Dark Pro
好看的代碼主題
GitLens — Git supercharged
Git 記錄查看工具，方便隨時隨刻查看某個人某時間點改了某一行代碼，方便查看單個檔案的修改記錄，目前小伙伴們可能用不上，需要先掌握 Git 技術后才能用，
Path Autocomplete
URL 路徑補充插件，當你需要查找某個 src 路徑的時候，它會給你代碼提示，例如寫 img 標簽的 src 路徑時候能用上，
Vuter
用于高亮 .vue 檔案的代碼，主要適用于 Vue2.0，目前如果用不上可以先不安裝，
Prettier - Code formatter
用于格式化大部分語言代碼，還可以搭配組態檔，自定義格式化風格，
在專案根目錄下新建 .prettierrc 檔案，
{
"printWidth": 170,
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}
Live Server
可以直接把你的 .html 檔案部署到服務端，
快捷鍵大全
列舉了比較常用的快捷鍵方式
| 功能名稱 | 快捷鍵 |
|---|---|
| 當前檔案搜索 | Ctrl + F |
| 全域搜索 | Ctrl + Shift + F |
| 全選 | Ctrl + A |
| 將選中文本轉換為大寫 | Ctrl + U（需要設定快捷鍵） |
| 將選中文本轉換為小寫 | Ctrl + P（需要設定快捷鍵） |
| 折疊代碼 | Ctrl + K + 0~9（代表多少級） |
| 展開折疊代碼 | Ctrl + K + J |
| 跳入選中函式方法體 | F12 |
| 復制 | Ctrl + C |
| 粘貼 | Ctrl + V |
| 打開終端 | Ctrl + ~ |
| 洗掉當前行 | Ctrl + X |
| 撤銷更改 | Ctrl + Z |
| 代碼換行 | Alt + Z |
| 注釋/取消注釋 | Ctrl + / |
| 選中多列 | Shift + Alt + 滑鼠移動 |
| 連續選中關鍵詞 | Ctrl + D |
| 復制行 | Shift + Alt + ↑ 或者 ↓ |
| 移動行 | Alt + ↑ 或者 ↓ |
| 重命名 | F2 |
| 切換打開檔案 | Ctrl + Tab |
| 切換應用 | Alt + Tab |
| 創建HTML5頁面結構 | 輸入 html5 |
| 跳轉到上一個修改處 | Alt + ← |
| 跳轉到下一個修改處 | Alt + → |
參考
最全面的前端筆記來啦，包含了入門到入行的筆記，還支持實時效果預覽，小伙伴們不需要在花時間去寫筆記，或者是去網上找筆記了，面試高頻提問和你想要的筆記都幫你寫好了，支持移動端和PC端閱讀，深色和淺色模式，需要完整在線版，在評論區回復 1 哦，
原文鏈接：https://note.noxussj.top/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540552.html
標籤：其他
上一篇：認識一下 Mobx