Resources slightly longer, suitable for collection.

The VSCode community is thriving, and the plugin community is also bustling. With more plugins to choose from, here are some of the plugins I often use to improve my work efficiency. I develop in Vue, so some plug-ins are vUe-related.

VSCodeBeautify the related

  • One Dark Pro theme

    Marketplace.visualstudio.com/items?itemN…

  • Glassit-vsc (Frosted Glass Transparency effect)

    Marketplace.visualstudio.com/items?itemN…

  • vscode-icons

    Marketplace.visualstudio.com/items?itemN…

  • Local history (vscode has local restore capability at a certain point)

    Marketplace.visualstudio.com/items?itemN…

Code related

  • Codeif (Variable name)

    Marketplace.visualstudio.com/items?itemN…

  • search node_modules

    Marketplace.visualstudio.com/items?itemN…

  • path-intellisense

    Marketplace.visualstudio.com/items?itemN…

  • vscode-element-helper

    Marketplace.visualstudio.com/items?itemN…

  • ant-design-vue-helper

    Marketplace.visualstudio.com/items?itemN…

  • font awesome icons

    Marketplace.visualstudio.com/items?itemN…

  • auto-close-tag

    Marketplace.visualstudio.com/items?itemN…

  • auto-rename-tag

    Marketplace.visualstudio.com/items?itemN…

  • Automatic Import (TypeScript & TSX)

    Marketplace.visualstudio.com/items?itemN…

  • Automatically add color to bracket pairs (bracket-pin-colorizer)

    Marketplace.visualstudio.com/items?itemN…

  • Colors are highlighted

    Marketplace.visualstudio.com/items?itemN…

  • npm-intellisense

    Marketplace.visualstudio.com/items?itemN…

The debugger series

  • debugger for chrome

    Marketplace.visualstudio.com/items?itemN…

  • debugger for edge(Edge HTML & edge Chromium)

    Marketplace.visualstudio.com/items?itemN…

  • debugger for firefox

    Marketplace.visualstudio.com/items?itemN…

Configuration File series

  • Env configuration file

    Edit files that end with. Env.

    Marketplace.visualstudio.com/items?itemN…

    // setting.json: all objects starting with. Env will match
// You are advised to name the environment configuration file in vue.
// .env.production .env.development 
// .env.alpha .env.beta .env.rc
{
  "files.associations": {
		".env*": "dotenv"}}Copy the code

  • .EditorConfig config file plug-in

    Marketplace.visualstudio.com/items?itemN…

Code formatting

  • eslint

    Marketplace.visualstudio.com/items?itemN…

  • htmlHint

    Marketplace.visualstudio.com/items?itemN…

    // setting.json {"files.associations": {"*. Vue ": "HTML ", // I didn't try vetur}}Copy the code

  • prettier

    Marketplace.visualstudio.com/items?itemN…

  • Beautify(prettier choose one)

    Marketplace.visualstudio.com/items?itemN…

git

  • Git History

    Marketplace.visualstudio.com/items?itemN…

  • gitlens

    Marketplace.visualstudio.com/items?itemN…

Vuerelated

  • vue-peek

    Marketplace.visualstudio.com/items?itemN…

  • vetur

    Marketplace.visualstudio.com/items?itemN…

Auxiliary tool

  • Setting Sync (Recommended)

    Use it if you have multiple computers and want to synchronize VSCode configuration between them.

    Note: When using GIST, remember to use private to prevent disclosure of private tokens.

    Marketplace.visualstudio.com/items?itemN…

  • todo tree

    Marketplace.visualstudio.com/items?itemN…

  • live server

    Marketplace.visualstudio.com/items?itemN…

  • jira plugin

    Marketplace.visualstudio.com/items?itemN…

  • powershell

    Marketplace.visualstudio.com/items?itemN…

If you also have plug-ins to share, welcome to join the group or leave a comment.

If you fail to join the group, add personal wechat, pull you into the group, verify the message: front-end communication

Follow the wechat official account to find more exciting content