CODEWITHSUNDEEP
typescriptwebstorm
metasync
metasync

Reputation: 348

WebStorm compiling TypeScript file in-place instead of generating into target folder

We are using WebStorm with TypeScript project. We have configured project correctly using tsconfig.json as everything works correctly from command line.

However, when opened the project in WebStorm, it compiles the ts files in place (it generates js file in same folder as corresponding ts file) where as tsconfig says it should be in dist dir.

For example, in below screenshot, evaluator.js is in same folder as evaluator.ts file. Any idea how to configure WebStorm such that it doesn't generate js files in place?

enter image description here

Here are Typescript preferences.

enter image description here

Here is the tsconfig.json file

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "charset": "utf-8",
    "declaration": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "pretty": false,
    "rootDir": "src",
    "sourceMap": true,
    "strict": true,
    "stripInternal": true,
    "target": "es2016",
    "typeRoots": ["node_modules/@types"],
    "types": ["node", "jest"],
    "lib": [
      "es2019"
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.js", "src/index.ts"],
  "exclude": ["node_modules"]
}

Upvotes: 2

Views: 1558

Answers (3)

Graunephar
Graunephar

Reputation: 162

I had the same issue. However for me the problem was that when I ran my unit tests the newest version of the code was not reflected in the transpiled files. Could not find a way to fix it from webstorms settings. So in the end I just ended up adding a yarn target to remove all of the generated files in source. I can then run this before I run the tests to make sure that I get a freshly transpiled version. The script in package.json looks like this:

"scripts": {
    "clear-cache": "find src -type f \\( -name \"*.js\" -o -name \"*.d.ts.map\" -o -name \"*.d.ts\" \\) -exec rm {} \\;",
  },

Doesn't really solved the original problem, but it was as close as I was able to get.

Upvotes: 0

Józef Podlecki
Józef Podlecki

Reputation: 11305

Apparently Webstorm transpiles typescript files to javascript independently

Make sure that 'Enable TypeScript compiler' is disabled in Preferences | Languages & Frameworks | TypeScript, and that you don't have TypeScript file watcher set up in Preferences | Tools | File Watchers

Upvotes: 3

Joergi
Joergi

Reputation: 1593

you need something like this in your package.json 

...
  "main": "app/src/index.js",
  "scripts": {
    "copyjson": "copyfiles 'src/**/*.json' app",
    "copyhbs": "copyfiles 'src/**/*.hbs' app",
    "copyhtml": "copyfiles 'src/**/*.html' app",
    "prebuild": "tslint -c tslint.json -p tsconfig.json --fix",
    "build": "tsc && npm run copyjson && npm run copyhbs && npm run copyhtml",
    "prestart": "npm run build",
    "start": "node app/src/index"
  }
...

then do a 

npm install
npm run build
npm run start

Upvotes: -1

Related Questions