Skip to main content

Visual Studio Code

vscode

Visual Studio Code (VS Code) can be considered an IDE (Integrated Development Environment) in many aspects, although some purists might argue that it's more of an advanced text editor with IDE features.

However, VS Code offers a wide range of features that you would normally find in an IDE, such as:

  • Syntax highlighting: Highlights code syntax to facilitate reading.

  • Version control integration: Integration with version control systems like Git, allowing you to manage code changes directly from the development environment.

  • Integrated debugging: Support for code debugging directly in the editor.

  • Package and extension management: Ability to install extensions to add additional functionality, such as support for specific programming languages, debugging tools, and integration with cloud services.

  • Integrated terminal: Allows running commands directly from VS Code, facilitating tasks such as compilation, script execution, and Git commands.

  • IntelliSense: Code suggestion feature that helps write code faster, providing code suggestions, automatically completing keywords and providing information about function parameters and methods.

Despite the existence of some Visual Studio Code competitors, none of them have managed to reach its same popularity. Considered by many developers as the best code editor currently available, Visual Studio Code stands out for its ease of use, powerful features, and a large community of developers who constantly contribute with new extensions and improvements. Additionally, being open source software, VS Code offers the flexibility to be customized and extended according to each user's specific needs.

One of the main advantages of using this editor is the vast range of available extensions, which significantly expand its functionalities and make it even more powerful. Its user-friendly interface, ease of installation and configuration, combined with constant community support and regular updates, consolidate Visual Studio Code as the preferred choice among developers.

Visual Studio Code vs Visual Studio​

"Visual Studio Code" and "Visual Studio" are two different tools, although they share part of the name and are both developed by Microsoft. They have different purposes and are aimed at different types of development.

The main difference between "VS Code" and "Visual Studio" is in the scope and focus of the tools. "Visual Studio" is a complete IDE with a wide range of features for software development, while "Visual Studio Code" is a lighter and more flexible code editor, designed primarily for code editing.

Visual Studio would be the competitor of IntelliJ IDEA and XCode and not VS Code. They are tools for software development although many programmers like VS Code with the right plugins installed.

IntelliJ IDEA, developed by JetBrains, is a great IDE, but it's paid. It was initially developed to work with Java, but nowadays it works for any language. If you're a programmer, I think it's worth giving this IDE a chance, especially if your company offers the license which isn't cheap. The big problem with testing is liking it! Liking expensive things is very easy...

VS Code Installation​

Installing VS Code is very simple, a quick search on the Internet already shows how to do it.

A recommendation is to install Microsoft repositories to install via package instead of installing the .deb or .rpm, facilitating updates. It's also available via snap and flatpak if you prefer.

Before starting to program, you can customize your VS Code experience. Go to "Settings" by clicking on "File" and selecting "Preferences" > "Settings". Here, you can customize various aspects of the editor, such as font, theme, and keyboard shortcuts.

VS Code Plugins​

VS Code supercharged with the right plugins greatly improves productivity. Each person has a different environment, but I'll leave a list of some interesting ones.

General Use Plugins​

  • Dracula Theme great theme for programming.

  • Material Icon Theme puts icons on different file types.

  • YAML helps a lot with formatting and validation of yaml files.

  • json good for analyzing json files.

  • markdownlint rules to encourage standards and consistency for Markdown files.

  • Peacock puts colors on VS Code borders according to the project. Helps a lot when we have several VS Code instances open with different projects facilitating identification.

  • Excalidraw by creating a .excalidraw file, you'll be able to use Excalidraw inside VS Code without needing to open a browser for it and you can save the file along with the project.

  • WSL is essential if you're using Windows Subsystem for Linux. Opens the project inside WSL in VS Code installed on Windows.

  • Remote - SSH allows you to work on other machines using the SSH protocol. It provides a seamless development experience, allowing you to edit files, run commands, and debug applications directly from your local VS Code instance in remote environments.

  • Remote Explorer complements Remote SSH above.

  • GitLens gives git control a boost.

  • Prettier - Code formatter. Code formatter that enforces a consistent code style across all your projects. Compatible with various programming languages and automatically formats code according to predefined rules, improving readability and reducing style-related conflicts.

  • Code Spell Checker is a basic spell checker. It doesn't grammatically check a sentence, but it helps not to make simple typing mistakes.

  • Brazilian Portuguese - Code Spell Checker for Code Spell Checker to check words in Portuguese.

  • vs code-pdf views pdf inside VS Code.

  • Path Intellisense automatically completes file names and paths.

  • Regex Previewer helps check if the regex is working as it should.

  • Better Comments create friendlier comments in your code.

  • indent-rainbow colorizes code to show indentation, facilitating visualization of hierarchies.

  • Guides adds guide lines to facilitate visualization of indentation and spacing in code.

  • Svg Preview allows viewing SVG files directly in VS Code.

  • CodeSnap used to take beautiful screenshots of your code in VS Code.

  • EditorConfig for VS Code allows you to define and share your code formatting rules between different editors and development teams. With this extension you can ensure code style consistency across all projects.

  • Vim will combine the best of NeoVim with the best of VS Code.

  • DotENV

  • psioniq File Header inserts a header at the top of the file. Requires some setup time, but it's very useful.

    • /*
      * File: \Users\me\Development\psioniq\myProject\src\myPrecious.js
      * Project: \Users\me\Development\psioniq\myProject
      * Created Date: Saturday December 31 2016
      * Author: Arthur Bodkin, esq
      * -----
      * Last Modified: Sunday January 01 2017
      * Modified By: Tammy Bodkin
      * -----
      * Copyright (c) 2016 psioniq Global Enterprises, Inc
      */

Tool Plugins​

Plugins that help a lot for working as DevOps.

  • Docker facilitates creating, managing, and deploying containerized applications.
  • Dev Containers helps in creating Dockerfiles.
  • Kubernetes allows visualization of cluster objects and has several ready-made templates to create manifests.
  • HashiCorp Terraform greatly improves development using terraform.
  • Ansible facilitates playbook creation.
  • Vagrant facilitates machine management and Vagrantfile syntax.
  • Packer facilitates .pkr.hcl file syntax.

Language Plugins​

For web development work.

  • Auto Close Tag automatically closes HTML/XML tags, saving time when programming.
  • Auto Rename Tag automatically renames the corresponding tag, maintaining code consistency.
  • ESLint: identifies and fixes JavaScript/TypeScript code issues following predefined rules and standards.
  • Live Server starts a local development server in your default web browser using a port number. Whenever you make changes to files like HTML, CSS, or JavaScript, the changes are reflected.

Repository and Pipeline Plugins​

  • GitLab Workflow integrates GitLab into VS Code and helps in developing pipelines using gitlab-ci.

  • GitHub Actions helps in creating and debugging pipelines using GitHub Actions.