Steps to set up a development environment in VS Code with key extensions

  • Configuring VS Code with language-specific extensions allows for a lightweight environment with advanced IDE capabilities.
  • Using linters, formatters, virtual environments, and .env files helps maintain clean, secure, and scalable code.
  • Integrating automated testing, custom tasks, and advanced debugging into VS Code significantly improves daily productivity.
  • Combining VS Code with Git, GitHub Actions, and a good project structure provides a professional and collaborative workflow.

Extensions to configure a development environment in VS Code

If you use Visual Studio Code daily or are just starting out with programming, having a well-configured environment makes all the difference between a choppy workflow and a smooth one. With a good setup of VS Code, key extensions and external tools You can turn a lightweight editor into a very powerful IDE for Python, Go, PHP, Angular, or any other modern stack.

Throughout this guide, we'll see, step by step, how to set up a solid development environment in VS Code: from installing essential languages ​​and extensions to debugging, testing, version control, and small productivity tips. The goal is for you to end up with a streamlined workflow. professional, automated and convenientbut explained in a clear and practical way.

Why choose Visual Studio Code as your development environment?

Beyond the trend, there are compelling reasons why VS Code has become the de facto standard for many developers. It's an editor Free, cross-platform, very lightweight and extremely extensibleThanks to its extension marketplace, you can adapt it to almost any language, framework, or work style.

Another strong point is that with a few well-chosen extensions you can emulate many of the functions of a "big" IDE like WebStorm or PHPStorm: intelligent autocomplete, code navigation, refactoring, debugging, Git integration, or Docker supportAmong other things. This makes it ideal for both personal projects and teams that need a standard and easily replicable environment.

Furthermore, the community behind it is huge and very active. This translates into Updated extensions, extensive documentation, and solutions to almost any problem Simply by searching a little online, you can see that VS Code is a very solid option for centralizing your work as a developer.

Best IDEs for Windows 11
Related article:
Essential IDEs and editors for programming on Windows 11

Basic installations required before setting up VS Code

Before you start installing extensions like there's no tomorrow, you need to have a solid foundation for your environment. It's essential that you have the programming language and its main installed tools, in addition to VS Code itself.

To work with Go, for example, the first step is to install the official compiler. From the Go website, you can download the installer for your operating system, run it, and once it finishes, check that everything is in order with a simple command. go version in the terminalThis ensures that the compiler, the standard library, and a basic set of utilities have been installed.

In the case of Python or PHP, the idea is similar: install the recommended version of the language from its official website, verify that it is in the system PATH and that you can run it. python, python3, php or similar without errorsHaving the main tool properly configured is key so that VS Code can then integrate with it without surprises.

The next essential component is the editor itself. You can download the installer for Windows, Linux, or macOS from the Visual Studio Code website. Installation is quite straightforward: after a few clicks, you'll have a ready-to-use environment. Ready to accept extensions and custom configurationsThis will be the core where you will connect the rest of the pieces.

Key extensions to turn VS Code into a complete IDE

Extensions to configure a development environment in VS Code

The true magic of VS Code unfolds when you start adding well-chosen extensions. Every language and project type has its favorites, but there are recurring patterns: language support, advanced autocompletion, linting, formatting, testing, and Git. A sensible combination of these tools will make your daily workflow becomes much smoother and more professional.

Essential extensions for working with Python

If your main focus is Python, the foundation consists of a few official and community extensions. The most important is the extension. Python for VS Code, which adds execution, debugging, and refactoring aids directly from the editor. Without it, support for the language is very limited.

Along with the Python extension, installing Pylance is almost mandatory. This Microsoft tool adds a very powerful type analysis engine and a Intelligent autocomplete that understands type annotations and project structureThe result is an experience very close to what much heavier IDEs offer.

To keep your code clean and consistent, it's a good idea to add an automatic formatter like Black Formatter and an import organizer like isort. Black takes care of... Format your code with a uniform style without having to argue about spaces and line breaks.`isort` automatically reorders imports. Together, they make the code more readable and easier to maintain.

