macOS Mojave で Typescript ファイルの中身を Quick Look で見れるようにする

macOS では Quick Look と呼ばれる機能により、Finder でファイルを選択した状態でスペースキーを押すとファイルによっては中身が表示されます。ですが TypeScript ファイル（拡張子が .ts / .tsx のファイル）については、デフォルトではソースコードは表示されません。ここでは TypeScript で書かれたファイルを Quick Look に対応させる手順を紹介します。

（※）2019年10月11日現在、macOS Catalina には対応していません。

QLColorCode をインストール

まずは homebrew で QLColorCode をインストールします。

brew cask install qlcolorcode

TypeScript ファイルのコンテンツタイプを調べる

ts ファイルと tsx ファイルのコンテンツタイプを調べます。

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

/full/path/to/file.ts で指定するファイルは　ts ファイルであればどのファイルでも構いません。最初のコマンドでの出力は

kMDItemContentType = "public.mpeg-2-transport-stream"

のようなものになり、2番目のコマンドの出力は

kMDItemContentType = "dyn.ah62d4rv4ge81k652"

のようになると思います。このダブルクォーテーションで囲まれたものが次の手順で必要になります。

Info.plist にコンテンツタイプを追加

次に ~/Library/QuickLook/QLColorCode.qlgenerator/Contents/Info.plist を開いてください。Xcode よりも Visual Studio Code のようなテキストエディタの方が編集が楽だと思います。Info.plist ファイルの最初の方に

<dict>
    <key>LSItemContentTypes</key>
    <array>
        <string>public.source-code</string>
        <string>public.php-script</string>
        ...
    </array>
</dict>

という箇所があるので、array の最後に先ほど調べたコンテンツタイプを追加します。

<dict>
    <key>LSItemContentTypes</key>
    <array>
        <string>public.source-code</string>
        <string>public.php-script</string>
        ...
        <string>public.mpeg-2-transport-stream</string>
        <string>dyn.ah62d4rv4ge81k652</string>
    </array>
</dict>

以上で設定は完了です。これで Quick Look でソースコードが表示されない場合は、~/Library/QuickLook/ ディレクトリから QLColorCode.qlgenerator を別の場所に移動させ、すぐに元に戻してください（この操作で Quick Look が再起動されるようです）。

参考サイト

Preview Typescript files with MacOS Quicklook