TTC
Theo's Typesafe Cult•3mo ago
Brando

Typescript in VSCode

Hey folks I work on a T3 chat app in VSCode and I noticed VSCode seems to have gotten rid of the typescript extension so I think it is just out of the box supported but I do not see typescript errors showing up a lot of the time and when I run pnpm run build I get a bunch of basic type errors that should have been flagged in my editor. Anyone know how to configure Typescript in VSCode to be better? This is happening for very basic type logic that should be flagged
5 Replies
Isaac Dobbins
Isaac Dobbins•3mo ago
Do you have "strict": true set in your tsconfig.json? And if you open a file that you know has issues do you see anything in the 'Problems' tab of the bottom drawer of vscode (the thing the terminal pops up in)? Sometimes if I change a settings in tsconfig.json i need to close and open files to get the changes to appear. Maybe there is a way to get it to reload without doing that but I don't know what it is.
Brando
BrandoOP•3mo ago
Yes 
{
  "compilerOptions": {
    /* Base Options: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "verbatimModuleSyntax": true,

    /* Strictness */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "checkJs": true,

    /* Bundled projects */
    "lib": ["dom", "dom.iterable", "ES2022"],
    "noEmit": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "plugins": [{ "name": "next" }],
    "incremental": true,

    /* Path Aliases */
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}
{
  "compilerOptions": {
    /* Base Options: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "verbatimModuleSyntax": true,

    /* Strictness */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "checkJs": true,

    /* Bundled projects */
    "lib": ["dom", "dom.iterable", "ES2022"],
    "noEmit": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "plugins": [{ "name": "next" }],
    "incremental": true,

    /* Path Aliases */
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}
I also validated that typescript is enabled in vscode.
Brando
BrandoOP•3mo ago
No description
Brando
BrandoOP•3mo ago
Exihibit A: Line 36/37 should be red underlined because it should only have a object with property { userId: userId } passed to it. Compiler throws errors but no errorin vscode seems like a very basic check to me 
 node -v
v20.17.0
❯ npm -v
11.4.1
❯ tsc --version
Version 5.8.3
 node -v
v20.17.0
❯ npm -v
11.4.1
❯ tsc --version
Version 5.8.3
I am on pretty recent versions of everything as well I have noticed that the project is stuck in Partial Mode which may be why I am not sure why this is though WAIT I figured it out typescript.tsserver.useSyntaxServer was set to always when it should be set to auto
Isaac Dobbins
Isaac Dobbins•3mo ago
Nice! Glad you figured it out.

Did you find this page helpful?