In the static analysis phase, it's common to combine Flake8 or Pylint with mypy. Flake8 and Pylint act as linters, detecting style errors, questionable syntax, or excessive complexity, while mypy focuses on Validate static types when using annotations in your codeWhen properly configured in VS Code, they will warn you of many problems even before you run the program.

If you work with notebooks, the Jupyter extension is essential. It adds the option to open, edit, and run cells directly within the editor, which is ideal for exploratory analysis. data science or rapid prototyping of ideasYou won't have to constantly switch between VS Code and a browser.

Finally, for version control, GitLens enhances the native Git integration already included in VS Code. This extension lets you see who touched each line, quickly review commits, and have them readily available. a very convenient visual history for understanding the evolution of the codeIn projects with several people, it's a lifesaver.

Essential PHP extensions for VS Code

Out of the box, VS Code's PHP support is quite basic, which pushes many people towards paid editors. However, with the right combination of extensions, you can achieve a very similar experience without spending a penny. The main pillar is PHP Intelephense, an extension that offers advanced autocompletion, class navigation, intelligent highlighting, and syntax checking.

When working with namespaces, which is common in medium and large projects, it's helpful to have a tool like PHP Namespace Resolver handy. This extension makes it easy to add, sort, and manage namespace imports automatically, preventing silly mistakes and allowing for a more organized and consistent code with PHP standards.

If you use Composer to manage dependencies, the dedicated Composer extension integrates with Packagist and allows you to perform many tasks without leaving the editor. From there you can search for packages, check dependencies, and run basic commands without having to constantly go to the terminal, which greatly speeds up the flow.

In the area of ​​documentation, PHP DocBlocker greatly simplifies the creation of comment blocks for classes, methods, or attributes. With just a few shortcuts, you can generate docblock templates that you then fill with the necessary details, helping to maintain consistency. uniform and easy-to-read documentation throughout the project.

For cases where classes are built from the constructor, PHP AddProperty becomes very useful. This tool automates the creation of properties in the class when you receive them through the constructor, even allowing add or remove properties and keep the assignment synchronizedIt is more flexible than other similar options and saves a lot of time in object-oriented projects.

The repetitive generation of getters and setters becomes trivial with extensions like PHP Getters & Setters. Instead of manually writing these tedious methods, the extension generates the necessary code from the properties you already have, freeing you up to focus your energy on other tasks. the real logic of the business instead of repetitive code.

When it's time to refactor, extensions like PHP Refactor Tool and PHP Refactoring allow you to rename classes, interfaces, functions, and properties at the project level. In other words, if you change the name of a class in a file, the extension can apply the changes. The change occurs at all points where it is used, reducing errors and saving many manual searches..

In environments with a lot of legacy code or complex associative arrays, deep-assoc-completion-vscode truly shines. This extension provides autocompletion for associative array keys, which can save you from numerous typing errors and helps you... navigate more effectively through complex data structures.

For testing with PHPUnit, a very convenient tool is PHPUnit Test Explorer, which adds a dedicated panel where you can view, launch, and manage your tests. It even allows you to run tests directly from the test classes using action icons, making it easy to... Launching test batteries or a standalone test is just a click away.

For code quality, you can also integrate PHP Code Sniffer using extensions like PHP Sniffer, which flag coding standard violations. Combined with automatic formatting options like Format on Auto Save, this will ensure that formatting is applied when you save a file. a consistent style that adheres to the guidelines followed by your team.

Don't forget debugging. PHP Debug (usually supported by Xdebug) lets you set breakpoints, inspect variables, use a trace panel, and view the call stack directly from the editor. This makes bug hunting much easier. more structured and visual than simply printing values ​​to standard output.

Useful extensions and tweaks for Angular and other JavaScript frameworks

In the world of Angular and other frontend frameworks like React or Vue, the number of available extensions is enormous, but you don't need to install them all. One of the most practical for Angular are snippet packages like Angular vX Snippets, which add shortcuts for quickly generating code. components, services, modules and other typical framework structures.

These predefined code snippets allow you to write less and make fewer mistakes when creating new project elements. You simply type the snippet's identifier, and the editor expands a coherent template accordingly. best practices and the usual organization of an Angular project.

