簡單的 VS Code 配置，讓開發更高效
vs code經過這幾年的發展，已經算是個成熟的編輯器了。當然，它還是沒學會自己寫程式碼
。不會寫程式碼沒關係，我們可以通過一些簡單的配置和擴充套件外掛，讓開發更高效。不過高效不意味著你寫程式碼的時間就能減少 。
擴充套件外掛
vs code的外掛可以說為vs code提供了無限的能力。比如網易雲音樂外掛，讓福報與摸魚可以兼得 。
雲村.png
外貌外掛
好的主題配色，能讓人神清氣爽、增強體質、延年益壽，這裡推薦一個Electron Color Theme 。
有程式碼潔癖的可以考慮一下beautify。
前端外掛
vs code可以說對前端的支援是最完善的了，這裡以vue來做介紹。
vetur：vue開發必備外掛，支援語法高亮、自動補全等功能。
eslint：為程式碼規格提供實時提示的外掛。有些人不喜歡配置eslint，但是這樣還是要強烈推薦使用。雖然有點學習成本，上手後，就可以和我一樣，菜鳥裝大神了。這個可能需要配置一下才能使用。
"eslint.options": {
"configFile": ".eslintrc.js"
},
"eslint.validate": [
"javascript",
"javascriptreact",
{"language": "vue", "autoFix": true}
],
使用vue的手腳架建立的工程，如果使用eslint，那麼在根目錄就有.eslintrc.js。其他工程手腳架的可能沒有js檔案字尾，按需調整。
git
vs code本身支援git的，當然需要裝git的客戶端。這裡推薦顏值擔當的cmder。下載完整版就包含git客戶端。此外，cmder還包含一些Linux的命令列，比如rm、ls。
Windows中因為許可權問題無法刪除的資料夾，可以使用 rm -rf 資料夾名 來刪除。
為vs code新增配置
"git.path": "D:\\Program Files\\cmder\\vendor\\git-for-windows\\bin\\git.exe", "terminal.integrated.shell.windows": "D:\\Program Files\\cmder\\vendor\\git-for-windows\\bin\\bash.exe",
terminal.integrated.shell.windows 可以把cmd換成bash。
bash
tasks
顧名思義，任務。可以把開發中需要的命令寫成tasks。比如編譯，部署一類的操作。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "npm run build",
"type": "shell",
"command": "npm run build",
},
{
"label": "部署開發環境",
"type": "shell",
"dependsOn": ["npm run build"],
"command": "scp -r ./dist/* [email protected]:/example/",
}
]
}
還是比較好理解的，而且vs code本身會解釋每個欄位名。dependsOn表示部署開發環境這個task依賴於npm run build，即執行部署開發環境的時候會先執行npm run build。更多詳細內容:point_right:傳送門。
程式碼片段
程式碼片段，很多編輯器都有的功能。用好程式碼片段，能夠有效的提高寫程式碼的速度。特別是前端裡面，有些相似度高的頁面。來看幾個例子：
"insert a get": {
"prefix": "iag",
"description": "插入get請求",
"body": [
"const response = await this.$$http.get('example/webapi$1', $2);"
],
},
prefix表示啟用片段的字首，比如這裡輸入iag就會插入body的內容。
$ 後面是佔位符。比如 $1，$2。相同序號的佔位符，編輯一個的時候，其他會跟著變化。這個在import的時候很有用。
由於$是個轉義符號，所以程式碼中有$的話，需要寫多一個$。
程式碼片段還支援變數，比如
"methods: {",
"submit${TM_FILENAME_BASE}Model(e) {",
"e.preventDefault();",
"},",
"},",
這裡會根據檔名產生submit檔名Model(e)這樣格式的函式名出來。
再來看個模板片段
"create the template": {
"prefix": "ctt",
"scope": "vue",
"body": [
"<template>",
"<main>$0</main>",
"</template>",
"",
"<script>",
"// description: $2",
"// author: $3",
"export default {",
"name: '$TM_FILENAME_BASE',",
"components: {},",
"props: {",
"},",
"data() {",
"return {};",
"},",
"mounted() {",
"},",
"methods: {",
"},",
"};",
"</script>",
"",
"<style lang=\"scss\" scoped>",
"</style>\n",
],
"description": "建立vue元件模板",
},
直接將一個vue模板寫成片段，以後只要輸入ctt就可以插入這些程式碼。同時，將保持name屬性和檔名相同。如果頁面相似度越高，這個模板可以越豐富，這樣可以有效的避免重複寫程式碼。更多程式碼片段的內容，檢視這裡。
更多
vs code的功能可不止這麼一些，善於利用外掛，能讓你的工作更加遊刃有餘。實在沒有合適的外掛的時候，你還可以選擇自己寫一個
，畢竟程式設計師最擅長
造輪子。