是時候提升你的編碼效率了——VScode篇

時間 2019-11-07

原文原文鏈接

俗話說得好，工欲善其事必先利其器，要想工做效率高，碼代碼的工具用的好是必須的，這裏主要說一下 Mac 上 VScode 的快捷鍵，幫助你們快速搭建良好的開發工具。javascript

必備插件

Auto Close Tag - 自動閉合 HTML 標籤
Auto Import - 自動 import 插件
Auto Rename Tag - 修改 HTML 標籤時，自動修改匹配的標籤
Bracket Pair Colorizer - 給括號先後進行着色
Can I Use - HTML五、CSS三、SVG 的瀏覽器兼容性檢查
Code Spell Checker - 檢查代碼中的拼寫錯誤
Code Runner - 運行選中代碼段（支持大量語言，包括 Node）
Git Blame - 在狀態欄顯示當前行的 Git 信息
Git History - 查看 git log
GitLens - 顯示文件最近的 commit 和做者，顯示當前行 commit 信息
ESLint - ESLint 插件
Debugger for Chrome - 配合 chrome 進行 debug
HTML CSS Support - html，css 提示
HTMLHint - HTML 格式提示
JavaScript (ES6) code snippets - 支持 ES6 語法代碼段
JavaScript Snippet Pack - 使用簡單的兩個字母就能夠生成 JS 語句，須要記憶
jQuery Code Snippets - jquery 快捷提示，安裝了以後輸入 jq 就會看到不少提醒
language-stylus - 支持 stylus
Material Icon Theme - icon 樣式，很好看
npm - 運行 npm 命令
npm Intellisense - 導入模塊時，提示已安裝模塊名稱
open in browser - 在瀏覽器運行當前頁面，快捷鍵（option+B）
Output Colorizer - 控制檯輸出着色
Panda Theme - 一個主題
Path Intellisense - 路徑自動補充
Prettier - 代碼美化，快捷鍵（shift+option+F）
Vetur - 目前比較好的 Vue 語法高亮

用戶自定義設置

使用cmd+shift+P全部全部打開用戶設置，在設置的 json 中修改編輯器內置的格式，如下是我的的一些修改，其中包括一些 eslint、prettier、vetur 和編輯器的設置，不喜歡的能夠自行 google 或者百度。css

{
  // 縮進2個空格
  "editor.tabSize": 2,
  // - 不該該做爲單詞的分隔符
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  // 控制是否在鍵入時自動顯示建議
  "editor.quickSuggestions": {
    "strings": true
  },
  // 每次保存的時候將代碼按 eslint 格式進行修復，前提是項目下有 ESlint
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": ["html"]
  },
  //  讓 prettier 使用 eslint 的代碼格式進行校驗
  "prettier.eslintIntegration": false,
  // 結尾必須添加分號
  "prettier.semi": true,
  // 使用單引號
  "prettier.singleQuote": true,
  //   使用tab自動變爲2個空格
  "prettier.tabWidth": 2,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // vue組件中html代碼格式化樣式 force-aligned
      "wrap_attributes": "auto"
    },
    "prettyhtml": {
      "printWidth": 130,
      "singleQuote": true
    }
  }
}
複製代碼

命令框

F1 或 Cmd+Shift+P: 打開命令面板。在打開的輸入框內，能夠輸入任何命令html
- 在Cmd+P下輸入 > 能夠進入 Cmd+Shift+P 模式
在 Cmd+P 窗口下還能夠:vue
- 直接輸入文件名，跳轉到文件
- ? 列出當前可執行的動做
- : 跳轉到行數，也能夠 Cmd+G 直接進入