Extensions designed for managing to-dos are also useful, such as those that highlight TODO or FIXME tags and those that generate a panel with all the markers found in the project. With this combination, you can quickly mark pending issues and keep track of them from a centralized list, something very typical of classic IDEs.

Applications development
Related article:
Tools to create applications without knowing how to program

For documentation and README files in repositories, it's common to combine VS Code's native Markdown viewer with extensions that exactly simulate how that Markdown will look on GitHub. This way, when working with remote repositories, you ensure that The final presentation will be true to what you see in the editor., avoiding surprises when you publish or review documentation.

In projects involving Docker, the official Docker extension for VS Code becomes almost mandatory. It adds autocompletion for Dockerfiles and docker-compose, as well as a panel for managing images and containers. This allows, for example, Start or stop services, review logs, and perform minor administrative tasks without leaving the editor interface..

Other interesting extensions focus on diagrams and modeling, for example, tools that generate UML diagrams from text definitions. With these, you can create class diagrams or application flowcharts without leaving your work environment, thus supporting the technical documentation and communication with the rest of the team.

For collaborative work, the pair of Live Share extensions is especially powerful. One allows you to share your workspace with another person via a link, with various permission options; the other adds integrated calling capabilities within VS Code itself. Together, they offer A very comfortable pair programming environment, designed for reviewing code, mentoring, or solving problems together..

Creation and management of virtual environments in your projects

Extensions to configure a development environment in VS Code

A key aspect of any professional environment is dependency isolation. You don't want the libraries of one project to conflict with those of another simply because they share the same machine. In languages ​​like Python, this is achieved through... project-specific virtual environments that are activated and deactivated depending on what you are developing.

The usual way to proceed is to open the VS Code built-in terminal and create a virtual environment in the project folder (for example, a folder named venv). Once created, you can install all the necessary dependencies in that environment without affecting the global system. This way, Each project maintains its own ecosystem of packages, versions, and tools..

After creating the virtual environment, it's important to select the correct interpreter in VS Code. Using the palette command (Ctrl+Shift+P) and options like "Python: Select Interpreter," you can tell the editor to use the executable file located within the virtual environment. This way, when you run the code or launch the debugger, Everything will be done with the isolated configuration of that project.

Advanced configuration using settings.json and tasks

To go beyond the default settings, VS Code allows you to create a .vscode folder within your project and a dedicated settings.json file. In this file, you can define, for example, the default formatter, which linter to use, whether code is formatted upon saving, and whether trailing whitespace is removed. This allows you to... The editor's behavior should be consistent across the entire team when opening the same repository..

A highly recommended practice is to enable automatic whitespace removal on save, as this prevents unnecessary changes to Git diffs. You can also enable automatic formatting on save and other options related to folder structure display, full variable selection, or the behavior of specific extensions. All of this contributes to... keep the project organized and reduce noise in code reviews.

In addition to the standard configuration, you can define custom tasks in VS Code's task configuration files. For example, you can create tasks that run a specific compiler, watcher, or project scripts, such as a Babel command that monitors changes in `src` and generates `dist` files with source code maps. This is configured by specifying... commands, labels and options such as background execution and its group (build, test, etc.).

Thanks to these tasks, you can launch common processes with keyboard shortcuts or directly from the VS Code execution panel, without having to remember long commands. It's a very practical way to standardize repetitive actions such as compile, package, run tests, or start development servers.

Linting, formatting, and code quality in VS Code

Linting is one of the most effective tools for improving code quality with minimal effort. It involves analyzing source files for syntax errors, dangerous patterns, and style violations. By integrating it into VS Code, you can... The problems become apparent while you're writing, instead of being discovered when you run the program..

In Python projects, Flake8 and Pylint are two of the most widely used linters. Flake8 focuses on style, syntax, and complexity errors, while Pylint offers a deeper analysis, with refactoring suggestions and a sort of "score" for the quality of your code. Configuring them in settings.json allows you to... View underlines and warning messages directly in the editor.

If your project uses type annotations, mypy adds an extra layer by checking that the types used in functions, variables, and return values ​​match what's declared. This can detect data usage errors that would otherwise only appear at runtime. Integrating mypy into VS Code means that You will receive continuous feedback on the consistency of the types as you work.

