[[264327]]

每個程序員都有一套屬于自己的編輯器，一款好用的編輯器帶來的不僅僅是工作效率的提升，更有可能讓自己的心情更加美好。

為什么使用VSCode

不為什么，就因為它好用，開源、免費、顏值高，大廠出品實力派，特別是VSC的一次次更新，不少新的特性讓人眼前一亮，這不得不說是微軟的良心產品，而且有很多大牛也都由其他編輯器轉頭向了VSCode，其實一款編輯器是否優秀主要也就是四個方面：

1. 能夠提高我們的工作效率
2. 對各種語言的支持如何，是否需要繁瑣的配置
3. 是否能夠擴展，通俗點就是插件多不多，好不好用
4. 是否適合自己，畢竟適合自己才是***的

而VSCode前三點無疑都是毋庸置疑的，而第四點我相信用過的人肯定都說好。既然VSCode這么強大，我們更加需要利用好他，來為我們創造價值！

外觀（主題和圖標）

為什么把外觀放在***位，因為愛美之心，人皆有之，首先就要把外觀打磨好，不一定說多么的花里胡哨，但至少能讓自己看的舒服，每天打開電腦就能夠讓自己有打開來寫代碼的欲望，下面我就來推薦下我用的最多的主題插件（以下是es6的Javascript代碼片段）：

• fairyFloss（我使用的最多的一個）

• Dracula Official（通常是我和fairyFloss切換的一款）

• Night Owl（偶爾使用）

• One Dark Pro（網上看人推薦的最多的一款）

• Material Theme（有很多選擇，用的人多）

• Material Icon（文件圖標）

主題很多，歡迎大家評論區留下你使用的主題

字體

• Fira Code（截圖里面就是）
• Input
• Source Code Pro
• Anonymous Pro
• Ubuntu Mono
• Menlo
• Consolas
• Hack

關于字體我之前的一篇文章推薦過，大家可以看看參考一下

配置

"editor.tabSize": 2,//設置Tab鍵兩空格 
"emmet.includeLanguages": {//為HTML和JavaScript啟用了emmet 
 "html": "html", 
 "javascript": "javascriptreact" 
}, 
"workbench.iconTheme": "material-icon-theme", 
"files.autoSave": "afterDelay",//設置延時保存，防止意外丟失 
"files.autoSaveDelay": 5000,//自動保存的延時時間 
"editor.wordWrap": "on", 
"editor.formatOnSave": true,//保存自動格式化 
"editor.formatOnPaste": true,//粘貼自動格式化 

以上是很少的我覺得比較好用的配置

插件

以下插件是我所用到的，覺得比較通用的，還有好多針對不同開發人員的插件也很好用，大家可以自己琢磨以下

• Bracket Pair Colorizer（括號的著色匹配，實際上我不怎么用）
• ESLint（不多說了，太強了）
• markdownlint（經常寫markdown）
• GitHub Pull Requests()
• GraphQL
• Import Cost(在編輯器中顯示導入/需要包大小)
• npm Intellisense
• Path Intellisense(路徑自動補全)
• IntelliSense for CSS class names
• React Native Tools
• Todo Tree （這個不多說了，代碼TODO樹）
• Version Lens
• Settings Sync（可以同步自己的VSCode設置、插件、主題等）
• Word Count（字數統計）
• Debug for Chrome（可以讓你直接在VSCode中調試你的Javascript代碼，其實我不怎么用）
• Prettier — Code formatter（格式化代碼，不能沒了它，下面是我對他的配置）

"prettier.jsxSingleQuote": true, 
"prettier.printWidth": 100, 
"prettier.semi": false, 
"prettier.useTabs": true, 
"prettier.tabWidth": 2, 

好用的插件實在太多，配置好你的VSCode，你就可以為所欲為了。

結論

以上是我在開發Javascript、NodeJS、React工作的設置，大家有什么好的建議也可以提出來，一起討論學習！