<h1 id="javascript-code-editors">JavaScript Code Editors</h1> <p><strong>Summary</strong>: in this tutorial, you will learn about JavaScript code editors and how to install the Visual Studio Code for coding JavaScript.</p> <h2 id="popular-javascript-code-editors">Popular JavaScript Code Editors</h2> <p>To edit JavaScript source code, you need a plain text editor such as Notepad on Windows. However, to simplify and speed up typing of JavaScript code, you need a JavaScript code editor.</p> <p>Besides basic editing features, a JavaScript code editor provides you with syntax highlighting, indentation, autocomplete, and brace matching functionality. Some editors also allow you to debug JavaScript.</p> <p>The following are some popular JavaScript code editors:</p> <ul> <li><a href="https://code.visualstudio.com/">Visual Studio Code</a></li> <li><a href="https://atom.io/">Atom</a></li> <li><a href="https://notepad-plus-plus.org/">Notepad++</a></li> <li><a href="https://www.vim.org/">Vim</a></li> <li><a href="https://www.gnu.org/software/emacs/">GNU Emacs</a></li> </ul> <p>Note that all these JavaScript editors are free. As a matter of choice, we will use the Visual Studio Code.</p> <h2 id="visual-studio-code">Visual Studio Code</h2> <p>Visual Studio Code is a free and open-source code editor developed by Microsoft. Visual Studio Code is often called VS Code.</p> <p><img src="https://www.javascripttutorial.net/wp-content/uploads/2019/12/JavaScript-Code-Editor-VS-Code.png" alt="JavaScript Code Editor - VS Code"></p> <p>VS Code works across platforms including Windows, Linux, and macOS.</p> <p>VS Code is highly customizable. It allows you to change the theme, keyboard shortcuts, preferences. It has lots of useful extensions that add extra functionality to the editor.</p> <p>VS Code includes built-in support for JavaScript, which includes IntelliSense, debugging, formatting, code navigation, refactoring, and many other advanced language features.</p> <p>To learn all the features supported by VS code, you check it out the <a href="https://code.visualstudio.com/docs/languages/javascript">JavaScript in Visual Studio Code</a>.</p> <h3 id="download-visual-studio-code">Download Visual Studio Code</h3> <p>To download the Visual Studio Code, you go to the following download link:</p> <p><a href="https://code.visualstudio.com/download">Download Visual Studio Code</a></p> <h3 id="installing-visual-studio-code">Installing Visual Studio Code</h3> <p>Setting up the Visual Studio Code is easy and quick. It is a small download so that you can install it in a few minutes.</p> <h3 id="a-windows">A) Windows</h3> <p>To install the VS Code on Windows, you follow these steps:</p> <ul> <li>First, execute the installer from the downloaded file.</li> <li>Then, open the Visual Studio code.</li> </ul> <p>Note that the installer will add the Visual Studio Code to your <code>%PATH%</code>. It will allow you to type the command <code>code .</code> to launch the VS Code on that folder.</p> <h3 id="b-macos">B) macOS</h3> <p>You follow these steps to install the VS Code on macOS:</p> <ul> <li>First, double-click on the downloaded archive to expands the contents.</li> <li>Then, drag Visual Studio Code.app to the Applications to make it available in the launchpad.</li> </ul> <h3 id="installing-the-live-server-extension">Installing the Live Server extension</h3> <p>The live server extension allows you to launch a development local server with the hot reload feature for static pages. Once you change the JavaScript code, you don’t need to refresh the page to see the changes.</p> <p>To install the Live Server extension, you follow these steps:</p> <ul> <li>First, click the Extensions.</li> <li>Second, search for the Live Server and select the Live Server extension on the list.</li> <li>Finally, click the Install button.</li> </ul> <p><img src="https://www.javascripttutorial.net/wp-content/uploads/2020/04/Live-Server.png" alt="img"></p> <p>In this tutorial, you have learned about the JavaScript code editor and how to install the Visual Studio Code for editing JavaScript source code.</p>