vscode-前端插件

通用插件

中文

chinese

主题

atom one dark theme 或者 Dracula Official

标签主题

Material Icon Theme

格式化

beautify

给括号加上不同的颜色, 方便区分代码块

Bracket Pair Colorizer

本地文件修改历史

Local History

单词拼写检查

Code Spell Checker
单词拼写检查，单词拼写提示，单词拼写错误后会有提示

git

历史提交记录

git history

GitLens

方便查看git日志，git重度使用者必备

使用教程: https://www.jianshu.com/p/a91cb8a2e55d

前端插件

自动闭合HTML/XML标签

Auto Close Tag

高亮

Babel JavaScript

自动完成另一侧标签的同步修改

Auto Rename Tag

通过css选择器快速跳至css文件

CSS Peek
通过css选择器快速跳至css文件（Cmd+鼠标单击/Ctrl+鼠标单击）；悬停css选择器预览css定义（Cmd+鼠标悬浮/Ctrl+鼠标悬浮）

open in browser

vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
配置默认值：

“open-in-browser.default”: “google chrome”

括号加上不同的颜色

Bracket Pair Colorizer
给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

Debugger for Chrome

映射vscode上的断点到chrome上，方便调试
调试方式

ESLint

js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置

智能提示CSS类名以及id

HTML CSS Support

智能提示HTML标签，以及标签含义

HTML Snippets

JavaScript(ES6) code snippets

ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

jQuery代码智能提示

jQuery Code Snippets

自动提示文件路径

Path Intellisense
支持各种快速引入文件

React/Redux/react-router语法智能提示

React/Redux/react-router Snippets

React-Native/React/Redux snippets for es6/es7

react-beautify

格式化 javascript, JSX, typescript, TSX 文件

智能提示HTML class =“”属性

Class autocomplete for HTML

智能提示 css 的 class 名

IntelliSense for CSS class names

require 时的包提示(node必备)

Npm Intellisense

Vetur (推荐)(vue必备)

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

VueHelper

vue代码片段

Vue TypeScript Snippets

vue的 typescript 代码片段

Vue 2 Snippets

vue 2代码片段

bootstrap v3

bootstrap 3支持

java插件

java Extension Back

Lombok

如果想用jdk8, Language Support for java™ by Red Hat需要改成0.64.1一下版本

spring boot

spring boot Extension Pack

xml

.xml 文件节点提示功能

vsc-mybatis

可以跳到xml文件

python插件

python开发依赖包

python
直接装python extension pack, 包含了django

pylance

自定义配置

{
  "editor.tabSize": 2,
  "editor.fontSize": 15,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.semi": false,// 结尾没有;
   "prettier.singleQuote": true,// 单引号
  "editor.formatOnSave": true,
  "editor.lineHeight": 24,
  "editor.renderLineHighlight": "none",
  "editor.renderWhitespace": "none",
  "editor.fontFamily": "Consolas",
  "editor.cursorBlinking": "smooth",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.snippetSuggestions": "top",
  "editor.wordWrapColumn": 200,
  "editor.wordWrap": "off",
  "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": false
  },
  // 保存时自动格式化
  "editor.formatOnPaste": false,
  "files.trimTrailingWhitespace": true,
  "typescript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.suggest.autoImports": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorCustomizations": {
      // 设置guide线高亮颜色
      "editorIndentGuide.activeBackground": "#ff0000"
  },
  // 启用/禁用导航路径
  "breadcrumbs.enabled": true,
  // VScode 文件搜索区域配置
  "search.exclude": {
      "**/dist": true,
      "**/build": true,
      "**/elehukouben": true,
      "**/.git": true,
      "**/.gitignore": true,
      "**/.svn": true,
      "**/.DS_Store": true,
      "**/.idea": true,
      "**/.vscode": false,
      "**/yarn.lock": true,
      "**/tmp": true
  },
  // 配置文件关联
  "files.associations": {
      "*.vue": "html",
      "*.wxss": "css",
      "*.cjson": "jsonc",
      "*.wxs": "javascript"
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持
  "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html",
      "javascript": "javascriptreact",
      "xml": {
          "attr_quotes": "single"
      }
  },
  // 在react的jsx中添加对emmet的支持
  "emmet.includeLanguages": {
      "jsx-sublime-babel-tags": "javascriptreact",
      "wxml": "html"
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
      "wrap_attributes": "force-aligned"
  },
  // 是否开启eslint检测
  "eslint.enable": false,
  // eslint配置文件
  "eslint.options": {
      "configFile": "E:/aaaworkspace/ex/experience/.eslintrc.js",
      "plugins": [
          "html",
          "vue"
      ]
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      "typescript",
      "typescriptreact"
  ],
  // 格式化快捷键 shirt+alt+F
  // prettier进行格式化时是否安装eslint配置去执行，建议false
  "prettier.eslintIntegration": false,
  // 代码换行,每一行最大占有字符数
  "prettier.printWidth": 200,
  // 配置gitlen中git提交历史记录的信息显示情况
  "gitlens.advanced.messages": {
      "suppressCommitHasNoPreviousCommitWarning": false,
      "suppressCommitNotFoundWarning": false,
      "suppressFileNotUnderSourceControlWarning": false,
      "suppressGitVersionWarning": false,
      "suppressLineUncommittedWarning": false,
      "suppressNoRepositoryWarning": false
  },
  // 调试，本地服务器配置
  "launch": {
      "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Node.js",
              "program": "${file}"
          },
          {
              "type": "chrome",
              "request": "launch",
              "name": "vuejs: chrome",
              "url": "http://localhost:8080",
              "webRoot": "${workspaceFolder}/src",
              "breakOnLoad": true,
              "sourceMapPathOverrides": {
                  "webpack:///src/*": "${webRoot}/*"
              }
          }
      ],
      "compounds": []
  },
  "git.path": "C:/Program Files/Git/cmd/git.exe",
  // git是否启用自动拉取
  "git.autofetch": true,
  "git.confirmSync": false,
  "open-in-browser.default": "Google Chrome",
  "files.autoSave": "afterDelay",
  "explorer.confirmDelete": false,

}

这里有一份更详细的清单,欢迎参考

常用配置

CPU占用过高?

设置中关闭search.followSymlinks, 不然可能会引起cpu占用过高

python

1. “python.linting.flake8Enabled”: true,方法自动补全()
2. “python.linting.flake8Enabled”: true,
   python安装flake8模块后, 做这个配置, 提示代码错误及不规范