Recommended VS Code Extensions

🧩 To streamline development and align with project conventions, we recommend the following VSCodium and Visual Studio Code (VS Code) extensions. These tools enhance productivity, enforce code quality, and ensure consistency across the codebase.

Note: While these extensions are optional, they are thoughtfully curated to complement our development workflow.

Extension Name	Identifier	Description
Prettier - Code formatter	esbenp.prettier-vscode	Formats code consistently across various languages.
ESLint	dbaeumer.vscode-eslint	Integrates ESLint into VS Code for JavaScript and TypeScript linting.
Stylelint	stylelint.vscode-stylelint	Lints CSS/SCSS and enforces consistent styling conventions.
Markdownlint	DavidAnson.vscode-markdownlint	Provides linting and style checking for Markdown files.
EditorConfig for VS Code	EditorConfig.EditorConfig	Maintains consistent coding styles between different editors and IDEs.
Svelte for VS Code	svelte.svelte-vscode	Offers syntax highlighting, code completion, and error checking for Svelte.
Playwright Test Runner	ms-playwright.playwright	Adds test runner and debugging tools for Playwright end-to-end testing.
Vitest Explorer	vitest.explorer	Enables a GUI test explorer panel for Vitest.
Code Spell Checker	streetsidesoftware.code-spell-checker	Inline spell checking (comments, Markdown, etc.)

🛠 Installation

To install all recommended extensions quickly:

1. Open the Command Palette in VS Code: Ctrl+Shift+P or Cmd+Shift+P
2. Run: Extensions: Show Recommended Extensions (Workspace)
3. Click Install All

 

Alternatively, if you prefer a manual installation, you can use the following commands in your terminal:

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension stylelint.vscode-stylelint
code --install-extension DavidAnson.vscode-markdownlint
code --install-extension EditorConfig.EditorConfig
code --install-extension svelte.svelte-vscode
code --install-extension ms-playwright.playwright
code --install-extension vitest.explorer
code --install-extension streetsidesoftware.code-spell-checker

 

Finally, you can search for each extension by name in the Open VSX Registry and/or the VS Code Extensions Marketplace and install them individually.

📁 Workspace Recommendations

Our repository includes a .vscode/extensions.json file that specifies these recommended extensions. When you open the project in VS Code, you'll be prompted to install any missing recommended extensions.

A commented reference version is also available at .vscode/extensions.jsonc.

This ensures a consistent development environment across all contributors.

 

🔧 Configuration

The .vscode/settings.json file in the repository contains workspace-specific settings that align with our coding standards and practices. These settings include formatter configurations, linting rules, and other preferences to maintain code quality and consistency.