Editor Setup

Set up your editor for Quanta CSS

To get the best developer experience with Quanta CSS, we recommend setting up your editor with smart autocompletion, syntax highlighting, and snippets.

IntelliSense Extension

Install the official Quanta CSS IntelliSense extension from the VS Code Marketplace:

# Open Extensions (Ctrl+Shift+X) and search:
Quanta CSS IntelliSense

Or install via CLI:

code --install-extension devadetayo.quanta-css-intellisense

Recommended Themes

Use a theme that works well with both light and dark previews. We recommend:

GitHub Dark / GitHub Light
Catppuccin Mocha
Night Owl

Custom Snippets

You can create your own Quanta snippets by adding a file in your VS Code settings folder:

{
  "quanta-button": {
    "prefix": "quanta-btn",
    "body": "<button class=\\"btn bg-primary text-white br-md\\">$1</button>",
    "description": "Quanta primary button"
  }
}