Wlxyzxyz's Blog

configuration of webstorm for typescript

Create Project

Create a new node project.

webstorm1

Here is reference of project structure. https://github.com/jan-molak/debugging-typescript-with-webstorm

add package.json, tsconfig.json, and src folder.

tsconfig.json

{
    "compilerOptions": {
        "declaration": true,
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "outDir": "./dist",
        "preserveConstEnums": true,
        "removeComments": false,
        "sourceMap": true,
        "inlineSources": true,
        "typeRoots" : ["./node_modules/@types"],
        "lib": [
            "es6"
        ]
    },
    "include": [
        "src/**/*",
        "test/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}



package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/node/index.js",
  "scripts": {
    "clean": "rimraf ./dist",
    "build": "tsc",
    "start": "node ./dist/index",
    "test": "mocha ./test/**/*.ts"
  },
  "devDependencies": {
    "@types/chai": "^4.2.21",
    "@types/core-js": "^2.5.5",
    "@types/mocha": "^9.0.0",
    "@types/node": "^16.7.8",
    "chai": "^4.3.4",
    "mocha": "^9.1.1",
    "rimraf": "^3.0.2",
    "source-map-support": "^0.5.19",
    "ts-node": "^10.2.1",
    "typescript": "^4.4.2"
  },
  "engines": {
    "node": ">=4.0.0"
  }
}



install typescript

npm install @types/node --save-dev

install packages

npm install

Configuration

build and run configuration

webstorm2-1

webstorm2-2

webstorm language

webstorm3

file watch

webstorm4

--sourcemap --target "ES6"

Run Project

Now you can run and debug the project.

webstorm5


if webstorm always generates js files, you can disable "Recompile on changes"

https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000098564-Disable-Auto-Transpiling-TS-to-JS