How to Install the Storybook ESLint plugin
Let's add the official Storybook ESLint plugin
This lesson preview is part of the Storybook for React Apps 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 Storybook for React Apps, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:15] Sometimes, when writing coding stories files, we might encounter some errors and the reason could be that we forget about something that Storybook needs, for instance, a default export. So if your Stories file does not contain a default export, Storybook doesn't know what component to render, thus it will fail.
[00:16 - 00:25] In order to help users detect these kind of errors beforehand, Storybook provides an official ESLint plugin. It's called ESLint plugin Storybook.
[00:26 - 00:36] And not only the ESLint plugin helps detect errors beforehand, but also helps us keep up to date with Storybook standards. So let's add this ESLint plugin to our Storybook so we can take advantage of it .
[00:37 - 00:51] We basically just copy this install, and then we open a terminal, we paste it there. And once we're done, the next step is to essentially just go to the ESLint RC file in our project and add "plugging Storybook recommended" to that.
[00:52 - 00:58] So let's add it to our ESLint file. In the root folder, you will find an ESLint RC.js file.
[00:59 - 01:06] And over here, you see the extents, which already has some entries, and all you gotta do is to add Storybook recommended there. And that's pretty much it.
[01:07 - 01:14] The plugin will add the recommended rules and will already run in the codebase. In fact, if we look at the restaurant detail page, it's telling us that there's an error.
[01:15 - 01:21] And the ESLint plugin is telling us that the file should have a default export. And in the real scenario, this message just saved us a lot of time.
[01:22 - 01:40] So not only the ESLint plugin provides you the information, but also provides a link to the documentation of that rule, which explains to you the details about the rule, an example of incorrect usage, and a correct usage. Not only that, but some of the rules will actually provide a quick-fix action, which will just fix the problem for you.
[01:41 - 01:44] And that's it. We just added the official ESLint plugin for Storybook to serve as a companion for us.
[01:45 - 02:01] And if you want to know more about the ESLint plugin, in the documentation, there's a list of every single rule used in it, some of which will help us avoid bad practices , and some will help us fix errors. And the plugin will be most helpful in upcoming lessons when we start using a new annotation called the Play function.
[02:02 - 02:02] So I'll see you in the next one.