Visual Studio Code Configuration

A consistent development environment is essential for collaboration and productivity. Visual Studio Code serves as our primary code editor at Terra, providing the flexibility and power needed to work across the diverse range of technologies we use in client projects.

What is Visual Studio Code?

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft. It’s lightweight, fast, and highly customizable with a massive library of extensions.

We use VS Code because it:

Supports all the technologies we work with (Astro, WordPress, Vue, Nuxt, PHP, JavaScript, TypeScript, and more)
Offers powerful IntelliSense and code completion
Integrates seamlessly with Git and version control
Provides built-in debugging capabilities
Has a thriving extension ecosystem
Works consistently across macOS, Windows, and Linux

Configuration

Indentation Settings

To ensure consistency across projects, we use 4 spaces for indentation.
You can configure this in VS Code by following these steps:

Open Code > Preferences > Settings
Search for Editor: Tab Size
Set the value to 4
Make sure “Insert Spaces” is enabled

Recommended Extensions

We suggest installing the following extensions to improve your development experience:

Extension	Purpose	Link
Better Comments	Highlight different types of comments	🔗
Auto Close Tag	Automatically closes HTML/XML tags	🔗
Auto Rename Tag	Renames paired HTML/XML tags simultaneously	🔗
Prettier - Code formatter	Auto-formats code on save	🔗
Console Ninja	Helps with console.log management and debugging	🔗
Astro	Syntax highlighting and language support for Astro	🔗
Git Blame	Shows git blame information inline	🔗
Nuxt Extension Pack	Collection of helpful Nuxt.js extensions	🔗
Nuxtr	Snippets and helpers for Nuxt 3	🔗
PHP Intelephense	PHP language server for better autocompletion and linting	🔗
Vue - Official	Official Vue language tools (recommended for Vue 3)	🔗

Knowledge Check

Test your understanding of this section

Loading questions...