Formatting is the natural companion to linting. Tools like Black in Python or the formatters built into PHP and JavaScript extensions allow you to standardize the style of all your code. By enabling formatting on save, every time you press Ctrl+S, the file will be formatted accordingly. a unified standard, avoiding endless debates about spaces, braces, or line breaks.

Many linters and formatters can also be run from the terminal (commands like `flake8 .` or `pylint` on specific directories). This is useful for integrating them with continuous integration systems later on, but in the meantime, their main value lies in their day-to-day operation. immediate feedback and the reduction of trivial errors.

Testing, project structure, and task automation

A professional environment isn't just about writing and running code: it needs automated testing, a consistent folder structure, and tools to automate repetitive tasks. For Python, Pytest is a preferred option for writing simple yet powerful tests. With good integration into VS Code, you can Run your tests, view results, and debug errors with ease..

The project structure also greatly influences the development experience. Maintaining a clear directory tree, separating production code from test code, and having specific folders for configuration, scripts, and documentation all help to... Other developers will quickly find their way around when they open the repository in VS Code.

To automate routine tasks, combining VS Code with a Makefile can be very useful, even in non-Unix environments thanks to compatibility tools. In the Makefile, you can define actions like "format", "lint", "test", or "build" that group calls to formatters, linters, and testing frameworks. Then, from the editor or terminal, a simple `make format` or `make lint` command is all it takes to execute the command. execute command strings in a simple and repeatable way.

Managing sensitive variables and configuration with .env files

Another essential aspect of modern projects is the management of sensitive credentials and configurations. You don't want API keys or passwords ending up uploaded to the repository. To solve this, .env files are commonly used, defining key-value pairs with the private configuration, which the code then loads at runtime. VS Code can recognize and work with these files with the help of specific extensions and settings.

The idea is simple: the .env file lives in your local environment, is added to .gitignore so it's not uploaded to version control, and any friend or colleague who clones the project creates their own version with their secrets. Meanwhile, the source code relies on generic environment variables, maintaining security and flexibility across different environments (development, testing, production).

Debugging and CI/CD: closing the loop of a professional environment

Debugging is one of the areas where the difference between having a well-configured environment and working "blindly" is most noticeable. In VS Code, you can define configuration files like `launch.json` to specify how an application should be launched and debugged, whether it's a Flask service in Python, a server in Go, or a backend in PHP. With these profiles, you can Add breakpoints, inspect variables, step through the code, and observe the execution flow with great clarity..

In web projects, for example with Flask, you can create a debug profile that starts the server in debug mode, allowing for hot reloading and pausing execution at any point. Along with the built-in debugging tools (variable watch, call stack, debug console), you'll have a highly capable environment for locating and correcting subtle faults.

On the other hand, as your project starts to grow, continuous integration becomes almost mandatory. GitHub Actions is a very popular option for setting up CI/CD pipelines that are triggered when you push or create pull requests. From there, you can configure flows that execute the linters, tests, and builds defined earlier, so that Every change goes through an automatic filter before being considered ready.

These actions are described in YAML files within the repository, and it's easy to integrate them with the tools you already use locally: if your Makefile or scripts are well-organized, the CI pipeline will only need to call those commands. The combination of a well-tuned local VS Code and a good CI/CD setup on GitHub provides a robust, controlled, and highly professional development cycle.

Finally, we mustn't forget Git's role in all of this. VS Code already includes built-in Git support, but with extensions like GitLens and a well-configured .gitignore file (perhaps aided by services like gitignore.io), you can exclude generated files, virtual environments, dependencies, and sensitive configurations. This way, your repository contains only the code and configuration really needed so that anyone can clone and get to work without extra noise.

What is vibe coding?
Related article:
Vibe Coding: The new way of programming with AI that is revolutionizing development

This entire ecosystem of extensions, configurations, and best practices makes Visual Studio Code very much like a tailor-made suit: lightweight yet sophisticated, flexible yet consistent, and above all, prepared to adapt to different languages ​​and frameworks without having to change tools every other day. Share the information and help other users make better use of VS Code when programming.