Eclipse 2020-06以降でJavaScriptエディターを復活させる

JavaScript
JavaScript

EclipseでJavaScriptを編集するための環境についてのメモ書きです。

概要

Eclipseの2020-12リリースのバージョン(のPleiades)を使用していて、EclipseでJavaScriptを編集するのに、他のバージョンのEclipseで使っていた「JavaScriptエディター」を関連付けようとしたのですが、いくら探してもない!という状況になってしまいました。

どうやら、Eclipse 2020-06リリースから、EclipseでJavaScript用に提供されるエディタがそれまでのJavaScriptエディターを提供していたJavaScript Development Tools(JSDT)から、Eclipse Wild Web Developerというプラグインに変更されたようです。

公式の見解としては、このWild Web Developerの「汎用テキストエディター」を使いなさいとのことらしいのですが、正直使いづらい。。。
左がその汎用テキストエディターで右がただのエディタです。開いているのは同じJavaScriptファイルです。

いやもう文句だらけ。シンタックスハイライトの色味は変だし(まあ変更できるか)、()とか{}とか;とか白くなって消えちゃってるし!(これもまあ変更できるか)
もしかしたら最初からダークテーマをターゲットにした色テーマなのかもしれないけど!だったらconstとか黒背景じゃ見えんだろが!
と思ったらWild Web Developerの公式GitHubを見るとちゃんと()とかが黒字で出ている。。。なんやねんそれ。。。
色味の設定を変更しようと思っても、いじる設定が見当たらな~い!!

というわけでWild Web Developerにサヨナラを告げることを決意しました。そして僕たちのJavaScriptエディターを取り返します!

導入手順

JavaScriptエディターを導入するには、「Wild Web Developerをアンインストール」⇒「JavaScript Development Tools(JSDT)をインストール」の手順で導入します。

Wild Web Developerをアンインストール

Eclipseの画面上のメニューより「ヘルプ」⇒「Eclipseマーケットプレース」を選択します。
マーケットプレースが開いたら、「インストール済み」のタブから、「Wild Web Developer」を探します。見つけたら、「変更」の横の▼を押下してプルダウンを展開し、「アンインストール」を押下します。

続いてアンインストールするフィーチャーの選択画面に遷移するので、すべてチェックがついていることを確認して「確認」を押下します。その後、「完了」を押下するとアンインストールが開始されます。

アンインストール後にEclipseの再起動を求められるので、それに従いEclipseを再起動してください。

JavaScript Development Tools(JSDT)をインストール

続いて、JavaScriptエディターを提供しているJSDTをインストールします。
「ヘルプ」より「新規ソフトウェアのインストール」を選択します。

作業対象の横の「追加」を押下します。

ロケーションに下記のURLを貼り付けます。適当な名前を入力して「追加」を押下します。
https://download.eclipse.org/releases/2020-03

「作業対象」に先ほど追加したURLが表示されていることを確認し、その下のインストール可能な項目の中から「Web,XML,Java EE および OSGi エンタープライズ開発」を展開し、その中の「JavaScript開発ツール」にチェックをつけて「次へ」を押下します。

ライセンスへの同意を求められるので、ラジオボタンを「使用条件の条項に同意します」にして「完了」を押下します。するとインストールが開始されます。

インストールが完了すると、例にもれずEclipseの再起動を求められるので再起動をします。

再起動が完了したら、JavaScriptエディターが使えるようになっているはずです!
設定から「一般」⇒「エディター」⇒「ファイルの関連付け」でファイルの拡張子ごとにエディターを関連付けることができるので、「.js」ファイルのデフォルトのエディターをJavaScriptエディターに設定しましょう。

これで無事にJavaScriptエディターが使えるようになりました!

左がただのテキストエディターで、右がJavaScriptエディターです。
やっぱEclipseはこのシンタックスハイライトが一番落ち着きますね!

JavaScriptエディターのフォントやフォーマッターは下記の場所で設定してください。
フォント:「一般」⇒「外観」⇒「色とフォント」を開き、「JavaScript」⇒「JavaScriptエディター・テキスト・フォント」を選択して「編集」から設定
フォーマッター:「JavaScript」⇒「コード・スタイル」⇒「フォーマッター」から設定

適用して閉じる」を押すのを忘れないでね!


EclipseでJavaScriptを編集するのはJavaプロジェクトのソースとしてのJavaScriptであることがほとんどだと思うので、このエディターくらいの手軽さで十分です。色味もEclipseのテーマと統一されるので違和感がありません。
もし本格的にJavaScriptメインで開発を行う場合は、EclipseではなくVisual Studio CodeかAtomあたりのリッチなエディタを使用することをオススメします。

  • ちなみに私はこの手順を知る前にあの手この手でJavaScriptエディターを復活させようといじくり倒していたら突然Eclipseを起動しようとするとJREがダンプを吐いて起動が止まるという大クラッシュを経験しました。皆様もEclipseをいじるときは事前にバックアップを取っておくなどの準備をしておいて損はないと思います。あとEclipseのインストールフォルダとWorkspaceフォルダを分けておくことね。。。(Eclipseのインストールしなおしはなんだかんだよく発生するシナリオだったりする。。。)

参考

https://stackoverflow.com/questions/62742955/javascript-file-editing-stopped-working-with-eclipse-2020-06

コメント

タイトルとURLをコピーしました