LogoMark.png

Atom

Atom

TextEditor

Atom(アトム)は、2014年にGithubから公開されたオープンソースのテキストエディタです。Google Chromeのフォーク元である Chromiumをベースとしたアプリケーションで、Windows版、Mac版、Linux版があります。

HTML、CSS、Javascriptほか、コード入力のサポート機能はもちろん、機能拡張も豊富です。ダウンロード> https://atom.io/

CONTENTS




基本操作

ペイン分割

HTMLとCSSなど2つのファイルを同時に開いている場合、ペイン分割を行うと左右や上下にウインドウを分割して作業することができます。

表示 > ペイン分割 [上下左右]
ShortCut:[Commamd]+[K] > [→] (Command + k を一旦離して → )


行の折り返し

一行が長く、ソースが読みにくい場合は、以下のようにします。

表示 > 自動折り返しの切り替え (これはトグルになっています)


文字サイズの拡大・縮小

ブラウザのインターフェイスと同様です。

COMMAND  [+] で拡大  /  COMMAND  [-]  で縮小


HTML入力サポートの活用

HTMLの入力では、タグ名+[TAB] で、開始タグ(+基本属性)・終了タグの枠組みがセットで表示されます。ファイルの拡張子が .html となっていることが前提です。

CSS入力サポートの活用

CSSの入力では、セレクタ名の入力中、プロパティーの入力中に候補が表示されるので、単語綴りを正確に覚えていなくても大丈夫です。ファイルの拡張子が .cssとなっていることが前提です。

その他の入力サポート

検索・置換の活用

[Command] + [F] ← 多くのソフトで共通です(ブラウザも)

MD(MarkDown)ファイルの表示

拡張子.md のファイルはMarkDown形式(代表例 Wikiの表記)です。DLしたパッケージに .md がある場合、以下の操作できれいに表示されます。

CTRL + SHIFT + m 




設定

特殊記号の可視化

TAB[>>]や半角スペース[・]、改行コードの明示をお勧めします。

ATOM > 環境設定  > エディタ設定 > 不可視文字を表示(Show Invisible)

特にコード内の「全角スペースの存在」はトラブルの原因になるので、それを排除するためにも、半角スペースと全角スペースの区別がつくことが重要です。不可視文字の視覚化を行うと半角スペースは[・]で明示されます。

ハードタブとソフトタブ

TABキーを押したときの挙動を設定する項目です。ハードタブは、不可視文字 >> で表示されるもので、当該箇所には TAB コードが入ります。一方ソフトタブは、不可視文字・・で表示されるもので、当該箇所には、半角スペースが入ります。

TABは自動的にインデントをとるのに便利ですが、開くエディタによって、8スペース、4スペース、2スペースなど、挙動が様々なので、どちらかというとソフトタブ、つまり半角スペースをつめていく方がおすすめです。



カスタマイズ

高機能なエディタで、様々なカスタマイズが可能です(随時追加しています)。


メニューの日本語化

以下の手順でメニュー等の日本語化が可能です。

自動整形プラグイン

ソースコード全体を自動で綺麗に整形してくれます。

使い方は以下のとおり

どのように整形するか、そのルールは以下から設定可能です。

MiniMap

長いソースコードの全体を縮小表示したマップ画像をウインドウに表示するプラグインです。PhotoShopのナビゲータのように、全体の中のココに移動したい・・という場合に便利です。

Atom でTerminal

Atom の画面内で Terminal が使えるようになります。

Xcode が必要です。事前に AppStore から Xcodeをインストールして、Atomを再起動して下さい。


Vimのキー操作を再現

その他

起動時に前回のウインドウ状態を復元しないようにする

保存時に最終行で改行させない

最終行末に勝手に改行コードを入れて欲しくない場合(例えばアクセスカウンター用のデータファイルで、数字が1件のみ記載されてる前提の場合、改行コードが邪魔になるケースがあります)などにこの操作をします。

TAB や ENTER を検索・置換する方法について(正規表現)

まず [Command] + [F] でフッターに出る検索ダイアログの中の、以下の部分をクリックして、特殊記号の利用を有効にします。

[ .* ] : Use Regex

検索・置換フィールドで、以下の入力をすることで、TAB や ENTER を処理対象にすることが可能です。

TAB:\t   ENTER:\n  

[ \ ](インバーススラッシュ)は [Option] + [¥] で入力できます。

Atom を Terminal から起動できるようにする

Atom で「隠しファイル」を編集する

「隠しファイル」とは、通常の GUI 操作では、フォルダの中に確認することができないファイルです。ユーザーが間違って消すといけないような、設定ファイルの類は、通常隠しファイルとして存在しています。

Macで 隠しファイルの存在を確認するには、Terminal が必要です。以下のようにすると隠しファイルが確認できます。

$ ls -a

隠しファイルには、ファイル名の付け方にルールがあって、一般にファイルの先頭に .(ドット)が付いています。
例).htaccess

で、この隠しファイルの編集に ATOM のシェルコマンドが役に立つわけです。以下のようにして ATOM を Terminal から起動することで、隠しファイル(ここでは .test.dat とします)を編集・更新することができます。

$ atom .test.dat


Atomの設定を初期化

何らかの操作で、操作環境が戻せなくなった場合、個人の設定ファイルを一旦削除することで初期化可能です(ソフトを捨てて再インストールしても、個人の設定ファイルが残っていると環境は変わりません)。

この先の作業は危険を伴います。自己責任で・・

参考動画






PAGES

GUIDE

DATA

Last-modified: 2020-07-02 (木) 15:34:23