1. vscode官網地址：https://code.visualstudio.com 找到mac對應的下載地址，下載后的文件是 zip壓縮包，解壓后將文件拖到Application目錄下即可。
2. 安裝各種插件，不分先后，列表如下：
1.Chinese Language Pack for Visual Stidio Code 第一個必備插件自然是vs code的中文簡體包，新手一開始不適應vs code這個IDE，建議可以先行使用中文版。 2.open-in-browser 由於 VS Code 沒有提供直接在瀏覽器中打開文件的內置界面，所以此插件在快捷菜單中添加了在默認瀏覽器查看文件選項，以及在客戶端(Firefox，Chrome，IE)中打開命令面板選項。 3.vscode-icons 好的代碼始於顏值，vscode-icons是能夠讓右側文件夾與不同文件都顯示圖標。 4.Auto Rename Tag 當HTML標簽被修改其中之一時，另一半標簽會跟着被修改。 5.beautify 良好的拓展性，可以格式化JSON|JS|HTML|CSS|SCSS代碼,比內置格式化好用 6.Quokka Quokka 是一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易於配置，並能夠預覽變量的函數和計算值結果。 7.CSS Peek 使用此插件，你可以追蹤至樣式表中 CSS 類和 id定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會跳轉到你樣式定義的地方。 8.HTML BoilerPlate 通過使用 HTML 模版插件，你只需在空文件中輸入 html，並按 Tab 鍵，即可自動生成干凈的HTML文檔結構。 9.Prettier Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用 Prettier，並將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。 10.Themes 在眾多的實用插件中，豈能少了漂亮的主題呢？你每天都會與你的 VS Code 編輯器進行“親密的接觸”，為何不把它打扮得更漂亮些呢？這個插件可以更改頁面主題。 11.Auto Close Tag 匹配標簽，關閉對應的標簽。很實用【適用於HTML/XML】。 12.Path AutoComplete 路徑自動補全，這個是必須插件之一。 13.HTML CSS Support 讓 html 標簽上寫class 智能提示當前項目所支持的樣式。新版已經支持scss文件檢索。
快捷鍵
打開一個新窗口 Ctrl+Shift+N 關閉窗口 Ctrl+Shift+W 新建文件 Ctrl+N 文件之間切換 Ctrl+Tab 復制或剪切當前行/當前選中內容 Ctrl+C 、 Ctrl+V 代碼格式化： Shift+Alt+F 上下移動一行 Alt+Up 或 Alt+Down 向上向下復制一行 Shift+Alt+Up 或 Shift+Alt+Down 在當前行下方插入一行 Ctrl+Enter 在當前行上方插入一行 Ctrl+Shift+Enter 移動到行首 Home 移動到行尾 End 移動到文件結尾 Ctrl+End 移動到文件開頭 Ctrl+Home 移動到定義處 F12 定義處縮略圖 只看一眼而不跳轉過去 Alt+F12 找到所有的引用 Shift+F12 同時修改本文件中所有匹配的 Ctrl+F12 重命名 比如要修改一個方法名，可以選中后按 F2，輸入新名字，回車，則所有該方法的引用也都同步更新了 跳轉到下一個 Error 或 Warning 當有多個錯誤時可以按 F8 逐個跳轉 查找 Ctrl+F 查找替換 Ctrl+H 整個文件夾中查找 Ctrl+Shift+F
Ok,完畢，
引自 https://blog.csdn.net/weixin_43243583/article/details/86755485