DEV Community

Cover image for Installing and customizing Visual Studio Code: VS Code setup from scratch
Erika Heidi for Sourcegraph

Posted on

Installing and customizing Visual Studio Code: VS Code setup from scratch

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
Enter fullscreen mode Exit fullscreen mode

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:

VS Code getting started page

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.

Opening a project at VS Code

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.

Changing the font 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.

Increasing zoom level on vscode

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.

Changing VS Code theme
_ 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.

Using VS Code source control tool

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 a VS Code extension through the IDE

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
Enter fullscreen mode Exit fullscreen mode

Installing a VS Code extension using the quick open menu

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.

Sourcegraph code search

Installation

ext install sourcegraph.sourcegraph
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

CodeSnap

The CodeSnap extension allows you to take beautiful screenshots of your code.

Installation

ext install adpyke.codesnap
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

TailwindCSS Intelesense

The TailwindCSS Intelesense extension adds syntax highlight and autocomplete for TailwindCSS projects on VS Code.

Installation

ext install bradlc.vscode-tailwindcss
Enter fullscreen mode Exit fullscreen mode

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.

PHP Intelephense

Installation

ext install bmewburn.vscode-intelephense-client
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Laravel Artisan

The Laravel Artisan extension allows you to run Artisan commands from within your VS Code.

Installation

ext install ryannaddy.laravel-artisan
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (3)

Collapse
cristobalnyram profile image
Cristobal Nyram

Thanks a lot for the information, it is so very useful!

Collapse
erikaheidi profile image
Erika Heidi Author

I'm glad it's been useful for you! Thanks for the comment :)

Collapse
misekjakub profile image
Jakub Míšek

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)