工慾善其事必先利其器，趁手的工具會使我們開發事半功倍。
市面上的編輯器我用過許多，
編輯器使用經歷
Notepad++，（開源）這個應該是最輕量級的吧，查看代碼還好，編輯代碼就算了
官網地址：https://notepad-plus-plus.org/
Brackets，（開源）這個也不錯，github-star：30k了，上次發佈版本是6月18號，我當時棄用的原因是因爲對vue支持不太友好
官網：http://brackets.io/
Atom ，（開源）github-star：47.4k，github官方出品
官網地址：https://atom.io
WebStorm，(收費）,這是一款很強大的編輯器，基本上就是零配置，功能豐富，缺點也很明顯，啓動慢，並且付費，沒有中文版，中文需要漢化，不知道官方現在有沒有中文包，好久沒關注了
官網地址：https://www.jetbrains.com/webstorm/
Sublime Text：（收費），這也是一款算是比較輕量級的編輯器，功能需要自己安裝擴展插件來完善，我用了好長一段時間
官網地址：http://www.sublimetext.com/
HBuilder：（免費），在國產編輯器中算是不錯的，支持的功能也很多，當時用它來開發app，當時很想支持一下國產，但是當項目越來越大時，會很卡，超級卡，如果幾個項目同時啓動，估計就會掛掉了
官網地址：http://www.dcloud.io/
vscode
vscode是我今天要重點介紹的一款編輯器，微軟開源，github-star：66k
官網地址：https://code.visualstudio.com/
大概是從去年年初的時候接觸到vscode，一直使用到今天，我並沒有否定上面所列舉的那些編輯器，只是vscode更適合我，
每個編輯器都有自己的優點、賣點。
沒有最好的兵器，只有最趁手的兵器。
vscode有一個很好的賣點，就是它支持中文，這是廣大開發者的福利
vscode和很多編輯器一樣通過擴展插件來完善自己的功能
vscode常用插件介紹
安裝插件我有個重要的參考指標，就是下載量
下載量越是受歡迎成都一個參考指標，通常情況下1M以下的下載量我都會慎重考慮，
⚠️：插件不是裝的越多越好，有的插件間會有衝突，插件裝的太多，會讓編輯器變得卡頓，
也就是說，在最好用，最受歡迎的插件裏面挑選你最需要的
vscode內部集成了git，如果你的團隊也是使用git，那麼我想vscode一定是你的首選
GitLens — Git supercharged
截止目前下載量：11M
介紹
GitLens增強了構建在vscode代碼中的Git功能。它幫助您通過Git blame註釋和代碼鏡頭直觀地看到代碼作者，無縫地導航和探索Git存儲庫，通過強大的比較命令獲得有價值的見解，等等。
裝上以後，是這個樣子，每一行 code 的作者、提交時間、commit log 等信息，一目瞭然。
安裝成功後，會出現這個圖標
如果開發是vscode+git,這個插件強烈推薦，一眼就能看到是誰改了你的代碼😂
Git History
截止目前下載量：4.2M
介紹：
查看和搜索git日誌以及圖形和詳細信息。
查看文件的前一個副本。
查看和搜索歷史
- 查看一個或所有分支的歷史(git日誌)
- 查看文件的歷史記錄
- 查看文件中某一行的歷史(Git fault)。
- 查看作者的歷史
比較:
- 比較分支
- 比較有
- 跨提交比較文件
其他特點:
- Github化身
- 挑選提交
- 重新提交
- 從提交創建分支
- 樹狀視圖中的視圖提交信息(所有更改的快照)
- 合併和變基
更多功能需要自己挖掘
Auto Close Tag
截止目前下載量：2.2M
自動添加HTML/XML關閉標籤,寫前一半標籤，後面一半自動補全
Auto Rename Tag
截止目前下載量：1.1M
自動重命名成對的HTML/XML標記
修改了html標籤的一半（前面或後面），另一半自動修改，（注意輸入法要在英文模式下）
Beautify
截止目前下載量：6.7M
代碼中美化javascript、JSON、CSS、Sass和HTML。
這個都會安裝吧，代碼美化
Bracket Pair Colorizer
截止目前下載量：3.1M
這個擴展允許用顏色來標識匹配的括號。用戶可以定義要匹配的字符和要使用的顏色。
成對的括號（大括號，小括號）顏色相同，這在代碼多層括號嵌套時顯得尤爲重要。
ESLint
截止目前下載量：15M
這個不需要介紹了吧，代碼格式校驗，支持自定義配置，錯誤是紅色的波浪線，警告是綠色的
JavaScript (ES6) code snippets
截止目前下載量：2.9M
用於vscode編輯器的ES6語法中的JavaScript代碼片段(同時支持JavaScript和TypeScript)。
這個功能我經常用
js裏敲clg，然後回車=> console.log(object);
在調試的時候很方便實用
One Dark Pro
截止目前下載量：7.8M
編輯器顏色主題，一直是我喜歡的風格，
Material Icon Theme
截止目前下載量：4.8M
很漂亮的圖標庫，用於編輯器左側樹狀菜單文件和文件夾圖標顯示
Vetur
截止目前下載量：7.1M
vue項目必裝插件，用於vue代碼高亮格式化等
Bookmarks
截止目前下載量：1.3M
當代碼行數很大的時候，爲代碼添加書籤，再也不怕迷路了，如果忘記了快捷鍵，可以在代碼中右擊鼠標
使用簡單
Project Manager
截止目前下載量：2.2M
如果本地項目很多的話，可以用這個插件管理項目，可以快速切換項目，並且每次只打開一個項目，多項目並行開發的最佳選擇
關於vscode的插件就介紹那麼多了
自定義代碼片段
在命令面板中輸入Configure User Snippets
選擇你要編輯的代碼片段，我們一vue來舉例
選擇vue.json進行編輯
下面是我的配置
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>",
" </div>",
"</template>\n",
"<script>",
"export default {",
" components: {},",
" data() {",
" return {};",
" },",
" created() {},",
" methods: {}",
"};",
"</script>\n",
"<style lang=\"scss\" scoped>",
"</style>",
"$2"
],
"description": "Log output to console"
}
}格式都是支持自定義的，保存後新建一個vue文件，編輯器中輸入vue然後回車
方便吧😄
關於vscode的一些小建議
vscode支持命令行，可以通過命令行按照依賴包，類似於：npm install
但是不建議在命令行中啓動項目，類似於：npm start
爲什麼？當你重啓編輯器的時候，服務也會跟着重啓，你會說了，我爲什麼要重啓編輯器呢？
我遇到過以下幾種情況，編輯器會重載的
- 編輯器很卡，代碼格式化失效
- 編輯器很卡，代碼提示沒了
- 編輯器莫名其妙的變成英文的，雖然不影響使用，但是看着彆扭
- 編輯器升級，自動重啓
- 按裝或者卸載了插件，啓用或者禁用了插件，需要重新加載
以上這些情況都會重啓編輯器，導致在編輯器內啓動的命令行工具跟着重啓，所以不建議在命令行內啓動項目服務（只是個人建議）
關於vscode的心得就介紹那麼多，希望能對你有所幫助。
