シェアありがとうございます!

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

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

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

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

環境

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

今回の環境

  • MacOS High Sierra 10.13.6
  • Sublime Text 3 (3.1.1)

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でした。また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の3拠点生活を目指すフリーランスのWEBエンジニア兼デザイナー。大人になってもずっと遊んでいたい人。TwitterもInstagramも基本フォローバックするのでお気軽にフォローしてください!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です