Installing ESLint

ESLint is a static code analysis tool that automatically looks for certain issues in your JavaScript code that goes beyond even those checked during validation (we will be using Airbnb's JavaScript Style Guide). It addition to helping reduce the number times you need to manually validate your code, it also gives suggestions about code quality.

These instructions assume you have opened your portfolio project folder in VS Code. Your Explorer pane should look similar to the following screenshot. The important part is that the portfolio_NETID name appears at the top level of the tree. The exact contents of the folder will certainly vary for each of you.

To open a folder in a fresh VS Code window, select File → Open Folder from the menu.

Installation Steps

1. In VS Code, click on the Extensions tab on the left hand toolbar (the button looks like a square breaking away from 3 other squares) and search for "ESLint". Then click the extension's blue Install button.

 

2. In your Browser, download the files .eslintrc.js and package.json and then move them directly into the top-level of your portfolio_NETID project folder. You can also find them in the module03_examples repository.
   NOTE: if your portfolio project folder already has a package.json file at the top-level, you may need to merge the file we are providing here with your file. You do not need to worry if you have package.json files elsewhere in your project folders.
   NOTE: the exact file names given above must be used — in particular, the dot in front of .eslintrc.js. It is quite possible that your web browser will miss the dot in the process of downloading the file. You may need to rename the file in VS Code. If you have done this correctly, .eslintrc.js will have a special icon next to it:
   

 

3. In VS Code, select Terminal → New Terminal from the menu. A command prompt should appear at the bottom of the VS Code window and it should automatically have your portfolio project folder as the current directory.

 

4. In the Terminal, type the following and press Enter. If this worked, you should see a new package-lock.json file appear in your Explorer pane.
   

   npm install

5. In VS Code, open any JavaScript file inside your portfolio project. Look at the status bar at the bottom of the VS Code window. If you see the following ESLint indicator, you will need to click on the indicator and select Allow or Allow Everywhere when prompted:
   

Making Use of ESLint

At this point ESLint should be properly configured. Errors will be indicated with orange squiggly lines under the relevant source code. Hover your mouse over the error to see an explanation.

One nice feature of ESLint is that many problems can be automatically fixed by clicking on any part of your code with a problem and pressing "Ctrl + ." on Windows/Linux (or "Command + ." on a Mac). A popup menu should appear with options for you to select from.

Running a Project-Wide Local Web Server

Included in the provided package.json file is an NPM script for running a local web server on your computer. As a reminder, watch the Run Local Server HowTo video for details about how and why to use this to work on the remaining projects in this course.

The benefit of putting the package.json file at the top-level of your portfolio project folder is that you can use relative paths to refer to files in different subfolders. For example, if you have a file called module2/index.html and you want it to link in a CSS file called module1/great_looking_styles.css, only running the local web server from the top-level package.json file will work. You would open the page using the URL http://localhost:8099/module2/, and inside your link tag, you would refer to the CSS file using the following path: ../module1/great_looking_styles.css.