高效的vscode編碼配置。
程式碼編輯器很多，有些是免費的，有些是付費的。其中最喜歡的程式碼編輯器是 Visual Studio Code。它是免費的，並具有強大的功能，我陸續拋棄了Atom、Sublime Text以及也很強大的WebStorm。
今天，我將分享我最喜歡的程式碼編輯器設定，用於我的 Web 開發。我將從程式碼編輯器的外觀開始。畢竟外觀顏值很重要。
???? 主題
我最常用的 VS Code 主題是Snazzy Operator，目前正在使用。
此主題基於 hyper-snazzy 並針對與 Operator Mono 字型一起使用進行了最佳化。我喜歡 ???? 這個主題。
⭐ 我之前使用過的其他一些主題：
✒ 字型
對我的程式碼編輯器來說，另一個重要的事情是，我用於程式碼編輯器的字型是 JetBrains Mono。這是帶有連字支援的免費字型。
連字是一種新的字型格式，支援符號裝飾，而不是= >、< =。
在使用 JetBrains Mono 之前，我使用了Operator Mono。這也是一個不錯的字型。
⭐ 我以前使用過的其他一些字型：
???????????? 您要使用我的設定，使用我的 VS Code 字型嗎？在 VS Code 中，按 Ctrl + P，輸入 settings.json 並開啟該檔案。現在，用我的給定值替換下面的屬性值。
???? 圖示
檔案圖示增強了 VS Code 的外觀，主要是它可以幫助我們透過給定的圖示區分不同的檔案和資料夾。對於我的 VS Code，我使用兩個檔案圖示：
我使用的擴充套件
Auto Rename Tag
自動重新命名配對的 HTML / XML 標籤，也可以在 JSX 中使用。
在 settings.json 檔案中的 auto-rename-tag.activationOnLanguage 中新增一項以設定副檔名將被啟用的語言。預設情況下，它是**[“ *”]**，將為所有語言啟用。
Bracket Pair Colorizer 2
此副檔名允許用顏色標識匹配的括號，使用者可以定義要匹配的符號，以及要使用的顏色。
Color Highlight
此擴充套件程式設定在文件中找到的 css / web 顏色的樣式。
CSS Peek
DotENV
在 .env 檔案中高亮顯示鍵值對。
ES7 React/Redux/GraphQL/React-Native snippets
該擴充套件為您提供 ES7 中的 JavaScript 和 React / Redux 片段，以及 VS Code 的 Babel 外掛功能。
Highlight Matching Tag
突出顯示匹配的開始或結束標籤。
我使用的擴充套件的樣式：
Image preview
懸停時顯示影象預覽。
Indent Rainbow
此擴充套件使文字前面的縮排著色，在每個步驟上交替使用四種不同的顏色。
REST Client
REST Client 允許您傳送 HTTP 請求並直接在 Visual Studio Code 中檢視響應。
Settings Sync
使用 GitHub Gist 在多臺機器上同步設定，程式碼片段，主題，檔案圖示，啟動，鍵繫結，工作區和擴充套件。具體操作可以看我的這篇文章《小技巧|同步你的 VSCode 設定及擴充套件外掛，換機不用愁！》
TODO Highlight
在程式碼中突出顯示 TODO，FIXME 和其他註釋。
Version Lens
顯示 package.json 檔案中每個軟體包的最新版本。
???? Terminal 設定
我的作業系統是 Windows，我透過命令列使用 Git，所以我有一個 Git terminal，我用這個終端作為我的整合 terminal。我的 terminal 設定如下：
✔ 有用的 VS Code 快捷鍵
我在日常生活中使用了一些重要的鍵盤快捷鍵，這些快捷方式使 Visual Studio Code 提高了我的工作效率。
高效的vscode編碼配置。
程式碼編輯器很多，有些是免費的，有些是付費的。其中最喜歡的程式碼編輯器是 Visual Studio Code。它是免費的，並具有強大的功能，我陸續拋棄了Atom、Sublime Text以及也很強大的WebStorm。
今天，我將分享我最喜歡的程式碼編輯器設定，用於我的 Web 開發。我將從程式碼編輯器的外觀開始。畢竟外觀顏值很重要。
???? 主題
我最常用的 VS Code 主題是Snazzy Operator，目前正在使用。
此主題基於 hyper-snazzy 並針對與 Operator Mono 字型一起使用進行了最佳化。我喜歡 ???? 這個主題。
⭐ 我之前使用過的其他一些主題：
Oceanic Next - 我使用了 Oceanic Next (dimmed bg)emedy - 我使用了 Remedy Dark (straight)✒ 字型
對我的程式碼編輯器來說，另一個重要的事情是，我用於程式碼編輯器的字型是 JetBrains Mono。這是帶有連字支援的免費字型。
連字是一種新的字型格式，支援符號裝飾，而不是= >、< =。
在使用 JetBrains Mono 之前，我使用了Operator Mono。這也是一個不錯的字型。
⭐ 我以前使用過的其他一些字型：
Operator Mono - 支援連字。Fira Code - 免費並支援連字。Dank Mono - 付費並支援連字。???????????? 您要使用我的設定，使用我的 VS Code 字型嗎？在 VS Code 中，按 Ctrl + P，輸入 settings.json 並開啟該檔案。現在，用我的給定值替換下面的屬性值。
???? 圖示
檔案圖示增強了 VS Code 的外觀，主要是它可以幫助我們透過給定的圖示區分不同的檔案和資料夾。對於我的 VS Code，我使用兩個檔案圖示：
我使用的擴充套件
Auto Rename Tag
自動重新命名配對的 HTML / XML 標籤，也可以在 JSX 中使用。
在 settings.json 檔案中的 auto-rename-tag.activationOnLanguage 中新增一項以設定副檔名將被啟用的語言。預設情況下，它是**[“ *”]**，將為所有語言啟用。
Bracket Pair Colorizer 2
此副檔名允許用顏色標識匹配的括號，使用者可以定義要匹配的符號，以及要使用的顏色。
Color Highlight
此擴充套件程式設定在文件中找到的 css / web 顏色的樣式。
CSS Peek
Peek：內聯載入 css 檔案並在那裡進行快速編輯。（Ctrl + Shift + F12）Go to：直接跳轉到 CSS 檔案或在新的編輯器（F12）中開啟Hover：在符號上懸停顯示定義（Ctrl + hover）DotENV
在 .env 檔案中高亮顯示鍵值對。
ES7 React/Redux/GraphQL/React-Native snippets
該擴充套件為您提供 ES7 中的 JavaScript 和 React / Redux 片段，以及 VS Code 的 Babel 外掛功能。
Highlight Matching Tag
突出顯示匹配的開始或結束標籤。
我使用的擴充套件的樣式：
Image preview
懸停時顯示影象預覽。
Indent Rainbow
此擴充套件使文字前面的縮排著色，在每個步驟上交替使用四種不同的顏色。
REST Client
REST Client 允許您傳送 HTTP 請求並直接在 Visual Studio Code 中檢視響應。
Settings Sync
使用 GitHub Gist 在多臺機器上同步設定，程式碼片段，主題，檔案圖示，啟動，鍵繫結，工作區和擴充套件。具體操作可以看我的這篇文章《小技巧|同步你的 VSCode 設定及擴充套件外掛，換機不用愁！》
TODO Highlight
在程式碼中突出顯示 TODO，FIXME 和其他註釋。
Version Lens
顯示 package.json 檔案中每個軟體包的最新版本。
???? Terminal 設定
我的作業系統是 Windows，我透過命令列使用 Git，所以我有一個 Git terminal，我用這個終端作為我的整合 terminal。我的 terminal 設定如下：
✔ 有用的 VS Code 快捷鍵
我在日常生活中使用了一些重要的鍵盤快捷鍵，這些快捷方式使 Visual Studio Code 提高了我的工作效率。
Ctrl + P ：轉到檔案，您可以在 Visual Studio Code 中移動到開啟的檔案/資料夾的任何檔案。Ctrl + ` ：在 VS Code 中開啟 terminalAlt + Down：下移一行Alt + Up：上移一行Ctrl + D：將選定的字元移動到下一個匹配字串上Ctrl + Space：觸發建議Shift + Alt + Down：向下複製行Shift + Alt + Up：向上複製行Ctrl + Shift + T：重新開啟最新關閉的視窗