我不知道的vscode技巧

俗話說「磨刀不誤砍柴工」，vscode做爲一款編譯器獨領風騷，總結一些本身經常使用的以及在其餘地方看到的一些技巧，方便更好的使用。

本人使用的 Mac 版的 vscode，快捷鍵或者操做跟其餘系統有區別，注意區分。

• 查看進程管理
  若是Mac有卡頓現象，排查之一就是vscode，就須要查看一下進程管理，看看是哪些插件在吃運存
  cmd + shift + p 顯示命令行
  輸入

  

  就能夠看到當前vscode運行狀況

• Tag Wrapping vscode內置支持Emmet，因此你不須要去額外安裝插件
  只須要選中代碼塊後cmd + shift + p 輸入wrap 輸入縮寫代碼塊

• 有用快捷鍵
  cmd + p ：快速打開最近文件
  cmd + ,: 打開配置文件

  對於行的操做
  cmd + 上/下/左/右: 光標快速定位開頭 結尾 行頭 行尾
  重開一行：光標在行尾的話，回車便可；不在行尾，cmd + enter 向下重開一行；shift + cmd + enter 則是在上一行重開一行
  cmd shift k: 直接刪除一行
  移動一行：alt + ↑向上移動一行；alt + ↓向下移動一行
  複製一行：shift + alt + ↓ 向下複製一行；shift + alt + ↑ 向上複製一行

  搜索替換
  cmd f搜索 cmd d選中一個詞 cmd alt f替換

  cmd alt left/right左右選擇vscode打開過的文件
  cmd alt up/down 每一個選中的都會有光標/使用多個遊標 複製/粘貼(當在不一樣的行上添加遊標來編輯多行代碼時，你能夠複製和粘貼這些遊標選擇的內容，它們將按照複製的順序進行粘貼。)

  cmd + k + cmd + s: 查看vscode快捷鍵

• git history
  cmd + shift + p 輸入history便可查看文件git history（前提是須要安裝git history插件）,固然查看history有不少，看我的使用

• 自定義代碼片斷（snippet）
  打開 vsocde 的 首選項 > 用戶代碼片斷 ，選擇代碼片斷文件爲 vue.json。輸入如下內容。

{
   "Vue component": {
   	"prefix": "vuec",
   	"body": [
   		"<template>",
   		" <div $1>",
   		" \t",
   		" </div>",
   		"</template>",
   		"<script>",
   		"export default {",
   		"\t",
   		"}",
   		"</script>",
   		"<style lang=\"scss\" scoped>",
   		"</style>",
   		""
   	]
   }
}
複製代碼

保存後，新建一個 Test.vue ，輸入 vuec，看一下效果。

• Tasks 的應用
  vscode 中的 Tasks 至關於腳本命令。之前要執行某個命令，須要打開一個終端，而後在終端中輸入相應的命令。有了 Tasks，就沒必要這樣麻煩了。

  在許多前端項目中，咱們會編寫許多的 npm scripts，相似下面這樣。

  {
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "unit": "jest --config test/unit/jest.conf.js --coverage",
        "test": "npm run unit",
        "lint": "eslint --ext .js,.vue src test/unit",
        "build": "node build/build.js"
    }
  }
  複製代碼

  vscode 能自動檢測出 npm scripts，並把這些命令當成 task。接下來，咱們能夠經過 task 來執行某個 npm 腳本了。

  cmd p 後在提示框內輸入 task（task 後有空格），接下來選擇某項任務後回車就能夠了。選擇執行任務時，會有一個選項，能夠直接選擇第一種。

  本身定義的 task 只是在本項目中使用。對於前端開發者來講，常常使用的命令能夠添加到 package.json 中。因此這裏咱們只是把 Tasks 看成快速啓動命令的工具。

  • 總結
    其餘還有快速輸入html&css、git集成、代碼調試還有不少不少功能，須要你們在開發中摸索，多多總結，根據本身的使用習慣去訂製，讓編碼的過程有飛通常的感受。😂

  參考資料

  vscode文檔
  emmet文檔 （快速輸入html&css文檔）
  餓了麼前端