Preview Typescript files with MacOS Quicklook

2019-01-09

If you use both Quicklook and Typescript, you've probably been frustrated by the blank previews you get for .ts and .tsx files. Thankfully there's an easy, if fiddly, fix:

First, install the QLColorCode Quicklook plugin. This is easy with Homebrew:

brew cask install qlcolorcode

Alternately, you can download and copy it manually into ~/Library/Quicklook. This should give you nice previews of javascript and other code, but not TS.

Then find the content types for .ts and .tsx:

mdls -name kMDItemContentType /full/path/to/file.ts
mdls -name kMDItemContentType /full/path/to/file.tsx

Copy the file types into the LSItemContentTypes array in

~/Library/QuickLook/QLColorCode.qlgenerator/Contents/Info.plist

These will be something like dyn.ah62d4rv4ge81k652 for .tsx and probably public.mpeg-2-transport-stream for .ts (MacOS thinks its a video file)

See adding language types for more info

Finally, reboot Quicklook by moving QLColorCode.qlgenerator out of ~/Library/QuickLook/, then moving it back.

Now you should see nice syntax-highlighted previews of all your typescript
files.

Note, this will break video previews for certain video files - this is
something I can live with!