Visual Studio Code (VS Code) is a source code editor or IDE (Integrated Development Environment) freely available for all major operating systems. Although VSCode has native features to help you develop applications and websites in several languages, what makes VS Code an excellent choice for developers is the vast ecosystem of extensions that allow you to customize and fine tune your VS Code installation to meet your specific needs.
In this article, you'll learn how to install and customize VS Code to make it the right fit for your coding needs. You'll also get a list of recommended extensions for improving your overall productivity, no matter your programming language of choice. As an appendix, I've included a few extensions that I personally use for PHP Development.
Installing Visual Studio Code
As mentioned earlier, VS Code is available for all major operating systems. To get started, access their download page and download the adequate installer for your system.
Installing on Ubuntu
For Ubuntu systems, the operating system in which this article is validated, you should download the .deb file. Once it's downloaded, you can install it from your terminal with sudo dpkg -i file.deb, like this:
sudo dpkg -i code_1.63.2-1639562499_amd64.deb
Installing on other systems
For other systems, download and execute the appropriate installer.
Getting familiar with the interface
After installation is complete, open VS Code. You'll see a "Get Started" page like this:
In this page you have some shortcuts to change your configuration, set up synchronization, and install language-specific extensions. You don't need to do this now; first, let's explore how to navigate the IDE interface.
Opening a project in VS Code
To open an existing project, use the files icon on the left menu (it's the first icon). Then, choose a project directory to open, or clone a remote repository to get started.
Changing the font size
Open a file from your project and check if you are satisfied with the default font size. With bigger resolutions and screens, there's a chance you may need to increase the font size for more comfortable reading. You can do this by accessing the menu File -> Preferences -> Settings and then searching for "font" on the search bar that appears at the top. Look for the option Editor font size and change it to your desired size.
Increase the IDE fonts / window zoom level
Changing the editor font won't modify the IDE interface font size. To increase the UI fonts, go to the Settings page via the menu File -> Preferences -> Settings and search for "zoom" on the search bar that appears at the top. Change the Window zoom level to a value such as 1 or 2 and see if that looks better.
Changing the editor theme
To change the default editor color theme, go to File -> Preferences -> Color Theme or hit CTRL+K CTRL+T to access the theme selection menu. There are a few different options, in both dark and light schemes.
_ The theme chosen in this gif is "Monokai Dark"._
Using the source control tool
The third icon on the left menu will give you access to VS Code's built-in source control tool, a helper tool that allows you to discard and commit changes to source control without the need to run commands from a terminal.
How to install extensions
Once you're satisfied with your basic setup, you may want to start exploring VS Code extensions. The VS Code Marketplace offers a large collection of useful extensions to customize your VS Code so that it attends all your coding needs.
There are two different ways to install an extension from the marketplace:
Installing directly through the IDE
You can search and install extensions directly from the VS Code interface by accessing the extensions tab, the 5th button on the top left menu.
Installing with a command
If you are navigating the marketplace looking for extensions and find one you want to install, you can do so with a command executed through VS Code's "quick open" shortcut (CTRL+P). The extension page typically has instructions on how to do so. For instance, let's say you want to install the Markdown all in one extension, a popular markdown extension for VS Code. From VS Code, type CTRL+P and paste in the following command:
ext install yzhang.markdown-all-in-one
Each extension has a unique name that you can find on the extension's marketplace page. You'll need that name to install the extension with the ext install command.
Recommended productivity extensions
In this section, you'll find a collection of recommended extensions that can be useful to improve your coding productivity regardless of your programming language of choice.
Sourcegraph code search
The newly released Sourcegraph VS Code extension allows you to search code across millions of open source repositories right from your IDE. You don't need an account to use the plugin, but connecting to a free account enables you more features such as searching across your private repositories on multiple code host services.
Installation
ext install sourcegraph.sourcegraph
In the following video, I show a brief overview of how to use the Sourcegraph plugin on VS Code to search for examples of how a method is used across open source repositories.
For more information and tips on how to use Sourcegraph's VS Code extension, check this blog post.
Prettier
Prettier is a popular code formatting tool that is also available as a VS Code extension. It enforces a consistent code style based on a set of rules that take into consideration the maximum line length, wrapping and reformatting code when necessary.
Installation
ext install esbenp.prettier-vscode
Docker
The Docker extension allows you to quickly manage your Docker environment through VS Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.
Installation
ext install ms-azuretools.vscode-docker
Color Highlight
Especially useful for developers who work with front end, the Color Highlight extension adds a colored border around colors, which is very handy to give you an instant reference for web colors without having to reload a page on your browser.
Installation
ext install naumovs.color-highlight
Project Manager
The Project Manager extension enables advanced project management on VS Code. It allows you to organize your projects into virtual workspaces with support to tags and remote development.
Installation
ext install alefragnani.project-manager
Markdown all in one
With over 3 million downloads, the Markdown all in one extension is a must-have for anyone who writes documentation in the markdown language.
Installation
ext install yzhang.markdown-all-in-one
Spell Right
With the Spell Right extension you'll have a lightweight and offline spellcheck right into your VS Code installation. It supports several languages and file types.
Installation
ext install ban.spellright
CodeSnap
The CodeSnap extension allows you to take beautiful screenshots of your code.
Installation
ext install adpyke.codesnap
Emmet Live
The Emmet Live extensions enables support to emmet abbreviations, special expressions that are evaluated and turned into structured code snippets, such as HTML code.
Installation
ext install ysemeniuk.emmet-live
TailwindCSS Intelesense
The TailwindCSS Intelesense extension adds syntax highlight and autocomplete for TailwindCSS projects on VS Code.
Installation
ext install bradlc.vscode-tailwindcss
Appendix: PHP extensions
In this section, you'll find a collection of extensions that are useful for PHP development.
PHP Intelephense
The PHP Intelephense extension enables advanced code analysis and gives you context about methods, variables, classes and other components in a PHP application.
Installation
ext install bmewburn.vscode-intelephense-client
PHP Getters and Setters
The PHP getters and setters extension enables you to quickly generate getter and setter methods on a PHP class, based on its properties.
Installation
ext install phproberto.vscode-php-getters-setters
PHP Namespace Resolver
The PHP namespace resolver extension facilitates importing classes and also allows you to easily order your use statements by line length or in alphabetical order.
Installation
ext install MehediDracula.php-namespace-resolver
Laravel Artisan
The Laravel Artisan extension allows you to run Artisan commands from within your VS Code.
Installation
ext install ryannaddy.laravel-artisan
Conclusion
In this post, we saw how to install and customize VS Code for a better coding experience suited to your individual needs. We also saw some useful extensions for productivity, and a few PHP extensions that can help you improve your development speed in that language.
Give these extensions a try, and if some don't turn out to be useful you can quickly deactivate them through the Extensions tab (the fifth icon on the top left menu).
Have feedback or questions about the Sourcegraph VS Code extension? Leave a comment, or join our Community Slack Space where our team will be happy to answer any questions you may have.
Top comments (3)
Thanks a lot for the information, it is so very useful!
I'm glad it's been useful for you! Thanks for the comment :)
For PHP, we have been working for years to provide this extension
PHP Tools
marketplace.visualstudio.com/items...
It provides basically everything for PHP development integrated - IntelliSense, Debug, PHPUnit Debug, Code Lens, Inlines, Code Fixes, Code Validation, PHPDoc generators, getter/setter generator, namespace importing, web server, ... etc.
(disclaimer, I'm the author)