vs code經(jīng)過(guò)這幾年的發(fā)展，已經(jīng)算是個(gè)成熟的編輯器了。當(dāng)然，它還是沒(méi)學(xué)會(huì)自己寫(xiě)代碼 摔。不會(huì)寫(xiě)代碼沒(méi)關(guān)系，我們可以通過(guò)一些簡(jiǎn)單的配置和擴(kuò)展插件，讓開(kāi)發(fā)更高效。不過(guò)高效不意味著你寫(xiě)代碼的時(shí)間就能減少??。

擴(kuò)展插件

vs code的插件可以說(shuō)為vs code提供了無(wú)限的能力。比如網(wǎng)易云音樂(lè)插件，讓福報(bào)與摸魚(yú)可以兼得??。

云村.png

外貌插件

好的主題配色，能讓人神清氣爽、增強(qiáng)體質(zhì)、延年益壽，這里推薦一個(gè)Electron Color Theme 。

有代碼潔癖的可以考慮一下beautify。

前端插件

vs code可以說(shuō)對(duì)前端的支持是最完善的了，這里以vue來(lái)做介紹。

vetur：vue開(kāi)發(fā)必備插件，支持語(yǔ)法高亮、自動(dòng)補(bǔ)全等功能。

eslint：為代碼規(guī)格提供實(shí)時(shí)提示的插件。有些人不喜歡配置eslint，但是這樣還是要強(qiáng)烈推薦使用。雖然有點(diǎn)學(xué)習(xí)成本，上手后，就可以和我一樣，菜鳥(niǎo)裝大神了。這個(gè)可能需要配置一下才能使用。

  "eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {"language": "vue", "autoFix": true}
  ],

使用vue的手腳架創(chuàng)建的工程，如果使用eslint，那么在根目錄就有.eslintrc.js。其他工程手腳架的可能沒(méi)有js文件后綴，按需調(diào)整。

git

vs code本身支持git的，當(dāng)然需要裝git的客戶(hù)端。這里推薦顏值擔(dān)當(dāng)?shù)?a target="_blank" rel="nofollow">cmder。下載完整版就包含git客戶(hù)端。此外，cmder還包含一些Linux的命令行，比如rm、ls。

Windows中因?yàn)闄?quán)限問(wèn)題無(wú)法刪除的文件夾，可以使用rm -rf 文件夾名來(lái)刪除。

為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

顧名思義，任務(wù)。可以把開(kāi)發(fā)中需要的命令寫(xiě)成tasks。比如編譯，部署一類(lèi)的操作。

{
  // 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": "部署開(kāi)發(fā)環(huán)境",
      "type": "shell",
      "dependsOn": ["npm run build"],
      "command": "scp -r ./dist/* root@192.168.0.1:/example/",
    }
  ]
}

還是比較好理解的，而且vs code本身會(huì)解釋每個(gè)字段名。dependsOn表示部署開(kāi)發(fā)環(huán)境這個(gè)task依賴(lài)于npm run build，即執(zhí)行部署開(kāi)發(fā)環(huán)境的時(shí)候會(huì)先執(zhí)行npm run build。更多詳細(xì)內(nèi)容??傳送門(mén)。

代碼片段

代碼片段，很多編輯器都有的功能。用好代碼片段，能夠有效的提高寫(xiě)代碼的速度。特別是前端里面，有些相似度高的頁(yè)面。來(lái)看幾個(gè)例子：

  "insert a get": {
    "prefix": "iag",
    "description": "插入get請(qǐng)求",
    "body": [
      "const response = await this.$$http.get('example/webapi$1', $2);"
    ],
  },

prefix表示激活片段的前綴，比如這里輸入iag就會(huì)插入body的內(nèi)容。

$ 后面是占位符。比如 $1，$2。相同序號(hào)的占位符，編輯一個(gè)的時(shí)候，其他會(huì)跟著變化。這個(gè)在import的時(shí)候很有用。

由于$是個(gè)轉(zhuǎn)義符號(hào)，所以代碼中有$的話(huà)，需要寫(xiě)多一個(gè)$。

代碼片段還支持變量，比如

    "  methods: {",
    "    submit${TM_FILENAME_BASE}Model(e) {",
    "      e.preventDefault();",
    "    },",
    "  },",

這里會(huì)根據(jù)文件名產(chǎn)生submit文件名Model(e)這樣格式的函數(shù)名出來(lái)。

再來(lái)看個(gè)模板片段

"create the template": {
    "prefix": "ctt",
    "scope": "vue",
    "body": [
      "<template>",
      "  <main>$0</main>",
      "</template>",
      "",
      "<script>",
      "http:// description: $2",
      "http:// author: $3",
      "export default {",
      "  name: '$TM_FILENAME_BASE',",
      "  components: {},",
      "  props: {",
      "  },",
      "  data() {",
      "    return {};",
      "  },",
      "  mounted() {",
      "  },",
      "  methods: {",
      "  },",
      "};",
      "</script>",
      "",
      "<style lang=\"scss\" scoped>",
      "</style>\n",
    ],
    "description": "創(chuàng)建vue組件模板",
  },

直接將一個(gè)vue模板寫(xiě)成片段，以后只要輸入ctt就可以插入這些代碼。同時(shí)，將保持name屬性和文件名相同。如果頁(yè)面相似度越高，這個(gè)模板可以越豐富，這樣可以有效的避免重復(fù)寫(xiě)代碼。更多代碼片段的內(nèi)容，查看這里。

更多

vs code的功能可不止這么一些，善于利用插件，能讓你的工作更加游刃有余。實(shí)在沒(méi)有合適的插件的時(shí)候，你還可以選擇自己寫(xiě)一個(gè)酷狗音樂(lè)，畢竟程序員最擅長(zhǎng)挖墳造輪子。