VS Code - Custom action buttons

Adds custom action buttons to VS Code bar for faster development:

image


1] Install VS Code extension -> Action Buttons
2] Open User Settings (JSON)
3] Add the following code to it:

"actionButtons": {
    "defaultColor": "#ff0034", // Can also use string color names.
    "loadNpmCommands": true, // Disables automatic generation of actions for npm commands.
    "reloadButton": "♻️", // Custom reload button text or icon (default ↻). null value enables automatic reload on configuration change
    "commands": [
      {
        "name": "🔼 Development",
        "color": "green",
        "command": "NODE_ENV=development yarn develop"
      },
      {
        "name": "🔼 Production",
        "color": "green",
        "command": "NODE_ENV=production yarn start"
      },
      {
        "name": "🗑️ Flush Cache & Rebuild",
        "color": "red",
        "command": "rm -rf .cache build && yarn build --clean"
      },
      {
        "name": "➕ Add ADMIN",
        "color": "deepskyblue",
        "command": "yarn add strapi-plugin-bootstrap-admin-user@latest"
      }
    ]
  },

Current buttons:

Development -> Runs strapi in Development mode.
Production -> Runs Strapi in Production mode.
Flush Cache & Rebuild -> Deletes .cache and build folders, then rebuild the admin.
Add ADMIN -> Adds the strapi-plugin-bootstrap-admin-user plugin to the project.

1 Like