VSCODE’s plug-in family

How can you develop with vscode without plug-ins

Rich plug-ins to make VScode more easy to use

Beautify the plug-in

  • Background adds a background to the editor window! The only downside is that vscode will show that it’s corrupted, but of course it doesn’t affect usage

    For details, see the following configuration

  "background.useDefault": false."background.style": {
    "content": "" '"."pointer-events": "none"."position": "absolute"."z-index": "99999"."width": "100%"."height": "100%"."background-position": "100% 90%"."background-size": "auto 60%"."background-repeat": "no-repeat"."opacity": 0.1
  "background.customImages": [
    "Background Image address 1"."Background Image Address 2"."Background Image Address 3"].Copy the code
  • Carbon – Now -sh is a very nice code screenshot tool after integration, select and then shortcut keys can take a screenshot

Development assistance


  • Debugger for Chrome is just the name
  • Open in browser
  • Quokka.js calculates in real time to see the results

Path completion and package size

  • File Peek
  • Import Cost calculates how much space the Import needs to occupy
  • Path Intellisense


  • npm
  • Npm-scripts facilitates running Scripts


  • ESLint
  • Prettier formatting
  • Vetur vue Format and configuration
  • Vue 2 Snippets

Eslint and prettier are used together, vue automatically saves the formatted configuration

  "vetur.format.defaultFormatter.html": "none", // the default HTML method"eslint.autoFixOnSave": true, // Auto save"eslint.validate": [{"language": "vue"."autoFix": true
      "language": "html"."autoFix": true
      "language": "javascript"."autoFix": true}]."prettier.singleQuote": true, / /'or "" prettier." semi ": false, / / a semicolon" prettier. EslintIntegration ": true, / / eslintCopy the code


  • GitLens is much better than git. Git also shows who committed the xx line and when
  • For details on how to install git, see other people’s blogs. Here are some shortcuts for MAC
DownloadSettings ⇧ ⌥ D extension. UpdateSettings ⇧ ⌥ UCopy the code

Finally send my current configuration gist, there is a need to install the setting sync will create this gist to automatically get the plugin oh Gist address