vscode

选择一个适合自己的编辑器或者IDE，vscode不多说，免费、丰富的插件与微软强硬的开发团体，以及快速的响应速度迅速获得了一大批用户，下面我们就介绍一下这款的插件与配置文件，手把手教你如何快速的配置出属于自己的编辑器
写这篇文章的时候使用的是最新版 1.37.1，可能后面的版本会集成某些插件的功能，这篇文章随时会更新哦

vscode插件

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

英文的菜单变成友好的中文，使得开发者更加了解自己的编辑器

主题 - One Dark pro

vscode上有很多主题，本人使用的是这块

image

其他：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

可以将自己平时经常用的项目快捷管理

注释 - koroFileHeader

文件头注释和函数注释；另外： Document This也值得推荐

代码格式化与美化

eslint: 代码检查
Vetur：格式化vue
Prettier ：格式化js/ts/css
不多说，后面会给出具体配置，不必烦恼

Visual Studio IntelliCode

官方的一个插件：感知上下文
这个本人在写代码的时候并没有太多感受，具体应该是ai通过你写代码只能提示，这个有待观察其作用大小是否值得

下面重点来了，一分钟配置

同步配置 - Settings Sync

将你的插件配置和你编辑器个人配置同步到gist，便于不同电脑上快速配置，应该用不了几分钟哦，自动安装插件，完成之后重启即可，每个人值得拥有

通过这些插件，基本上就已经满足日常的需求，大家也可以把你的觉得好用，一些自己比较好的应用场景，评论出来，供大家学习使用，不必花费很长时间去配置与撸码无关的事情

配置拿走

{
  "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.wordWrapColumn": 80,
  "editor.wordWrap": "on",
  "files.eol": "\n",
  "sync.autoUpload": false,
  "sync.removeExtensions": true,
  "sync.quietSync": false,
  "sync.autoDownload": false,
  "sync.forceUpload": true,
  "sync.gist": "xxxxxxxxxxxxxxxxxxxxxxxxxxx自己配置啊xxxxxxxxxxxxxxxxxxxxxxxx",
  "fileheader.configObj": {
    "autoAdd": false
  },
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.options.useTabs": true,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // "wrap_attributes": "auto",
    }
  },
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "prettier.eslintIntegration": true,
  "prettier.printWidth": 100,
  "prettier.singleQuote": 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,
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  }
}

to be continue

原文https://juejin.im/post/5d2e81dae51d45108223fd19

前端工具（vscode编辑器）配置与介绍