NextJS Typescript - 设置 tslint 配置以在有未使用的导入/声明时强制出错

Question

can anyone tell me how to force error when I have an unused import/declaration written in next typescript?

the use case is: example I have import { Accordion, AccordionButton } from '@chakra-ui/react'; the Accordion component is used , but for AccordionButton is unused , I want when I save the file I got an error compile cause of AccordionButton is not used.

Note: I already add: "noUnusedLocals": true, "noUnusedParameters": true

in tsconfig.json but still not resolved my problem

Answer 1

It can very much depend on the editor you use. In VScode I have it set up to grey out unused imports so you can easily notice and remove them.

In your VScode config:

{
  "javascript.validate.enable": true,
  "editor.showUnused": true
}

As far as getting an error, there is an eslint plugin which can show a linting error for unused imports here:

https://www.npmjs.com/package/eslint-plugin-unused-imports