[[264327]]

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

為什么使用VSCode

不為什么，就因?yàn)樗糜?，開源、免費(fèi)、顏值高，大廠出品實(shí)力派，特別是VSC的一次次更新，不少新的特性讓人眼前一亮，這不得不說是微軟的良心產(chǎn)品，而且有很多大牛也都由其他編輯器轉(zhuǎn)頭向了VSCode，其實(shí)一款編輯器是否優(yōu)秀主要也就是四個(gè)方面：

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

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

外觀（主題和圖標(biāo)）

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

• fairyFloss（我使用的最多的一個(gè)）

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

• Night Owl（偶爾使用）

• One Dark Pro（網(wǎng)上看人推薦的最多的一款）

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

• Material Icon（文件圖標(biāo)）

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

字體

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

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

配置

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

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

插件

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

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

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

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

結(jié)論

以上是我在開發(fā)Javascript、NodeJS、React工作的設(shè)置，大家有什么好的建議也可以提出來，一起討論學(xué)習(xí)！