How to configure vs code for programming

Visual Studio Code (VS Code) is one of the most beloved code editors by developers.

From installation to the configuration of keyboard themes, extensions and shortcuts, VS Code offers numerous options to enhance your productivity.

This article will guide you by the essential steps to set up VS Code for programming.

Installing the VS Code

Downloading the installer

To start configuring VS Code, the first step is to download the installer.

The site will automatically identify its operating system and provide the right installer.

Running the installation

Once the download is completed, click the downloaded file to start the installation.

Do not forget to accept the terms of use.

Configuring Path

In the final stage of the installation, check the option "Add to Path". code.

After marking this option, click “Install” and when the installation is over, click “Finish” to complete.

Ready!

Choosing themes and color schemes

Accessing Preferences

To customize VS Code, go to preferences. FILE> Preferences> Color Theme or simply type Preferences: Color Theme in the command palette.

Popular themes

There are many popular themes that can customize the editor to your taste.

• One Dark Pro: A very popular dark theme among developers.
• Atom One Light: Ideal for those who prefer a clear theme.
• Dracula: A dark theme developed by Zeno Rocha, a Brazilian.
• Material Icon Theme: In addition to color themes, you can change the file icons to the Material Design Style.

Personalizing your theme

If none of the standard themes please you, you can customize your own theme. FILE> Preferences> Settings and look for Workbench.colorCustomizations.

Here you can adjust the colors of different elements of the VS Code interface.

Tip: You can add color customizations to the title and status bars within the section Cololustomizations.

With these tips, you can make VS code your way and make the program even more enjoyable!

Installing essential extensions

Exploring the marketplace

To install extensions on VS Code, visit the Marketplace.

1. Open the vs Code.
2. Click on the extensions icon in the left sidebar or press Ctrl+Shift+X.
3. Use the search bar to find the extensions you want.
4. Click on Install To add the extension to your VS Code.

Recommended extensions

Here are some extensions that can greatly improve your productivity:

• Auto Rename Tag: Automatically rename the corresponding HTML tags when you change one of them.
• Highlight Color: Highlights the colors in your CSS code, making it easier to view the colors used.
• Live Server: Creates a local server that automatically updates your browser page whenever you save a file.
• Prettier: Format your code automatically, ensuring a consistent style.
• Eslint: Analyzes your JavaScript code in search of errors and style problems.
• Gitlens: Improves GIT integration into the VS Code, showing detailed information about commits and authors.

Managing your extensions

After installing some extensions, you may want to manage them.

1. Open the extension panel (Ctrl+Shift+X).
2. Click the gear icon next to the extension you want to manage.
3. You can disable, uninstall or configure the extension as needed.

Remember: Less is more.

Configuring code formatting

Adjusting formatting preferences

You can adjust your code formatting preferences on VS Code. Ctrl (CMD) +, And look for "formatting when saving".

Activate this option so that the code is automatically formatted whenever you save a file.

Formatting when saving

One of the most useful features of VS Code is automatic formatting when saving.

To activate this option, add the following line to your file settings.json:

{

Using Prettier and other tools

Prettier is a popular code formatting tool.

1. Install the Prettier Extension on VS Code.
2. Add the prettier settings to your settings.json:

{

Now, every time you save a file, Prettier will form the code automatically.

Maintaining well -formatted code not only improves readability, but also helps to avoid unnecessary errors.

Try different tools and find the one that best fits your workflow.

Personalizing keyboard shortcuts

Accessing shortcut settings

To customize your keyboard shortcuts on VS Code, go to the command palette pressing Ctrl + Shift + P and type Preferences: Open Keyboard Shortcuts.

This will open a new tab where you can see and modify all available shortcuts.

Creating new shortcuts

Creating new shortcuts is quite simple.

Remember to choose combinations that do not conflict with other important commands.

Importing and exporting settings

If you use VS Code in different machines, it may be useful to export your shortcut settings. F1> Preferences: Open Settings (JSON) and copy the desired settings.

To import, just paste these settings into the file settings.json of the new machine.

Customizing your keyboard shortcuts can greatly increase your productivity, allowing you to work more efficiently and comfortably.

Integrating with git

Configuring Git in VS Code

Visual Studio Code has native integration with version control systems like Git.

For starters, open the “Source Control” panel on the left side or use the commands on the lower status bar.

You can initialize a Git repository, perform Commites, Push and Pull, and view and manage changes directly in the editor.

• Initialize a git repository: Click the Git icon in the sidebar and then the repository startup button.
• Add files to Commit: Mouse over the modified files and click “Stage” to add them to Commit.
• Commit Commit: Click “Commit Staged” to confirm the changes.
• Push for the remote repository: Use the command git push in the integrated terminal or through the graphic interface.

Using Gitlens

Gitlens is a powerful extension that improves GIT integration into the VS Code.

To install Gitlens:

1. Go to the VS Code extension tab.
2. Look for gitlens and click Install.
3. After installation, explore the new features available on the source control panel.

Performing Commites and Push

To perform Commites and push on VS Code:

1. Make Changes in Code: Edit your files normally.
2. Add the changes to the Stage: In the source control panel, click “Stage All” to add all changes.
3. Write a message from Commit: In the message field, describe the changes made.
4. Commit Commit: Click on the check icon to confirm.
5. Send the changes to the remote repository: use the command git push In the integrated terminal or click the push button on the graphic interface.

Integrating GIT with VS Code facilitates version control greatly, allowing you to manage your code efficiently and organized, all in one place.

Using the integrated terminal

Opening the terminal

To open the VS Code integrated terminal, use the shortcut `ctrl + \

(Windows/Linux) orCmd + `(MAC).

Sailing and running commands

The integrated terminal works like any other terminal.

• CD to change directory.
• LS or dir To list the files and directories.
• NPM Install To install facilities of a Node.js. project.
• python script.py To run a python script.

The integrated terminal allows you to have more control over your development environment without changing between different windows or applications.

Conclusion

Setting Visual Studio Code for programming is a worthwhile process, as the editor offers a wide range of features and customization options.

From installation to the configuration of themes, extensions and keyboard shortcuts, each step contributes to a more productive and pleasant work environment.

Enjoy the tips and turn VS Code into your main ally when programming!