Knip: An Automated Device For Discovering Unused Recordsdata, Exports, And Dependencies

Let’s face it. Most of us favor creating new options and consumer interfaces over upkeep duties comparable to code cleanup, undertaking configuration, and dependency administration.

Numerous the boring and repetitive issues, like formatting and linting, are largely solved issues with instruments like Prettier, ESLint, and TypeScript.

But there’s one other space that usually doesn’t obtain a lot consideration: dealing with unused recordsdata, exports, and dependencies. That is very true as initiatives develop over time, negatively impacting maintainability in addition to our enthusiasm for it. These unused artifacts typically go unnoticed as a result of they’re usually arduous to search out.

The place do you begin searching for unused issues? I wager you’ve accomplished a worldwide seek for a dependency to search out out whether or not it’s nonetheless used. Do you know you may right-click a file and “Discover File References” in VS Code? These are the stuff you shouldn’t must do. They’re tedious duties that may — and will — be automated.

There’s Obtained to Be a Higher Method

Once I was in an increasing codebase, the variety of unused recordsdata and exports in it stored rising. Monitoring them turned increasingly troublesome, so I began searching for automated options to assist.

I used to be glad I discovered some current instruments, comparable to ts-prune. After some preliminary runs, I
found that our codebase required quite a lot of configuration and nonetheless produced many false positives. I researched how different codebases attempt to keep tidy and realized there’s an enormous alternative on this house.

Alongside the highway, I additionally discovered depcheck, which offers with quite a lot of complexity and customizations in JavaScript initiatives. After which there’s unimported, which additionally does a notable job of discovering dangling recordsdata and unused dependencies.

However none of those instruments dealt with my undertaking very properly. The truth that I must use a mixture of them wouldn’t be a showstopper, however I couldn’t get the configurations proper for dealing with the undertaking’s customizations with out reporting too many false positives or ignoring an excessive amount of of the undertaking and leaving a big blind spot.

In the long run, instruments on this space are solely used when they’re absolutely automated and in a position to cowl the entire undertaking. It additionally didn’t assist that not one of the current instruments assist monorepos, a construction for repositories that has not too long ago gained widespread reputation. Final however not least, each ts-prune and depcheck are in upkeep mode, that means they’d probably by no means assist monorepos.

Working In the direction of A Answer

I’m motivated to automate issues and preserve initiatives in strong form.

Nice developer expertise (DX) retains builders glad and productive.

So I began creating an inner device for my undertaking to see if I may do higher. It began as an inner script that dealt with solely the specifics of that individual repository, and all through the journey, I stored realizing what a blessing and a curse that is. Automating boring stuff is a profitable idea, however getting it proper is such a troublesome problem — however one which I used to be prepared to attempt.

Alongside the highway, I additionally bought increasingly satisfied {that a} single device to search out all classes of unused issues was a good suggestion: every of them requires studying and parsing supply recordsdata, and since it is a comparatively costly job, I feel the environment friendly path is to trace them in a single go.

Introducing Knip

So, what’s Knip? I feel it’s greatest categorized as a undertaking linter. It picks up the place ESLint ends. The place ESLint handles particular person recordsdata, Knip lints the repository as a complete. It connects all of the dots — by way of recordsdata, imports, exports, and dependencies — and experiences what’s unused.

Roughly talking, there are two methods to have a look at Knip. In greenfield initiatives, it’s nice to put in Knip and let it develop with the undertaking. Hold the repository tidy and run Knip manually or in an automatic steady integration (CI) surroundings.

One other approach to have a look at Knip is in bigger initiatives. Knip is a superb companion for housekeeping so far as figuring out unused recordsdata, exports, and dependencies. There could also be false positives initially, but it surely’s a lot simpler to skip them in comparison with discovering needles in a haystack by yourself.

Moreover, throughout or after giant refactoring efforts, Knip could be a nice assistant for cleansing issues up. It’s solely human to overlook or overlook issues which might be not used, much more so when the issues aren’t near the refactoring work.

Knip works with conventional JavaScript and trendy TypeScript, has built-in assist for monorepos, works with any bundle supervisor, and has many options, small and enormous, that allow you to keep your initiatives.

How Knip Works

Knip begins with a number of entry recordsdata and calculates the dependency tree, serving to it know all of the recordsdata which might be used whereas marking the remaining recordsdata as unused.

In the meantime, Knip retains observe of imported exterior dependencies and compares them towards the dependencies in bundle.json to report each unused dependencies and dependencies which might be used however not listed. It additionally retains observe of inner imports and exports to report unused exports.

Let me offer you a greater look underneath the hood.

Manufacturing Mode

In its default mode, Knip analyzes the entire undertaking, together with each manufacturing and non-production recordsdata, comparable to checks, configurations, Storybook tales, devDependencies, and so forth.

However this mode may miss alternatives for trimming. As an example, recordsdata or exports imported solely by checks are usually not reported as unused. Nonetheless, when the export shouldn’t be used anyplace else, you may delete each the export and its checks!

For this reason Knip has a manufacturing mode. This mode is extra strict than the default mode, the place Knip will use solely manufacturing code as entry recordsdata and solely take into account dependencies (excluding devDependencies).

Scripts

Many initiatives use command line instruments that include dependencies. As an example, after putting in ESLint, you should use eslint, and Angular makes ng obtainable in “scripts” in bundle.json. Knip connects dependencies with binaries and tells you when they’re unused or lacking.

