【Mac】Sublime Text 3をVueファイルにも対応させる

　こんにちわ、Hashiです。寒いっすね。

　さて、最近vue.jsを学習しているのですが、自分が普段使用しているテキストエディタ「Sublime Text 3（以下Sublime Text）」でもvueファイルを読めるようにシンタックスハイライトしてくれるプラグイン「vue-syntax-highlight」を入れてみたので手順を紹介したいと思います。

　とても簡単で全部で5分もあれば完了します。

環境

　なお、今回の環境は下記の通りとなります。

Package Controlのインストール

　まず、「vue-syntax-highlight」のインストールには「Package Control」が必要なのでPackage Controlをインストールします。

　なお、Package Controlがインストール済みの方は次へ飛んでください。

コマンドをコピー

　こちらのページに「Package Control」のインストールに必要なコマンドがあるので、「Sublime Text3」のタブを選択した状態でコマンドを丸っとコピーします。

コマンドを入力

　Sublime Textを開いて「View」→「Show Console」でコンソールを開きます。

　コンソール画面が表示されたら、先ほどコピーしたコマンドをペーストしてEnterをクリック。

再起動して反映を確認

Sublime Textをを再起動して「Package Control」がインストールされていれば完了です。

vue-syntax-highlightのインストール

　無事にPackage Controlがインストールされたら、実際に「vue-syntax-highlight」をインストールしていきます。

コマンドパレットを開く

　Sublime Textを開いて先ほどインストールした「Package Control」を選択してコマンドパレットを開きます。（ショートカットは「Commad + Shift + P」）

レポジトリを追加してインストール

　コマンドパレットに「Add Repository」と入力すると「Package Control: Add Repository」がハイライトされると思うのでクリックします。

　そうすると、下部にURLを入力するテキストエリアが出てくるので、下のURLをコピペしてEnterをクリッックします。

　「https://github.com/vuejs/vue-syntax-highlight.git」

インストールの確認

　再度、コマンドパレット（Commad + Shift + P）を開き、今度は「Install Package」と入力すると「Package Control: Install Package」が表示されるので選択します。

　インストールされたパッケージが表示されるので「vue-syntax-highlight」と入力して見つかればインストール完了です。

まとめ

　ということで、今回はSublime Textでもvueファイルの編集ができるように「vue-syntax-highlight」をインストールしてみました。

　これで問題なくvueファイルもガシガシ編集できます。

　それでは、今回はここまで。Hashiでした。また！