no-uninstalled-addons.md

no-uninstalled-addons

Included in these configurations:

• recommended

Rule Details

This rule checks if all addons in the storybook main.js file are properly listed in the root package.json of the npm project.

For instance, if the @storybook/addon-links is in the .storybook/main.js but is not listed in the package.json of the project, this rule will notify the user to add the addon to the package.json and install it.

As an important side note, this rule will check for the package.json in the same level of the .storybook folder.

Examples of incorrect code for this rule:

// in .storybook/main.js
module.exports = {
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
}

// package.json
{
	"devDependencies": {
		"@storybook/addon-links": "0.0.1",
    "@storybook/addon-essentials": "0.0.1",
		'
	}
}

Examples of correct code for this rule:

// in .storybook/main.js
module.exports = {
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
}

// package.json
{
	"devDependencies": {
		"@storybook/addon-links": "0.0.1",
    "@storybook/addon-essentials": "0.0.1",
		"@storybook/addon-interactions": "0.0.1"
	}
}

Options

TODO: check if the package.json location should be an option.

When Not To Use It

This rule is very handy to be used because if the user tries to start storybook but has forgotten to install the plugin, storybook will throw very weird errors that will give no clue to the user to what's going wrong. To prevent that, this rule should be always on.

Further Reading

Check the issue in GitHub: #95