【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【WordPress 専用】クラウドサーバー『ウェブスピード』

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

SublimeでES6テンプレート文字列内のHTMLをハイライト

開発チームの日下部です。

ES6から、標準でテンプレート文字列(template literal)が使えるようになりました。
文字列の中にHTMLタグを書く際に、シングルクォートもダブルクォートもエスケープしなくてよいので、AngularJSやVue.jsを使うときに便利ですが、

こんな感じで、エディタによるハイライトが地味だったりします。

この記事では、Sublime Textでテンプレート文字列内のHTMLタグをHTMLタグとしてハイライトするための手順を紹介いたします。

といってもMichael RussellさんがGistでsyntax fileを公開してくれているので、こちらを使わせていただきましょう。


早速Sublime Textを開き、

Tools -> Developer -> New Syntax...

と進み、開かれたウィンドウの内容をこちらの内容に書き換えて保存します。
ファイル名は任意ですが、拡張子はsublime-syntaxにします。これでSyntaxの追加は完了です。

あとはテンプレート文字列を使っているファイルを開いて

 View -> Syntax -> Javascript NG

としたら、この記事のアイキャッチ画像のようにハイライトされるはず!

なお、何かjsファイルを開いている状態で

 View -> Syntax -> Open all with current extension as... -> Javascript NG

とすると、拡張子が.jsのファイルを開くときに自動でJavascript NGが選ばれるようになります。

(Syntaxの名前に"NG"とありますが、AngularだけでなくVueを書く際にも問題なく使えます)

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
0
読み込み中...
0 票, 平均: 0.00 / 10
587
X facebook はてなブックマーク pocket
【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

この記事をかいた人

About the author