(intro music)
- Here's the solution to the challenge
about creating a sharable ESLint configuration.
If you haven't completed it yet,
please take a moment to practice your skills.
Switch over to vs code.
From file, go down to open folder,
navigate to the exercise files and then select challenges,
and then the 02_10 folder, click select folder
or okay to open the folder.
There's a read me in here already
with the steps for the challenge.
Take a look at the directions if you need a refresher.
Within the Explorer, right click and choose new folder.
Specify the name which begins with ESLint dash config dash.
Then the custom name, which in this case will be Nadia
and press enter.
Let's open up the terminal.
Change directory to ESLint dash config dash Nadia.
Initialize a new module with the defaults
using NPM space init space dash Y and press enter.
This will create the package dot JSON file.
Over in the Explorer,
click on the ESLint config Nadia folder
and then right click and go to new file.
Give it the name index dot JS.
This file will just export
an object containing the settings.
We can copy this from the ESLint RC dot JS
from our project.
Navigate up to file,
open file
and go back to the exercise files, solutions.
Go back to 02_06 and get the ESLint RC dot JS.
Let's copy the entire file.
Paste the contents of the file,
then save the changes.
Finally, we need to add ESLint as a peer dependency.
Open package dot JSON.
After the license, add a comma
then a new object containing the peer dependencies
that contains an object.
Within it, specify that we need the project
ESLint with a colon
then the version range of greater than equal to seven.
Save the changes.
That's it.
How can we test it?
Let's make the package available locally using NPM link.
Focus on the terminal then type NPM space link.
Notice the warning that it requires a peer
to have ESLint installed.
This is fine because our Nadia project already has it.
The last step is to add a read me.
In the explorer, right-click on ESLint config Nadia
and choose new file and then specify the name, Readme.md.
Press enter.
Within the file, start with a heading
with a hashtag space ESlint dash config dash Nadia
then the description, a shareable ESLint configuration
extending the ESLint recommended rule set.
Make sure ESLint is installed along with this module.
Save the changes then open Nadia again.
I'm going to go to recent and go back to Nadia.
Then open the terminal, link the module to the project.
This won't permanently change it,
but for the purposes of this demonstration, it'll work.
Type NPM link ESLint dash config dash Nadia.
Now open the ESLint RC dot JS,
replace the content with just extends colon Nadia
and save the changes.
Finally, to test the configuration, go down to the terminal
and type MPX, ESLint and dot.
Fantastic, we've abstracted the configuration.
Let's reset the configuration for now.
Go back to the ESLint RC dot JS,
undo until the original contents are there
then save the changes.
Finally, unlink the configuration,
NPM, unlink ESLint dash config dash Nadia.
We can now close the terminal and the ESLint RC dot JS file.
The project should now be back to its original state.
The completed version of the module is in the solutions,
02_10 directory.
This example is pretty brief
but an organization with custom rules
and plugins would benefit from having
a unified configuration.
What kind of ESLint shareable config
would be helpful to you?