In this commodity nosotros will await at the steps of How to Download and  Install Visual Studio Code on Windows and Mac operating systems.

For the development of each programming linguistic communication, there are multiple IDE (Integrated Development Environment) available. For JavaScript also in that location are numerous IDEs, and Visual Studio Lawmaking editor is i of them. Information technology is a lightweight simply potent source lawmaking editor that runs on your desktop and is bachelor for Windows, macOS, and Linux. Visual Studio Code has congenital-in support for JavaScript, TypeScript, and Node.js. It has an extensive ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go ) and runtimes (such as .Net and Unity ). At ToolsQA nosotros are using VS Code for Protractor, Cypress, JavaScript, etc. In this article

Nosotros will cover the below topics in this article:

  • How to download and carry out installation the Visual Studio Code?
  • Procedure to install the Visual Studio Code on macOS?
  • How to install Visual Studio Lawmaking on Windows?
  • What are the essential components of the VS Code?
  • What are the language-specific features provided by VS Code?

How to download and carry out the installation of the Visual Studio Code?

Getting up and running with Visual Studio Lawmaking is swift and straightforward. It is a small download and so y'all tin install it quickly and requite the VS Lawmaking a try. VS Code is a complimentary code editor. Additionally, it runs on the macOS, Linux, and Windows operating systems. Let's see how nosotros can prepare the same in the different platforms nosotros use.

The first step is shared across all the platforms irrespective of any OS you lot are using.

Download Visual Studio Code:

You tin download Visual Studio code from URL "https://lawmaking.visualstudio.com/download" by selecting the right platform:

Visual StudioVS Code installers

Yous can click any of the icons mentioned to a higher place, depending on the operating system for which you are planning to download the visual studio code editor.

How to install Visual Studio Lawmaking on macOS?

Follow the below steps*(shown in gif file and mentioned in bullet points)* to install the VS Code on macOS:

  1. Download Visual Studio Code for macOS.
  2. Afterwards clicking on the Mac option on the download site, it will download a zip file, as shown below:
  3. Double-click on the downloaded zip to expand the contents. It volition give a file, as shown beneath:
  4. Drag "Visual Studio Code.app" to the "Applications" folder, so as it available in the "Launchpad."
  5. Double click on the "Visual Studio Code" to open.
  6. Add VS Code to your Dock past correct-clicking on the icon to bring up the context card and choosing Options => Keep in Dock.

Install Visual Studio Code- Adding VSCode to Dock

How to Install Visual Studio Code on Windows?

Firstly, download the Visual Studio Lawmaking installer for Windows. Once information technology is downloaded, run the installer (VSCodeUserSetup-{version}.exe). It will merely have a minute.

Secondly, accept the agreement and click on next.

Install Visual Studio Code - Accept Aggreement

Thirdly, click on "create a desktop icon" and so that it can be accessed from desktop and click on Next.

next screen

Subsequently that, click on the install push.

Next Screen

Finally, after installation completes, click on the finish button, and the visual studio code will get open up.

Insta

Past default, VS Code installs under C:\users{username}\AppData\Local\Programs\Microsoft VS Code.

Visual Studio Screen

After the successful installation, let'southward motility to the next section to understand the various components of the User Interface of Visual Studio Code Editor.

What are the essential components of the VS Code?

Visual Studio Code is a code editor at its core. Like many other lawmaking editors, VS Code adopts a standard user interface and layout of an explorer on the left, showing all of the files and folders you have access to. Additionally, it has an editor on the correct, showing the content of the files you take opened. Below are a few of the most critical components the VSCode editor:

Visual Studio Screen

VS Lawmaking comes with a straight-forward and intuitive layout that maximizes the space provided for the editor while leaving aplenty room to browse. Additionally, it allows access to the full context of your folder or project. The UI is divided into 5 areas, as highlighted in the above image.

  1. Editor - It is the main area to edit your files. You lot can open up as many editors as possible next vertically and horizontally.
  2. SideBar - Contains different views similar the Explorer to help you while working on your project.
  3. Condition Bar - It contains the information virtually the opened project and the files y'all edit.
  4. Activity Bar - It is located on the far left-mitt side. Information technology lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
  5. Panels - Information technology displays different panels beneath the editor region for output or debug information, errors, and warnings, or an integrated terminal. Additionally, the panel can likewise move to the right for more vertical space.

VS Lawmaking opens up in the aforementioned state it was last in, every time you start it. It also preserves binder, layout, and opened files.

What are the linguistic communication-specific features provided by VS Code?

Visual Studio Lawmaking supports the maximum of the modern programming languages. It provides various features that can be linguistic communication-specific simply are available in about all the supported programming languages. Few of them are:

  • Syntax highlighting and subclass matching: Syntax highlighting determines the color and manner of source code displayed in the Visual Studio Code editor. Moreover, it is responsible for colorizing keywords like if or for in JavaScript differently than strings and comments and variable names.
  • Smart completion (IntelliSense): IntelliSense is a full general term for a variety of code editing features, including code completion, parameter info, quick info, and member lists. Other names of IntelliSense features are "code completion," "content assistance," and "code hinting." The beneath gif file shows a sample of the feature:

VS Code Intellisense

  • Linting and corrections: Linters provides warnings for suspicious-looking lawmaking. While VS Lawmaking does non include a congenital-in linter, many linter extensions available in the marketplace.
  • Code navigation (Go to Definition, Find All References): Code navigation lets you speedily navigate JavaScript projects.
  • Go To Definition F12 - It asks you to Become to the source code of a symbol definition.
  • Peek Definition ⌥F12 - Bring upwards a Peek window that shows the definition of a symbol.
  • Become to References ⇧F12 - Testify all references to a symbol.
  • Become to Type Definition unassigned - Go to the blazon that defines a symbol. In other words, for an case of a course, this will reveal the form itself instead of where the example is defined.
  • Debugging: VS Lawmaking comes with great debugging back up. Additionally, you can fix breakpoints, inspect objects, navigate the call stack, and execute lawmaking in the Debug Console.
  • Refactoring: VS Code includes some handy refactorings such as Extract function andExcerpt constant. Just select the source code you'd like to extract and so click on the lightbulb in the gutter or press (⌘.) to run into available refactorings. Available refactorings include:

JavaScript refactoring

  • Extract to method or function.
  • Extract to constant.
  • Convert betwixt named imports and namespace imports.
  • Move to a new file.

Central Takeaways

  • Visual Studio Lawmaking is a lightweight just strong source code editor that runs on your desktop. Additionally, it provides built-in support for Javascript.
  • Moreover, it provides a very intuitive UI interface. Additionally, there is proper system of all the sections because there is ample room to scan and admission the full context of the project.
  • Also, VSCode provides many language-specific features such as Intellisense, Syntax highlighting, etc. Which, in turn, makes the life of a developer very easy.