前端工具（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更新