ねこさんとへびさんの新人技術ブログ

新人エンジニアのねこさんとへびさんの、技術向上のためのブログです。

TS!Atom deprecationアラートを非表示にする

久しぶりにAtomエディターを使っていて、ふと視線を下げたところ…
んん?なんか怪しげなアラートが出ている。

f:id:tksptan:20180528184721j:plain

1 deprecation

クリックして詳細を確認してみました。

f:id:tksptan:20180528185015j:plain

~style.less

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary.
This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--.
To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

atom-text-editor::shadow .indent-guide => atom-text-editor.editor .indent-guide
atom-text-editor::shadow .invisible-character => atom-text-editor.editor .invisible-character

Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.

アラートを見る感じ
style.lessに問題があるようだ。
Atom v1.13.0から:host and ::shadowセレクタを使うと何だかヤバいらしい。
(雰囲気英文読解)

とりあえずやってみたこと(失敗)

いやでも、style.lessファイルを編集する前に、一般的なおまじないをやっておこう。

  1. Atomが最新版であるかの確認
  2. インストール済みのパッケージを全て最新版にする
  3. show-ideographic-spaceプラグイン アンインストール

ダメでした(ノ∀`)アアー

仕方がないのでstyle.lessを編集する。

style.lessの編集方法

f:id:tksptan:20180528191112j:plain

Atom上部にあるメニューバーから環境設定(Settings)を開いて、テーマ(Theme)を選択。
※環境設定はショートカットキー、Windows:「Ctrl+,」Mac:「command + ,」でも開きます。

以下のメッセージのリンクをクリックすると(上図参照)、style.lessが開きます。

Atomスタイルシート を編集してスタイルを変更することもできます。
You can also style Atom by editing your stylesheet.

style.less 修正内容

先ほどのアラート文をみると、修正方法らしき記載がある。

atom-text-editor::shadow .indent-guide =>
            atom-text-editor.editor .indent-guide
atom-text-editor::shadow .invisible-character =>
            atom-text-editor.editor .invisible-character

こちらを参考にstyle.lessに以下の変更を加えました。

[修正前]

atom-text-editor::shadow {

  .indent-guide {
    color: @invisible-color;
  }

  .invisible-character {
    color: @invisible-color;
  }

 }

[修正後]

atom-text-editor.editor {

  .indent-guide {
    color: @invisible-color;
  }

  .invisible-character {
    color: @invisible-color;
  }

 }

先ほどのアラートが消えました。
f:id:tksptan:20180528193147j:plain

怪しんでアンインストールしたshow-ideographic-spaceプラグインを再インストール。
不可視文字もちゃんと表示されているのでこれで解決したと思います。

それにしても、今のAtomのバージョンv1.27で、v1.13からこのエラーメッセージ出っぱなしだったはずなのに、
今まで気が付かなかったんですよね。
使用頻度が低いとはいえ、定期的に使っていたのに。
自分の鈍感力というか、注意力の無さが怖い。