Detect unused exports

[karlhorky]

To detect and error on variables and functions that have been exported but not imported somewhere (this is "dead code")

For our TypeScript project, I use ts-unused-exports, but for plain JavaScript, you can use a similar no-unused-export package

Source: https://blog.logrocket.com/how-to-use-static-code-analysis-to-write-quality-javascript-typescript/#:~:text=for%20our%20typescript%20project%2C%20i%20use%20ts-unused-exports%2C%20but%20for%20plain%20javascript%2C%20you%20can%20use%20a%20similar%20no-unused-export%20package

Full list of options:

• knip
• ts-unused-exports
• no-unused-export
• ts-prune
• unimported
• eslint-plugin-import/no-unused-modules (with unusedExports option)
• maybe in the future: @typescript-eslint/eslint-plugin

cc @Josehower

[karlhorky]

Just tried quickly running ts-unused-exports on a mostly JS project (this repo), and it worked:

➜  ts-unused-exports-example git:(main) npx ts-unused-exports tsconfig.json
11 modules with unused exports
/Users/k/p/ts-unused-exports-example/pages/index.tsx: default
/Users/k/p/ts-unused-exports-example/pages/thankyou.tsx: default
/Users/k/p/ts-unused-exports-example/utils/types.tsx: Data
/Users/k/p/ts-unused-exports-example/pages/_app.js: default
/Users/k/p/ts-unused-exports-example/pages/cart.js: default, getServerSideProps
/Users/k/p/ts-unused-exports-example/pages/testcheck.js: default, getServerSideProps
/Users/k/p/ts-unused-exports-example/pages/api/hello.js: default
/Users/k/p/ts-unused-exports-example/pages/products/[product].js: default, getServerSideProps
/Users/k/p/ts-unused-exports-example/pages/products/item/[item].js: default, getServerSideProps
/Users/k/p/ts-unused-exports-example/utils/cookies.js: deleteAll
/Users/k/p/ts-unused-exports-example/utils/database.js: getProducts, getProductById, getProductsByType

One thing that we need to do is to filter out all of the errors on default exports within the pages folder (because Next.js consumes these exports)

[karlhorky]

Seems like ts-prune does a better job (and in trying it on a larger project, also has fewer false positives), is zero-config, and has nicer defaults (shows line numbers):

➜  ts-unused-exports-example git:(main) npx ts-prune
ley.config.js:8 - ssl
migrations/1623089460-create-products-table.js:1 - up (used in module)
migrations/1623089460-create-products-table.js:17 - down (used in module)
migrations/1623091201-insert-into-products-table.js:64 - up (used in module)
migrations/1623091201-insert-into-products-table.js:80 - down (used in module)
pages/_app.js:10 - default
pages/cart.js:54 - default
pages/cart.js:110 - getServerSideProps
pages/index.tsx:69 - default
pages/testcheck.js:55 - default
pages/testcheck.js:402 - getServerSideProps
pages/thankyou.tsx:23 - default
utils/cookies.js:94 - deleteAll
utils/types.tsx:1 - Data
pages/api/hello.js:3 - default
pages/products/[product].js:58 - default
pages/products/[product].js:97 - getServerSideProps
pages/products/item/[item].js:12 - default
pages/products/item/[item].js:140 - getServerSideProps

But it doesn't seem to have as many options, some of which we may need.

[karlhorky]

eslint-plugin-canonical has a rule called no-unused-exports for this, which uses ts-unused-exports internally.