Integrating ESLint into your code editor
Get instant feedback by setting ESLint in your code editor
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Master Testing Library with ESLint Plugin course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Master Testing Library with ESLint Plugin, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:15] In the previous lesson, we run ESLin in our terminal. Having a command to be able to link your files is useful, especially for CIA purposes, but what about getting the feedback visually while coding?
[00:16 - 00:27] This is convenient so you can see reported errors while writing code. To make the most of ESLin, we are going to integrate it in our code editor so we can see the reported errors instantly within the code.
[00:28 - 00:36] We are going to focus in two main code editors, Visual Studio Code and Webstone . Let's start with Visual Studio Code.
[00:37 - 00:44] First, open your code editor. Now go to the page of the official ESLin plugin from the Visual Studio Marketplace.
[00:45 - 00:55] The link for this is provided within this lesson. Now we proceed to install it through here.
[00:56 - 01:05] After installing the ESLin extension, you might need to restore Visual Studio Code so the changes are applied. After doing this, you might see a pop-up like this.
[01:06 - 01:20] It's asking you if you want to allow ESLin extension to execute the ESLin version that it finds in your null dependencies. You need to click on "allow" or "allow everywhere" and that should be it.
[01:21 - 01:29] Everything should be set up now. Let's check if this is working as expected by opening a demo app provided and forcing an ESLin error.
[01:30 - 01:40] I go to the app.jsx and then at the very bottom, I create an unused bar. We should see that the new bar is under line in red.
[01:41 - 01:50] If we over it, we will see ESLin complaining about an assigned value but never red. You can see this pop-up, then the ESLin extension is working as expected.
[01:51 - 01:57] You can just undo this change and continue with the lesson. Now let's do the same but for Webstone.
[01:58 - 02:12] Since Webstone has built-in support for ESLin, we only need to make sure it's enabled. In order to do this, we open Preferences, look for ESLint in the top bar and go into the ESLin menu.
[02:13 - 02:19] In here, you will see three options. You will need to make sure that the automatic ESLin configuration is the world selected.
[02:20 - 02:25] Make sure this is working as expected. We are going to do the same check as for Visual Studio Code.
[02:26 - 02:44] So we go to the app.jsx and at the very bottom, we add a new unused bar. We should see that unused is under line in red and if we over it, we will see the ESLin error complaining about the value assigned but never used.
[02:45 - 02:46] means a Western is set up as a spectrum.