However there’s extra. CI environments, like Azure and GitHub Actions, are configured with YAML recordsdata which will additionally use the identical command line instruments.

And eventually, customized scripts might use command line instruments by spawning little one processes, both utilizing native Node.js APIs or with libraries like zx or execa.

Knip has a rising variety of such detections to maintain your initiatives neat and tidy, refactor after refactor. But what’s so attention-grabbing about these scripts? They could be difficult to parse, making it troublesome to extract their dependencies. Let’s have a look at an instance:

Right here, we are able to discover @scope/bundle and ts-node and dir/index.ts are dependencies of this script. Actually, that is simply the tip of the iceberg. I promise just a few common expressions received’t be sufficient!

Now, if this script is up to date or eliminated, Knip will inform you if any dependency or file is not used. Then again, Knip may even inform you if a dependency is used however not listed explicitly in bundle.json. (You shouldn’t be counting on transitive dependencies anyway, proper?)

Plugins

There’s an abundance of tooling obtainable within the JavaScript ecosystem. And every device has its configurations. Some enable YAML or JSON, and a few enable (or require) you to put in writing configurations in JavaScript and even TypeScript.

Since there’s no generic option to deal with the myriad of variations, Knip helps plugins. Knip has plugins for instruments which will reference dependencies that must be listed in bundle.json.

What issues to plugins is how dependencies are referenced. They may be imported in JavaScript like another supply file, and Knip may also parse them as such. But, they’re typically referenced as strings, a lot the identical as what ESLint does with the extends and plugins choices. Dependencies may be laid out in implicit methods, comparable to prettier, which suggests the eslint-config-prettier dependency. Storybook has the builder: “webpack5” configuration that requires the @storybook/builder-webpack5 and @storybook/manager-webpack5 dependencies.

Compilers

Knip parses all kinds of JavaScript and TypeScript recordsdata, together with ES modules and CommonJS modules.

However some frameworks work with non-standard recordsdata, comparable to Vue, Svelte, MDX, and Astro. Knip means that you can configure compilers to incorporate these kinds of recordsdata to allow them to even be included within the evaluation.

Efficiency

Till model 2, Knip used ts-morph to calculate the dependency graph (and rather more). This labored nice initially as a result of it abstracted away the TypeScript again finish.

However to assist monorepos and compilers whereas sustaining good efficiency, I noticed I needed to work with the TypeScript again finish immediately. This required quite a lot of effort, but it surely does present much more flexibility, in addition to alternatives for extra optimizations. For instance, Knip can traverse the summary syntax tree (AST) of any file solely as soon as to search out every part it wants.

Configuration Hints

When Knip experiences a false optimistic, you may configure it to disregard that dependency. Then, when Knip not experiences the false optimistic, it can report that the configuration may be up to date, and you may take away the ignored gadgets.

Reporters

Knip comes with a default reporter and has just a few further reporters. There’s a compact reporter, a JSON reporter, and one which makes use of the CODEOWNERS file to point out the code proprietor(s) with every reported situation.

Knip additionally means that you can outline a customized reporter. Knip will name your operate with the outcomes of the evaluation. You may then do something with it, like writing the outcomes to a file or sending it to a service to trace progress over time.

What’s Subsequent For Knip?

Naturally, I’m not accomplished engaged on Knip. These are just a few of the issues I keep in mind.

Extra Plugins = Much less Configuration

My hope with Knip is that as increasingly individuals begin to use Knip, they are going to report false positives: one thing is reported as unused however is in use.

A false optimistic often has one of many following three causes:

A framework or device is used that Knip doesn’t but have a plugin for,
The configuration may want enchancment; as an example, add an entry file that Knip didn’t find out about or ignore one thing with a hard-to-find reference, or
Knip has a bug.

As Knip turns into higher with bug fixes and plugins, extra initiatives profit as a result of they want much less configuration. Upkeep will turn out to be extra fulfilling and simpler for everybody!

When you’re utilizing Knip and having fun with it, don’t let false positives scare you away, however report them as a substitute. Please present a reproducible check case, and I’m positive we are able to work it out. Moreover, I’ve written a whole information detailing tips on how to write a brand new plugin for Knip.

Auto-Repair

Very similar to ESLint, Knip can have a –fix choice to routinely repair all kinds of points. The concept is that this will routinely handle issues comparable to:

Take away the export key phrase for unused exports,
Uninstall unused dependencies and set up unlisted dependencies, and
Delete unused recordsdata.

Given sufficient curiosity from the group, I’m excited to start out constructing this function!

Integrations

Integrations comparable to a VS Code plugin or a GitHub Motion sound like cool alternatives. I’m glad to collaborate and see the place we are able to take it.

Demo Knip

I feel the easiest way to grasp Knip is to get your fingers on it. So, I’ve created a CodeSandbox template you can fork and spin up Knip in a brand new terminal with npm run knip.

Open Demo

Conclusion

Knip goals that will help you keep your JavaScript or TypeScript repositories, and I’m very glad plenty of initiatives are already lower by Knip each day.

There’s plenty of room for enchancment, bugs to repair, documentation to enhance, and plugins so as to add! Your concepts and contributions are completely welcome — and inspired — over at github.com/webpro/knip.