前端工具（vscode編輯器）插件以及開箱即用的配置

工欲善其事，必先利其器

做爲一名前端工做者，編輯器或者IDE對於開發尤其重要，如何在1分鐘內打造本身的開發環境呢

vscode

選擇一個適合本身的編輯器或者IDE，vscode很少說，免費、豐富的插件與微軟強硬的開發團體，以及快速的響應速度迅速得到了一大批用戶，下面咱們就介紹一下這款的插件與配置文件，手把手教你如何快速的配置出屬於本身的編輯器 寫這篇文章的時候使用的是最新版 1.37.1，可能後面的版本會集成某些插件的功能，這篇文章隨時會更新哦

vscode插件

中文語言包 - Chinese (Simplified) Language Pack for Visual Studio Code

英文的菜單變成友好的中文，使得開發者更加了解本身的編輯器

主題 - One Dark pro

vscode上有不少主題，本人使用的是這塊

其餘：Material Theme 你們也能夠根據本身的喜愛到官方插件

成對括號不一樣顏色顯示 - Bracket Pair Colorizer2

便於咱們更好的梳理邏輯以及代碼層次，另外vscode也會整理出一份js的大綱，能夠幫助開發者更好的看清代碼結構，尤爲是在閱讀別人的代碼的時候

git加強 - gitlens

vscode自己會集成git，可是呢，總有一些體驗很差的地方，這時候插件就能夠派上用處了 代碼中能夠顯示commit，體驗更好的diff；另外，Git History也是值得推薦的，更加註重對比，可是本人以爲夠用就好，若是說vscode自己git就已經知足了需求就不必裝不少雷同的插件了；還有git easy也是比較熱的插件，你們能夠去搜一下

快捷鍵 - Sublime Importer for VS Code

無縫切換本身熟悉的快捷鍵；也有其餘的選擇；或者本身去設置（比較費時）

HTML成對標籤修改 - Auto Rename Tag

用了都說好，還有一個插件是

Auto Close Tag

自動閉合html標籤，本人沒有實際考證vscode自己是否是有這個功能，仍是挺方便的

文件管理 - Project Manager

能夠將本身平時常常用的項目快捷管理

代碼格式化與美化

eslint: 代碼檢查 全局安裝eslit

npm i eslint -g
複製代碼

針對本項目須要在本項目內安裝對應eslit插件

Vetur：格式化vue Prettier ：格式化js/ts/css 很少說，後面會給出具體配置，沒必要煩惱

Visual Studio IntelliCode

官方的一個插件 ： 感知上下文 這個本人在寫代碼的時候並無太多感覺，具體應該是ai經過你寫代碼只能提示，這個有待觀察其做用大小是否值得

下面重點來了，一分鐘配置

同步配置 - Settings Sync

將你的插件配置和你編輯器我的配置同步到gist，便於不一樣電腦上快速配置，應該用不了幾分鐘哦，自動安裝插件，完成以後重啓便可，每一個人值得擁有

能夠fork我同步的配置

經過這些插件，基本上就已經知足平常的需求，你們也能夠把你的以爲好用，一些本身比較好的應用場景，評論出來，供你們學習使用，沒必要花費很長時間去配置與擼碼無關的事情

配置拿走

{
  "workbench.sideBar.location": "right",
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-icons",
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "editor.lineHeight": 24,
  "editor.fontSize": 18,
  "editor.renderWhitespace": "all",
  "editor.formatOnSave": true,
  "editor.snippetSuggestions": "top",
  "editor.wordWrap": "on",
  "files.eol": "\n",
  "sync.autoUpload": false,
  "sync.removeExtensions": true,
  "sync.quietSync": false,
  "sync.autoDownload": false,
  "sync.forceUpload": true,
  "sync.gist": "xxx", // 將本身填寫
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 90
    }
  },
  "prettier.printWidth": 90,
  // "prettier.singleQuote": true,
  "prettier.eslintIntegration": true,
  "prettier.tslintIntegration": false,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "path-intellisense.autoSlashAfterDirectory": true,
  "path-intellisense.showHiddenFiles": true,
  "path-intellisense.extensionOnImport": true,
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.enableSmartCommit": true,
  "git.showPushSuccessNotification": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
}
複製代碼

以上配置拿走就能夠用了

2019-10-15更新