🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Q&A

解決済

3回答

1386閲覧

Atomエディタでejs構文がうまく色づけされない

kosetei

総合スコア64

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

0グッド

0クリップ

投稿2021/03/16 15:21

編集2021/03/17 03:08

Atom でejsファイルを編集する際、headタグの中にscriptタグがあるものをコピペすると、すべて灰色になってしまいます。
何か入力した行は更新されたかのように色が付きます。

ejs

1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"></script> 7 </head> 8 <body> 9 <!-- hogehoge --> 10 </body> 11</html>

一度頑張って色を付けて(?)も、scriptタグと同時に更新(すべて選択してインデント等)したり、ファイルを開きなおしたりすると、また色が消えてしまいます。

Atomのバージョンは1.55.0です。

ひょっとしてejsの書き方が間違っているのでしょうか?文法をAuto判定にすると、HTMLとして認識されていますし、、、
どうすべきでしょうか?
ご回答お待ちしています。

####やってみたこと
プロジェクトの開きなおし
Use Tree Sitter Parsers のオンオフ
EJSの文法パッケージ(?)language-ejsのインストール

####症状

  • 拡張子.ejsのファイルで<% %>タグが含まれるものでもAuto DetectだとHTMLと判定されます。(当然<% %>の中は灰色です)

手動でEJS構文を選択した後

  • scriptタグを挿入すると周辺の色が消えます。

症状1gif

  • scriptタグと一緒にインデント変更などをした部分の色が消えます。

症状2gif

  • scriptタグを含むコードをコピペすると色が付きません。

症状3gif

####一時しのぎ方法

  • scriptタグより下側は選択してインデントの上げ下げ等をすることで色が付きます。

イメージ説明

  • scriptタグより上は何故か同時選択では色が付きません。すぐ上以外は一行ずつ下げた時だけ色が付きます。

イメージ説明
scriptタグをコメントアウトしてインデントの上げ下げをします。(保存時にコメントアウトを解除し忘れると悲惨です)
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

自己解決

##どうやら1.55.0のバグのようです。
毎晩β最新版が適応されるAtom Nightly版を使ってみたところ、症状は見られませんでした。
こちらは安定板とは別アプリとしてインストールされ、設定等は共有されるようなのでそれぞれが互いに悪影響を及ぼす可能性も否定できませんが、少なくともテストで修正されているということは近々安定版でも修正されると思いますので、お急ぎの方はβ版もしくはAtom Nightly版を、そうでない方はお待ちいただくのが最善策だと思われます。

回答者のお二方のおかげで解決の糸口がつかめました。にも関わらず、心苦しいですが、どちらをベストアンサーにすべきか決められないので、自己解決とさせていただきます。ありがとうございました。

投稿2021/03/17 23:47

kosetei

総合スコア64

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

私の環境で試してみたら language-ejs パッケージインストールの有無、Use Tree-Sitter Parsers のオンオフにかかわらず全く同じようにハイライトが機能しなくなりました。
それでちょっと探してみたらこんなのがありました。

anime-tavern/language-ejs-2-atom · GitHub

完全手作業になりますが試しに入れてファイルを "ejs-2" にするとちゃんと色はつくようです。ただ autocomplete が効かなくなりました。
お望みのような挙動にはならないかも知れませんが参考まで。

投稿2021/03/17 10:04

fiwa

総合スコア1192

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kosetei

2021/03/17 23:15

ご回答ありがとうございます。 再現性があっただけでもこちらとしてはありがたいです。 出来れば条件分けをしていきたいところですが、素人で知識もないので難しそうです... ご紹介頂いたパッケージ(?)を活用しながら、騙し騙し使ってみることに致します。 また何か情報得られましたら教えてください。 よろしくお願いします。
guest

0

ejsは自動サポートしてないので、ここからパッケージを入れろってことみたいですよ。
language-ejs package

パッケージからejsと検索して、language-ejsをインストール
再起動などをする。

ejs
ejs2

こんな感じで表示されました。

投稿2021/03/17 00:30

編集2021/03/17 04:55
FKM

総合スコア3647

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kosetei

2021/03/18 00:54 編集

ご回答ありがとうございます。 デフォルトで入っている「tree-sitter」「text.html.ejs」と書かれたEJS構文では対応できないということでしょうか? 今、教えていただいたパッケージをインストールしてみましたが、構文の選択肢には、元からあったものしか表示されず、インストールしただけでは症状は改善していないようなので、適用方法がわからず困っています。。。
FKM

2021/03/17 02:33

一度Atomを閉じてみてもう一度開いてもだめですか? 自分はそれでうまくいきました。
kosetei

2021/03/17 03:22

ダメみたいです。。
FKM

2021/03/17 04:54

パッケージのアップデートを全部済ませて再起動かけたらejs構文も色が変わりました。
kosetei

2021/03/17 23:19

ありがとうございます。もうひと方回答をいただけて、同じ症状が再現出来ていらっしゃるようなので、ひょっとしたら、バージョンによって挙動に違いがあるのかも知れません。 解決に活かしたいので、差し支えなければ、FKM様のAtomのバージョンを、教えていただくことは可能でしょうか? よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問