Compiling Typescript upon saving in Sublime Text 3

Question

Compiling Typescript upon saving in Sublime Text 3

Seeking a solution: How can I get Sublime Text 3 to automatically compile Typescript code when I save it? Having to switch between the terminal and Sublime is getting tedious. Appreciate any advice, thank you!

typescript sublimetext3 auto-compile

Answer 1

Answer №1

Unsure how to save it on command, but you can achieve it by pressing ctrl+b. To make this method functional:

Head to Tools->Build System->New Build System

Copy and paste the code below:

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

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

Save it as "myTypeScript.sublime-build"
Go to Tools->Build System and select the created build system "myTypeScript.sublime-build"
To compile, simply press ctrl+b

You can find further explanation and guidance here

Answer 2

Unsure how to save it on command, but you can achieve it by pressing ctrl+b. To make this method functional:

Head to Tools->Build System->New Build System

Copy and paste the code below:

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

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

Save it as "myTypeScript.sublime-build"
Go to Tools->Build System and select the created build system "myTypeScript.sublime-build"
To compile, simply press ctrl+b

You can find further explanation and guidance here

Answer 3

Answer №2

To compile your .TS files, open a terminal window in the folder where they are located and run 'tsc -w' to monitor changes and automatically compile them into .js files. Make sure you have the latest version of TypeScript installed for Node.js. Keep the terminal window open until you're done working. There's no need for any "compile on save" feature as it's not always reliable. Additionally, the TypeScript package in Sublime Text 3 is outdated.

Answer 4

To compile your .TS files, open a terminal window in the folder where they are located and run 'tsc -w' to monitor changes and automatically compile them into .js files. Make sure you have the latest version of TypeScript installed for Node.js. Keep the terminal window open until you're done working. There's no need for any "compile on save" feature as it's not always reliable. Additionally, the TypeScript package in Sublime Text 3 is outdated.

Answer 5

Answer №3

Appreciate the help! Initially, I thought the solution was only for a single file. However, realizing I had multiple scripts in the folder, I sought out an alternative on the internet. Just in case someone else encounters this issue:

Begin by creating a new file within the directory where all scripts are stored (in my scenario, it's /js) and name it tsconfig.json

Insert the following code into the file:

{
"compilerOptions": {
    "emitDecoratorMetadata": false,
    "module": "commonjs",
    "target": "ES5"
},
"files":["your_script_0.ts", "your_script_1.ts"],
"exclude": [
    "node_modules"
]
}

To proceed, navigate to the source folder in the terminal (in my situation, it's /js) and utilize these commands:
- for one-time compilation: tsc -p .
- for compiling upon saving changes: tsc -w

Feel free to point out any mistakes or improvements regarding the command usage. Nonetheless, this approach has proven effective for me.

Answer 6

Appreciate the help! Initially, I thought the solution was only for a single file. However, realizing I had multiple scripts in the folder, I sought out an alternative on the internet. Just in case someone else encounters this issue:

Begin by creating a new file within the directory where all scripts are stored (in my scenario, it's /js) and name it tsconfig.json

Insert the following code into the file:

{
"compilerOptions": {
    "emitDecoratorMetadata": false,
    "module": "commonjs",
    "target": "ES5"
},
"files":["your_script_0.ts", "your_script_1.ts"],
"exclude": [
    "node_modules"
]
}

To proceed, navigate to the source folder in the terminal (in my situation, it's /js) and utilize these commands:
- for one-time compilation: tsc -p .
- for compiling upon saving changes: tsc -w

Feel free to point out any mistakes or improvements regarding the command usage. Nonetheless, this approach has proven effective for me.

Answer 7

Answer №4

Attention all sublime text enthusiasts!

First, get the package controller from this link.
Next, launch sublime text and hit ctrl+shift+p, then type "install package" and hit enter.
Type in Sublimeonsavebuild and press enter.

Navigate to

preferences > package settings > Sublimeonsavebuild > setting - user

, paste in the code provided below, and save.

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

Go to
```
tools > build system > new build system
```
, paste in the following code, save it as "Typescript", and select this build option.

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

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

You're all set! Your .ts file will now automatically compile into a .js file every time you save it.
Enjoy the seamless process!

Answer 8

Attention all sublime text enthusiasts!

First, get the package controller from this link.
Next, launch sublime text and hit ctrl+shift+p, then type "install package" and hit enter.
Type in Sublimeonsavebuild and press enter.

Navigate to

preferences > package settings > Sublimeonsavebuild > setting - user

, paste in the code provided below, and save.

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

Go to
```
tools > build system > new build system
```
, paste in the following code, save it as "Typescript", and select this build option.

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

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

You're all set! Your .ts file will now automatically compile into a .js file every time you save it.
Enjoy the seamless process!

Compiling Typescript upon saving in Sublime Text 3

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can we create an intersection type of Records by pairing keys with tuples or unions of values in a one-to-one correspondence?

Tips for sorting queries within a collection view in Mongoose:

Navigate objects by typing

`Unable to upload spreadsheet file in xlsx format`

Setting the [required] attribute dynamically on mat-select in Angular 6

billboard.js: The 'axis.x.type' property is conflicting with different data types in this context

Tips for making the onChange event of the AntDesign Cascader component functional

Caution: The file path in node_modules/ngx-translate-multi-http-loader/dist/multi-http-loader.js relies on the 'deepmerge' dependency

Encountering the following error message: "E11000 duplicate key error collection"

Declare the variable as a number, yet unexpectedly receive a NaN in the output

Retrieve identification details from a button within an ion-item located in an ion-list

After updating next.config, the NextJS + NextAuth middleware doesn't seem to be triggered

What is the best way to pass a specific property from a parent component to a child component in Angular when a button is clicked?

Connecting an Angular application to a URL hosted on localhost

Production environment sees req.cookies NEXTJS Middleware as undefined

Error: Failed to execute close function in inappbrowser for Ionic application

tslint issues detected within a line of code in a function

The expansion feature of PrimeNG Turbotable

When using veevalidate to reset a form in TypeScript, the form is not fully reset as

Develop a custom cell editor for ag-Grid and insert it into a designated location within