Typescript compile on save in sublime 3

Question

Is there any way to force Sublime text 3 to compile Typescript code on save? It's a bit annoying switching back and forth between terminal and Sublime. Thanks!

Answer 1

I don't know how to do it on save but you can do it by clicking ctrl+b. In order to make it work do this:

1. go to Tools->Build System->New Build System

2. copy and paste the following:

   {
       "cmd": ["tsc","$file"],
       "file_regex": "(.*\\.ts?)\\s\\(([0-9]+)\\,([0-9]+)\\)\\:\\s(...*?)$",
       "selector": "source.ts",
   
       "windows": {
           "cmd": ["tsc.cmd", "$file"]
       }
   }
   

3. save it as "myTypeScript.sublime-build"

4. Tools->Build System and choose the build system that you just created "myTypeScript.sublime-build"

5. every time you want to compile just click on ctrl+b

You can see seome explanation about it and more here

Answer 2

Open a terminal window to the folder that contains your .TS files. Execute 'tsc -w' and let it monitor changes to any of the .ts files and it will compile them to .js . You can use the latest command line typescript for nodejs (make sure to install nodejs and the typescript for it). Leave the terminal window open until you wanna quit. No need any compile on save feature. That option is rarely honored anyway. And the typescript package within sublime text 3 is quite out of date.

Answer 3

Thanks! This works for single file. But I forgot to mention that I have several scripts in the folder. Fortunately, found another solution on the web. In case anyone else will need it:

1. create a new file in the same folder where all scripts are located (/js in my case) and name it tsconfig.json
2. Paste this code into the file:
   { "compilerOptions": { "emitDecoratorMetadata": false, "module": "commonjs", "target": "ES5" }, "files":["your_script_0.ts", "your_script_1.ts"], "exclude": [ "node_modules" ] }
   

3. in terminal navigate to the source folder (/js in my case) and use the following commands:

   • for one-time compilation: tsc -p .
   • for compilation on save: tsc -w

Please, correct me if I'm wrong or not quite right about the use of the commands. But at least the solution works for me.

Answer 4

For sublime text users

1. install package controller from this site.
2. open sublime text and press ctrl+shift+p and write install package and press enter.
3. write Sublimeonsavebuild and press enter.
4. go to preferences > package settings > Sublimeonsavebuild > setting - user and paste below code and save that.

{
    "filename_filter": "(/|\\\\|^)(?!_)(\\w+)\\.(ts|sass|less|scss)$",
    "build_on_save": 1
}

5. go to tools > build system > new build system and paste below code, save that as "Typescript" and select this build.

{
    "cmd": ["tsc","$file"],
    "file_regex": "(.*\\.ts?)\\s\\(([0-9]+)\\,([0-9]+)\\)\\:\\s(...*?)$",
    "selector": "source.ts",

    "windows": {
        "cmd": ["tsc.cmd", "$file"]
    }
}

6. Now whenever you save the .ts file its automatically compile to .js file.
7. Enjoy!!