Typescript linting?

Tackleberry · 2024-12-03T16:21:01.574Z

I have the official nuxt eslint module in my project, no further custom configuration. However, I get no typescript errors from my linter about actual typescript errors, just stuff like "don't use any", but no "hey this function should have a number but you gave a string". Is mismatching function indexes or other "not adhering to interface" not something the linter should pick up on? Does it need additional configuration? Or do I need separate tooling for this? (and why wouldn't it be part of the baseline batteries-included approach from nuxt 🤔 )

K

kapa.ai•12/3/24, 4:21 PM

Hi @Tackleberry. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•12/3/24, 4:21 PM

----------------------
To address your question about TypeScript linting in Nuxt, it's important to understand that ESLint and TypeScript type checking are two separate processes. The Nuxt ESLint module primarily focuses on code style and some basic TypeScript rules, but it doesn't perform full type checking by default.

For comprehensive TypeScript error detection, including type mismatches and interface adherence, you need to enable TypeScript type checking. Nuxt provides a way to do this:

First, ensure you have
```
vue-tsc
```
vue-tsc
```
vue-tsc
```
vue-tsc
and
```
typescript
```
typescript
```
typescript
```
typescript
installed as development dependencies:

npm install --save-dev vue-tsc typescript

npm install --save-dev vue-tsc typescript

npm install --save-dev vue-tsc typescript

npm install --save-dev vue-tsc typescript

Then, you can enable type checking by adding the following to your
```
nuxt.config.ts
```
```
nuxt.config.ts
```
file:

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

Nuxt TypeScript docs (https://nuxt.com/docs/guide/concepts/typescript) explain that this option enables build-time type checking.

Alternatively, you can run type checking separately using the

nuxi typecheck

nuxi typecheck

nuxi typecheck

nuxi typecheck command:

npx nuxi typecheck

npx nuxi typecheck

npx nuxi typecheck

npx nuxi typecheck

Nuxt TypeScript docs (https://nuxt.com/docs/guide/concepts/typescript) provide more details on type checking options.

As for why this isn't part of the baseline "batteries-included" approach, it's likely due to performance considerations. Type checking can be resource-intensive, especially for larger projects, which is why it's not enabled by default in the development process.

To summarize:

The ESLint module you're using is primarily for code style and basic TypeScript rules.
For full TypeScript type checking, you need to enable it separately in your Nuxt configuration or use the
```
nuxi typecheck
```
nuxi typecheck
```
nuxi typecheck
```
nuxi typecheck
command.
This separation allows for better performance in development while still providing the option for comprehensive type checking when needed.

K

kapa.ai•12/3/24, 4:21 PM

If you want to integrate type checking more closely with your development process, you might consider setting up your IDE to perform TypeScript checks, or use a pre-commit hook to run

nuxi typecheck

nuxi typecheck

nuxi typecheck

nuxi typecheck before committing code changes.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•12/3/24, 4:21 PM

@615642942777851938 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

T

TackleberryOP•12/3/24, 4:26 PM

@kapa.ai after installing the packages, when running the

npx nuxi typecheck

npx nuxi typecheck

npx nuxi typecheck

npx nuxi typecheck command, I get the following error:

/Users/<snip>/regio-jobs/node_modules/vue-tsc/index.js:34
            throw err;
            ^
Search string not found: "/supportedTSExtensions = .*(?=;)/"
(Use `node --trace-uncaught ...` to show where the exception was thrown)

Node.js v22.8.0

/Users/<snip>/regio-jobs/node_modules/vue-tsc/index.js:34
            throw err;
            ^
Search string not found: "/supportedTSExtensions = .*(?=;)/"
(Use `node --trace-uncaught ...` to show where the exception was thrown)

Node.js v22.8.0

/Users/<snip>/regio-jobs/node_modules/vue-tsc/index.js:34
            throw err;
            ^
Search string not found: "/supportedTSExtensions = .*(?=;)/"
(Use `node --trace-uncaught ...` to show where the exception was thrown)

Node.js v22.8.0

/Users/<snip>/regio-jobs/node_modules/vue-tsc/index.js:34
            throw err;
            ^
Search string not found: "/supportedTSExtensions = .*(?=;)/"
(Use `node --trace-uncaught ...` to show where the exception was thrown)

Node.js v22.8.0

K

kapa.ai•12/3/24, 4:26 PM

Let me check the knowledge base for you again. One moment! :books:

K

kapa.ai•12/3/24, 4:27 PM

----------------------
Based on the error you're encountering, it appears that you're facing an issue with

vue-tsc

vue-tsc

vue-tsc

vue-tsc, which is the TypeScript compiler for Vue. This error suggests there might be a compatibility problem between the versions of

vue-tsc

vue-tsc

vue-tsc

vue-tsc and other dependencies in your project.

To resolve this issue, you can try the following steps:

First, check the version of
```
vue-tsc
```
vue-tsc
```
vue-tsc
```
vue-tsc
you have installed. Recent versions of Nuxt are compatible with
```
vue-tsc
```
vue-tsc
```
vue-tsc
```
vue-tsc
version 2.x. You can update
```
vue-tsc
```
vue-tsc
```
vue-tsc
```
vue-tsc
to the latest 2.x version by running:

   npm install --save-dev vue-tsc@^2.0.0

   npm install --save-dev vue-tsc@^2.0.0

   npm install --save-dev vue-tsc@^2.0.0

   npm install --save-dev vue-tsc@^2.0.0

Github Issue Comment (https://github.com/nuxt/nuxt/issues/22421) mentions that downgrading to version 2.0.7 solved a similar issue for some users.

If updating doesn't solve the problem, you can try clearing your node_modules and reinstalling dependencies:

   rm -rf node_modules
   npm install

   rm -rf node_modules
   npm install

   rm -rf node_modules
   npm install

   rm -rf node_modules
   npm install

If you're still encountering issues, you might need to update other related packages. Ensure that your
```
typescript
```
typescript
```
typescript
```
typescript
package is also up to date:

   npm install --save-dev typescript@latest

   npm install --save-dev typescript@latest

   npm install --save-dev typescript@latest

   npm install --save-dev typescript@latest

If the problem persists, you can try using the
```
--legacy-peer-deps
```
--legacy-peer-deps
```
--legacy-peer-deps
```
--legacy-peer-deps
flag when installing packages, as suggested in this Stack Overflow answer (https://stackoverflow.com/questions/78273467):

   npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

   npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

   npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

   npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

This can help resolve conflicts between package versions.

As a last resort, you might need to check your
```
tsconfig.json
```
```
tsconfig.json
```
file for any custom configurations that could be causing conflicts. Ensure it extends from the Nuxt-generated config:

   {
     "extends": "./.nuxt/tsconfig.json"
   }

   {
     "extends": "./.nuxt/tsconfig.json"
   }

   {
     "extends": "./.nuxt/tsconfig.json"
   }

   {
     "extends": "./.nuxt/tsconfig.json"
   }

Nuxt tsconfig.json docs (https://nuxt.com/docs/guide/directory-structure/tsconfig) provide more information on this.

K

kapa.ai•12/3/24, 4:27 PM

If none of these steps resolve the issue, it might be worth opening an issue on the Nuxt GitHub repository with details about your project setup, as this could be a more specific compatibility problem that needs attention from the Nuxt team.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•12/3/24, 4:27 PM

@615642942777851938 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

T

TackleberryOP•12/3/24, 4:30 PM

@kapa.ai Downgrading to 2.0.7 solved the issue. However, the npx nuxi typecheck command always exists without any output, even when I introduce type errors on purpose. Why would that happen? What should happen?

K

kapa.ai•12/3/24, 4:30 PM

Let me check the knowledge base for you again. One moment! :books:

K

kapa.ai•12/3/24, 4:31 PM

----------------------
I'm glad to hear that downgrading to vue-tsc 2.0.7 solved the initial issue. However, the behavior you're describing with

npx nuxi typecheck

npx nuxi typecheck

npx nuxi typecheck

npx nuxi typecheck exiting without any output, even with intentional type errors, is not the expected behavior. Let's explore what should happen and potential reasons for this issue.

What should happen:
When you run

npx nuxi typecheck

npx nuxi typecheck

npx nuxi typecheck

npx nuxi typecheck, it should perform a type check of your entire Nuxt project and report any type errors it finds. If there are no errors, it should exit silently. If there are errors, it should display them in the console.

According to the Nuxt typecheck command documentation (https://nuxt.com/docs/api/commands/typecheck), the command runs

vue-tsc

vue-tsc

vue-tsc

vue-tsc to check types throughout your app. It should detect and report type errors.

Possible reasons for the issue:

Configuration problem: The typecheck command might not be properly configured in your
```
nuxt.config.ts
```
```
nuxt.config.ts
```
file. Ensure you have the following in your configuration:

   export default defineNuxtConfig({
     typescript: {
       typeCheck: true
     }
   })

   export default defineNuxtConfig({
     typescript: {
       typeCheck: true
     }
   })

   export default defineNuxtConfig({
     typescript: {
       typeCheck: true
     }
   })

   export default defineNuxtConfig({
     typescript: {
       typeCheck: true
     }
   })

Incorrect path: The command might not be finding your source files. Make sure you're running the command from the root of your Nuxt project.
tsconfig issue: There might be a problem with your
```
tsconfig.json
```
```
tsconfig.json
```
file. Ensure it's properly set up and extends the Nuxt-generated config:

   {
     "extends": "./.nuxt/tsconfig.json"
   }

   {
     "extends": "./.nuxt/tsconfig.json"
   }

   {
     "extends": "./.nuxt/tsconfig.json"
   }

   {
     "extends": "./.nuxt/tsconfig.json"
   }

Caching: Nuxt might be caching the results of previous type checks. Try clearing the Nuxt cache:

   npx nuxi cleanup

   npx nuxi cleanup

   npx nuxi cleanup

   npx nuxi cleanup

Vue-tsc version mismatch: While 2.0.7 solved your initial error, it might not be fully compatible with your Nuxt version for type checking. You could try a slightly newer version, like 2.0.8 or 2.1.0.

To troubleshoot this issue:

K

kapa.ai•12/3/24, 4:31 PM

Try running
```
vue-tsc
```
vue-tsc
```
vue-tsc
```
vue-tsc
directly to see if it produces any output:

   npx vue-tsc --noEmit

   npx vue-tsc --noEmit

   npx vue-tsc --noEmit

   npx vue-tsc --noEmit

Check the Nuxt-generated TypeScript configuration in
```
.nuxt/tsconfig.json
```
.nuxt/tsconfig.json
```
.nuxt/tsconfig.json
```
.nuxt/tsconfig.json
to ensure it includes all your source files.
If none of the above helps, you might want to consider opening an issue on the Nuxt GitHub repository (https://github.com/nuxt/nuxt/issues) with details about your setup, as this behavior is not expected and might be a bug in the Nuxt typecheck implementation.

Remember, type checking is crucial for catching errors early in development, so it's important to get this working correctly in your Nuxt project.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•12/3/24, 4:31 PM

@615642942777851938 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

C

Cue•12/3/24, 4:58 PM

What’s the typescript version?

Typescript linting?

Similar Threads

Similar Threads

Similar Threads