Chris Mendez in Angular, IDE, For Developers, Javascript

Typescript Bundle for Textmate

Here's my attempt to offer code highlighting to Textmate users working with Typescript. I'm positive there is a better way to do this so please consider this blog entry my offer to the universe with a hope that someone will provide an better Typescript bundle. In my specific sitation, I simply needed code highlighting but I'm sure there are others who want code completion.

Step 1 - Download Typescript

Download Microsoft's TypeScript-TmLanguage.

download-typescript

Step 2 - Build the Typescript Grammars using NPM

Change into your Typescript directory.

cd ~./TypeScript-TmLanguage-master 

Follow Microsoft's instructions and build the grammar.

npm run build:grammar

build-grammar-typescript

Step 3 - Double Check Your Work

Once the grammar is built, double-check your work.

You should see TypeScript.tmTheme and TypeScript.tmLanguage files.

grammar-built

Step 4 - Open Textmate

Open Textmate and select Bundles > Edit Bundles.

open-textmate

Step 5 - Create new Bundle

With the Bundle Editor Open, create a new bundle by selecting cmd + n.
create-new-bundle

Step 6 - Drag and Drop

With your Textmate Bundle Editor open, double-click these files:

  • TypeScript.tmLanguage
  • TypeScript.tmTheme
  • TypeScript Indent.tmPreferences
  • Comments.tmPreferences

install-typescript-lang

install-typescript-theme

Step 7 - Save!

After saving, here is what my bundle looks like.

bundle-lang

bundle-settings

bundle-themes

Step 8 - Your Done!

We now have code highlighting for Typescript!

angular-bundle


Resources