Setting up your environment - JavaScript Tutorial

- To work along with me on the files for this course, you need a few applications: ESLint, a code editor, and optionally, a web browser. ESLint is a command-line utility that you install using the node package manager, or NPM. NPM is part of the Node.js runtime. If you don't have Node installed, start by visiting Node.js.org and installing the LTS version. With that installed, open your terminal application and navigate to the exercise files folder that contains the files for this course. We're going to start by initializing this directory for our use with NPM. So we're going to type NPM + Space + init, and press Enter. It's going to ask you a series of questions and you're just going to press enter for all of them. For right now, we're not concerned about the configuration here at all. So I'm just going to keep pressing Enter. And then when I get a new command prompt, I'm all good. So now I have this directory initialized for NPM and now I can install ESLint, so that next command is going to be NPM + install + ESLint. And this is going to install the files that will enable you to use ESLint on the command line. Now I have a warning here, and that's not a problem. It's just telling me that if I'm really serious about this later on, I can go configure a file with some more information. But for my use in this course, this is just fine as is. A number of great code editors are available, both free and paid apps. Any editor that lets you edit and save plaintext is fine for this course. So if you have a code editor you like, like Sublime Text or Atom, it's fine to use it. I use Visual Studio Code in these videos, which is a version of Microsoft's Visual Studio, created specifically for web development. Visual Studio Code is free and has Windows, Mac, and Linux releases. The code is available on GitHub and users can submit issues there as well. I've turned on word wrap in my editor. Word wrap ensures that long lines of code don't run off the screen. If you're using Visual Studio Code and you want to do the same, open settings by pressing Command + , on a Mac, or Control + , on Windows, and that opens up the settings. Now up here in the "search settings" box, type, "word wrap," and in the filtered list, the first thing that should show up is "Editor: Word Wrap." Mine's already on, but if you need to change it, just click the arrow over here and select "on" from the list. Then when you're done, go up and click the "X" to close the settings tab. I've also installed a couple extensions to Visual Studio Code. The ESLint extension by Dirk Baeumer enables Visual Studio Code to highlight code that violates rules specified in a project's ESLint configuration file. I'm going to lean heavily on this in my videos so that I don't actually have to build a project after each change. I'll instead have that formatting right in the editor that's going to show me whether ESLint has found an issue. Live Server by Ritwick Dey is an HTTP Server you can launch with a single click that automatically opens the current document in your default browser. This makes testing code in the browser quick and easy to do. I'll be using the console in a web browser in this course. But a modern editor like Visual Studio Code has a built-in console that you can use to test your JavaScript code without ever switching to a browser. If you're comfortable using those built-in tools in your editor, that's a fine alternative. And either way, you undoubtedly already have a web browser installed in your machine and any major modern browser, Chrome, Firefox, or Microsoft Edge, is fine for this course. I'll be using Chrome is these videos, which includes a powerful suite of developer tools. If you want to learn more about anything I use or talk about in this course, I encourage you to explore the library for a deeper dive on that topic. Now let's get started.