DEV Community

Othniel
Othniel

Posted on

Typescript Concurrent Compilation and Execution on Sublime Text 3

#typescript #sublimetext3 #productivity #webdev

I recently started learning typescript, and on sublime text there is this awesome typescript package to help with errors, suggestions and also to compile (or is it transpile) my .ts files to .js but that was it, in other to run the javascript file you had to run its own build command. But as we went through the tutorials we came came to using 2 packages nodemon & concurrently to watch out typescript project and compile the files then run the javascript files for us, which is great right, but I liked how I could do all of this on sublime without needing the npm cli so I did some research and discovered I could do this on sublime. So lets get to it then.

Installations

Here we'll install a couple of things that we'll be needing to pull this of.

  1. typescript - npm install -g typescriptsource
  2. Sublime Text 3 (of course)
  3. Typescript on sublime; further instructions for installation
  4. Nodemon npm i nodemon, and
  5. Concurrently npm i concurrently

So once we have all on this installed in out local machine we can go ahead and set up our concurrent build setup.

Step 1

Create the directory for you project. You can do this anywhere on your local machine, i'll be using my root directory.

Step 2

We create two directories in our project folder /src and /build
*The /src would house our .ts files so that from there the build tool will find them all and
*The /build would house our build .js files

Step 3

We do a npm init -y to initialize our project.
second-draft

Step 4

We then create our tsconfig.json file using the tsc --init command, inside this config file we setup our configs for where the build tool will get our .ts files and where it'll save the .js files.
find this snippet in your tsconfig.json file

...
    "outDir": "./",
    "rootDir": "./", 
...
Enter fullscreen mode Exit fullscreen mode

and edit it thus

...
    "outDir": "./build",
    "rootDir": "./src", 
...
Enter fullscreen mode Exit fullscreen mode

make sure they both correspond to the ./build and ./src file created earlier.
first-draft

Step 5

We install nodemon and concurrently using this command: npm i nodemon concurrently

Step 6

We Edit the scripts in the package.json file to make our project use nodemon and concurrently by adding this:

...
"scripts": {
    "start:build": "tsc -w",
    "start:run": "nodemon build/index.js",
    "start": "concurrently npm:start:*"
  },
...
Enter fullscreen mode Exit fullscreen mode

The "start:build": "tsc -w" is for when we want to run the tsc in watch mode, then the "start:run": "nodemon build/index.js" is to use nodemon to run our index.js file, and then finally "start": "concurrently npm:start:*" will run every script with "start:*" the * will make sure the start:build and start:run both run concurrently i.e. build then build continuously as you make changes to the files.
third-draft

Step 6

Create a test.ts file to test the build on your npm command.
fourth-draft

Step 7

The main purpose of this article, actual implementation on sublime text 3.
To do this, we'll have to create a new build system in our sublime text. Go to Tool>Build System>New Build System then type this in there.

{
    "shell_cmd": "npm start",
    "windows": {
        "cmd": ["npm start"]
    }
}
Enter fullscreen mode Exit fullscreen mode

Save it with any name say Custom TS Build Done.
fifth-draft

Step 8

Lastly, we test it by selecting our custom build Tool>Build System>Custom TS Build by going to and using ctrl+b to build it then we see the output on the console.
sixth-draft

With that we come to the conclusion of this write up, if you have any questions or problems with it please hit the reply button and i'll help out any way i can.

Resources

*Stackoverflow thread that showed me how to create a new build on sublime link

Top comments (0)