Javascript In Visual Studio Code

In this post, we will look at how to beautify a JavaScript file in Visual Studio Code using the Beautify extension.

Visual Studio Plugin Development
Run Javascript In Visual Studio Code Terminal
Debug Javascript In Visual Studio Code
Execute Javascript In Visual Studio Code
Format Javascript Code In Visual Studio 2019
Javascript In Visual Studio Code

Visual Studio Code is a pretty rad open-source application that's somewhere between text editor & IDE. I've been using it every day for the last few years and I can't imagine anything else out there replacing it anytime soon. I suggest giving it a look for web development, as that's its primary focus. JavaScript REPL is a javascript playground for Visual Studio Code with live feedback (logs or errors) as you type, besides your code, in a log explorer, or in an output channel. It supports Javascript, TypeScript, CoffeeScript and it can be used for development in Node.js projects or with front-end frameworks like React, Vue, Angular, Svelte etc. JavaScript extensions for VS Code. Marketplace - ESLint Publisher - Dirk Baeumer. Easily integrate ESLint into your project. If ESLint isn't your favorite linter, choose among. JavaScript (ES6) code snippets #. Npm IntelliSense #. Debugger for Chrome #. Was this documentation helpful?

First, let’s create a really simple JavaScript file. We can see the function is on one line:

Search for and select Beautify:

Click Install:

Now, select CTRL + SHIFT + P or the View menu to bring up the Command Palette:

Visual Studio Plugin Development

Search for Beautify and you will see:

Beautify File
Beautify Selection

On selecting this, our code is now beautified, with the function being displayed across multiple lines:

You can also configure this to run automatically when saving a file. To do this, go to File->Preferences->Settings:

Under Text Editor, select Format On Save.

Now when saving a file, it will be beautified.

THANKS FOR READING. BEFORE YOU LEAVE, I NEED YOUR HELP.

I AM SPENDING MORE TIME THESE DAYS CREATING YOUTUBE VIDEOS TO HELP PEOPLE LEARN THE MICROSOFT POWER PLATFORM.

IF YOU WOULD LIKE TO SEE HOW I BUILD APPS, OR FIND SOMETHING USEFUL READING MY BLOG, I WOULD REALLY APPRECIATE YOU SUBSCRIBING TO MY YOUTUBE CHANNEL.

THANK YOU, AND LET'S KEEP LEARNING TOGETHER.

CARL

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.com | LinkedIn | Twitter | YouTube

Setting the Language of a Visual Studio Code File…
Use ESLint to Validate Your JavaScript in Visual Studio Code
How to Create a Node and Babel Project using Visual…

Visual Studio Code supports many features for JavaScript and Node.js development. The features that ship with the downloaded product are the core features: debugging, IntelliSense, code navigation, etc.

Run Javascript In Visual Studio Code Terminal

In addition, to these core features, you can install a large number of quality extensions to add features to VS Code for JavaScript development.

Tip: To see how to install and manage your extensions, please refer to the extension documentation.

Finding extensions

You can find JavaScript extensions by typing JavaScript in the Extension view search bar. Alternatively, you can find JavaScript extensions using tags: 'tag:javascript'. Search for more extensions in VS Code or in the Marketplace.

In addition you can search for Node.js extensions.

Tip: The extensions shown above are dynamically queried. Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Recommended extensions

If you are just getting started, here are the extensions we recommend trying out.

ESLint

Marketplace - ESLint

Publisher - Dirk Baeumer

Easily integrate ESLint into your project. If ESLint isn't your favorite linter, choose among a variety of other linter extensions, including JSHint, JSCS, and JS Standard.

Read more about setting up JavaScript linters in the VS Code documentation.

JavaScript (ES6) code snippets

Marketplace - JavaScript (ES6) code snippets

Publisher - charalampos karypidis

VS Code comes with many built-in code snippets. The JavaScript (ES6) code snippets extension adds snippets for ES6 (ECMAScript 6) syntax. Here is a small sampling of the snippets provided by this extension. See the extension's README to see the dozens of snippets this pack gives you.

Debug Javascript In Visual Studio Code

You can read more about JavaScript snippets in the VS Code documentation. For additional snippet packs, including Angular 1, Angular 2, Bootstrap 3, ReactJs, and jQuery, check out the Marketplace's Snippets category.

npm IntelliSense

Marketplace - npm IntelliSense

Publisher - Christian Kohler

Execute Javascript In Visual Studio Code

This extension provides IntelliSense for npm modules when using require or import.

Debugger for Chrome

Format Javascript Code In Visual Studio 2019

Marketplace - Debugger for Chrome

Publisher - Microsoft

When you develop for the front end, you might not see the value of an integrated debugger in your editor. You use the browser's debugger right? This is where the Debugger for Chrome extension comes in. This extension lets you debug your JavaScript code in the Google Chrome browser, or any other targets that support the Chrome Debugging Protocol while staying in VS Code. No more context switching to debug!