TTC
Theo's Typesafe Cult•2y ago
lucca

Why am I getting these TypeScript ESLint errors even though VSCode doesn't complain?

Here is my repo. It was bootstrapped with create-t3-app: https://github.com/ChromeUniverse/luccanotes And here is the full output of npm run lint: 
> next lint

info  - Loaded env from /home/lucca/Coding/Projects/luccanotes/.env

./src/components/Button.tsx
1:1  Warning: Import "VariantProps" is only used as types.  @typescript-eslint/consistent-type-imports
6:3  Warning: 'IconProps' is defined but never used.  @typescript-eslint/no-unused-vars
11:1  Warning: Imports "TooltipAlignment" and "TooltipPosition" are only used as types.  @typescript-eslint/consistent-type-imports

./src/components/Navbar.tsx
24:3  Warning: 'noteTitle' is defined but never used.  @typescript-eslint/no-unused-vars

./src/components/NoteCard.tsx
1:10  Warning: 'ArrowSquareOut' is defined but never used.  @typescript-eslint/no-unused-vars
1:26  Warning: 'DotsThreeOutlineVertical' is defined but never used.  @typescript-eslint/no-unused-vars
16:59  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
29:59  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
36:59  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
37:59  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
48:3  Warning: 'lastUpdated' is defined but never used.  @typescript-eslint/no-unused-vars

./src/components/SearchBar.tsx
10:10  Warning: 'useState' is defined but never used.  @typescript-eslint/no-unused-vars
11:1  Warning: All imports in the declaration are only used as types. Use `import type`.  @typescript-eslint/consistent-type-imports
12:8  Warning: 'Button' is defined but never used.  @typescript-eslint/no-unused-vars
130:57  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment

./src/components/TagPill.tsx
1:1  Warning: Import "VariantProps" is only used as types.  @typescript-eslint/consistent-type-imports

./src/components/Tooltip.tsx
1:1  Warning: Import "VariantProps" is only used as types.  @typescript-eslint/consistent-type-imports

./src/pages/index.tsx
1:8  Warning: 'Head' is defined but never used.  @typescript-eslint/no-unused-vars
2:8  Warning: 'Link' is defined but never used.  @typescript-eslint/no-unused-vars
3:10  Warning: 'signIn' is defined but never used.  @typescript-eslint/no-unused-vars
3:18  Warning: 'signOut' is defined but never used.  @typescript-eslint/no-unused-vars
3:27  Warning: 'useSession' is defined but never used.  @typescript-eslint/no-unused-vars
4:10  Warning: 'api' is defined but never used.  @typescript-eslint/no-unused-vars
8:1  Warning: Import "SortField" is only used as types.  @typescript-eslint/consistent-type-imports
11:1  Warning: All imports in the declaration are only used as types. Use `import type`.  @typescript-eslint/consistent-type-imports

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
> next lint

info  - Loaded env from /home/lucca/Coding/Projects/luccanotes/.env

./src/components/Button.tsx
1:1  Warning: Import "VariantProps" is only used as types.  @typescript-eslint/consistent-type-imports
6:3  Warning: 'IconProps' is defined but never used.  @typescript-eslint/no-unused-vars
11:1  Warning: Imports "TooltipAlignment" and "TooltipPosition" are only used as types.  @typescript-eslint/consistent-type-imports

./src/components/Navbar.tsx
24:3  Warning: 'noteTitle' is defined but never used.  @typescript-eslint/no-unused-vars

./src/components/NoteCard.tsx
1:10  Warning: 'ArrowSquareOut' is defined but never used.  @typescript-eslint/no-unused-vars
1:26  Warning: 'DotsThreeOutlineVertical' is defined but never used.  @typescript-eslint/no-unused-vars
16:59  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
29:59  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
36:59  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
37:59  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
48:3  Warning: 'lastUpdated' is defined but never used.  @typescript-eslint/no-unused-vars

./src/components/SearchBar.tsx
10:10  Warning: 'useState' is defined but never used.  @typescript-eslint/no-unused-vars
11:1  Warning: All imports in the declaration are only used as types. Use `import type`.  @typescript-eslint/consistent-type-imports
12:8  Warning: 'Button' is defined but never used.  @typescript-eslint/no-unused-vars
130:57  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment

./src/components/TagPill.tsx
1:1  Warning: Import "VariantProps" is only used as types.  @typescript-eslint/consistent-type-imports

./src/components/Tooltip.tsx
1:1  Warning: Import "VariantProps" is only used as types.  @typescript-eslint/consistent-type-imports

./src/pages/index.tsx
1:8  Warning: 'Head' is defined but never used.  @typescript-eslint/no-unused-vars
2:8  Warning: 'Link' is defined but never used.  @typescript-eslint/no-unused-vars
3:10  Warning: 'signIn' is defined but never used.  @typescript-eslint/no-unused-vars
3:18  Warning: 'signOut' is defined but never used.  @typescript-eslint/no-unused-vars
3:27  Warning: 'useSession' is defined but never used.  @typescript-eslint/no-unused-vars
4:10  Warning: 'api' is defined but never used.  @typescript-eslint/no-unused-vars
8:1  Warning: Import "SortField" is only used as types.  @typescript-eslint/consistent-type-imports
11:1  Warning: All imports in the declaration are only used as types. Use `import type`.  @typescript-eslint/consistent-type-imports

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Why am I getting these errors? VSCode and the Next.js dev server don't seem to be complaining.
GitHub
GitHub - ChromeUniverse/luccanotes: A full-stack note-taking app fo...
A full-stack note-taking app for Markdown lovers ❤️ - GitHub - ChromeUniverse/luccanotes: A full-stack note-taking app for Markdown lovers ❤️
3 Replies
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Michael Schaufelberger
Michael Schaufelberger•2y ago
So, two things: - VS Code probably doesn't complain because you don't have the ESLint extension enabled (See @Cloud 's message), or the extension cannot find the ESLint config file. Make sure to open the repo's root folder in VS Code. - If you look at the rules inside the ESLint config .eslintrc.json (https://github.com/ChromeUniverse/luccanotes/blob/main/.eslintrc.json) you can check which rulesets/plugins are enabled for your project. As you can see @typescript-eslint's recommended-requiring-type-checking is enabled for Typescript files, as well as next/core-web-vitals and @typescript-eslint/recommended . On line 20 you can also see a rule override "@typescript-eslint/consistent-type-imports": "warn" which warns you if you don't add the type keyword to your imports (See @PedeEli 's message). Generally, whenever you have questions about an ESLint rule/error, I recommend googling its definition (https://typescript-eslint.io/rules/consistent-type-imports/). Most rules are well explained, and you can then decide if you want to disable some of them or not. Also, many rules are automatically fixable. You can run the fixing either through the linting CLIs or through your IDE's ESLint extensions.
GitHub
luccanotes/.eslintrc.json at main · ChromeUniverse/luccanotes
A full-stack note-taking app for Markdown lovers ❤️ - luccanotes/.eslintrc.json at main · ChromeUniverse/luccanotes
lucca
luccaOP•2y ago
This was it - never heard of either plugin but they immediately picked up on the .eslintrc.json and prettier.config.cjs and showed me all errors and warnings in VSCode. Also had to rearrange some exported types and change the import statement per @PedeEli's suggestion Thanks for the detailed explanation! I'll check out the ESLint docs
Want results from more Discord servers?
Add your server