點選上方 "程式員小樂"關注, 星标或置頂一起成長
每天淩晨00點00分, 第一時間與你相約
每日英文
Sometimes the best way to get someone's attention, is to stop giving them yours.
有時候，讓别人在乎你的最好辦法，就是不那麼在乎他們。
每日掏心話
所得，從另一個角度看就是所失。忙于事業的時間多陪伴家人的時間就少，陪家人時間多忙于事業上的時間就少。
來自：做工程師不做碼農 | 責編：樂樂
連結：segmentfault.com/a/1190000022046327
程式員小樂(ID:study_tech)
第 880 次推文 圖源：百度
往日回顧：面試官問我：用了HTTPS就安全了嗎？用了HTTPS會被抓包嗎？我竟然回答不上來...
正文
代碼編輯器很多，有些是免費的，有些是付費的。其中最喜歡的代碼編輯器是 Visual Studio Code。它是免費的，并具有強大的功能，我陸續抛棄了Atom、Sublime Text以及也很強大的Webstorm。
???? 主題
我最常用的 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 并打開該檔案。現在，用我的給定值替換下面的屬性值。
{
"workbench.colorTheme": "Snazzy Operator",
"editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 22,
"editor.letterSpacing": 0.5,
"editor.fontWeight": "400",
"editor.cursorStyle": "line",
"editor.cursorWidth": 5,
"editor.cursorBlinking": "solid"
} ???? 圖 高效的編碼：我的VS Code設定 标
檔案圖示增強了 VS Code 的外觀，主要是它可以幫助我們通過給定的圖示區分不同的檔案和檔案夾。對于我的 VS Code，我使用兩個檔案圖示：
- Material Icon Theme - VS Code 最受歡迎的圖示主題之一。
- Material Theme Icons - 目前正在使用。
我使用的擴充
???? Auto Rename Tag
自動重命名配對的 HTML / XML 标簽，也可以在 JSX 中使用。
在 settings.json 檔案中的
auto-rename-tag.activationOnLanguage
中添加一項以設定擴充名将被激活的語言。預設情況下，它是[“ *”]，将為所有語言激活。
"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"] ???? 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
突出顯示比對的開始或結束标簽。
我使用的擴充的樣式：
"highlight-matching-tag.styles": {
"opening": {
"left": {
"custom": {
"borderWidth": "0 0 0 1.5px",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
},
"right": {
"custom": {
"borderWidth": "0 1.5px 0 0",
"borderStyle": "solid",
"borderColor": "yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
}
}
} ???? 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 設定如下：
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.fontFamily": "FuraMono Nerd Font",
"terminal.integrated.fontSize": 12,
"terminal.integrated.rightClickCopyPaste": true ✔ 有用的 VS Code 快捷鍵
我在日常生活中使用了一些重要的鍵盤快捷鍵，這些快捷方式使 Visual Studio Code 提高了我的工作效率。
- Ctrl + P ：轉到檔案，您可以在 Visual Studio Code 中移動到打開的檔案/檔案夾的任何檔案。
- Ctrl + ` ：在 VS Code 中打開 terminal
- Alt + Down：下移一行
- Alt + Up：上移一行
- Ctrl + D：将標明的字元移動到下一個比對字元串上
- Ctrl + Space：觸發建議
- Shift + Alt + Down：向下複制行
- Shift + Alt + Up：向上複制行
- Ctrl + Shift + T：重新打開最新關閉的視窗
歡迎在留言區留下你的觀點，一起讨論提高。如果今天的文章讓你有新的啟發，學習能力的提升上有新的認識，歡迎轉發分享給更多人。
歡迎各位讀者加入訂閱号程式員小樂技術群，在背景回複“加群”或者“學習”即可。
猜你還想看
阿裡、騰訊、百度、華為、京東最新面試題彙集
你這API設計的真”辣雞“，簡直沒法看！
為什麼超級計算機都不用Windows或MacOS系統？
關注訂閱号「程式員小樂」，收看更多精彩内容