Here’s to find and fix your unused dependencies.

In this article, we review how to find and fix unused dependencies in your JavaScript and TypeScript projects. We will look at:

1. What is Knip?

2. Knip usage in Storybook codebase.

I study patterns used in an open source project found on Github Trending. For this week, I reviewed some parts of Storybook codebase and wrote this article.

Press enter or click to view image in full size

What is Knip?

Knip finds and fixes unused dependencies, exports and files in your JavaScript and TypeScript projects. Less code and dependencies lead to improved performance, less maintenance and easier refactorings.

How does Knip work? Advanced analysis starting from fine-grained entry points based on the actual frameworks and tooling in (mono)repos for accurate and actionable results.

Installation

npm init @knip/config

Now you can run Knip to lint your project:

npm run knip

Learn more about Knip.

Knip usage in Storybook codebase.

I found Knip in Storybook package.json.

{
  "name": "@storybook/root",
  "scripts": {
    ...
    "knip": "cd code; yarn knip",

You can find Knip configuration file at storybook/scripts/knip.config.ts.

Checkout the documentation for the Knip configuration file.

I have to admit, after reading the documentation for the Knip configuration, Knip configuration in Storybook looks complicated.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Study the patterns used in large OSS projects at Think Throo.

References:

1. https://www.npmjs.com/package/knip

2. https://github.com/storybookjs/storybook/tree/next/code

3. https://github.com/storybookjs/storybook/blob/next/package.json#L9

4. https://knip.dev/overview/configuration