Atom(アトム)は、2014年にGithubから公開されたオープンソースのテキストエディタです。Google Chromeのフォーク元である Chromiumをベースとしたアプリケーションで、Windows版、Mac版、Linux版があります。
HTML、CSS、Javascriptほか、コード入力のサポート機能はもちろん、機能拡張も豊富です。ダウンロード＞ https://atom.io/
HTMLとCSSなど２つのファイルを同時に開いている場合、ペイン分割を行うと左右や上下にウインドウを分割して作業することができます。
表示 > ペイン分割 [上下左右] ShortCut：[Commamd]+[K] > [→] （Command + k を一旦離して → ）
一行が長く、ソースが読みにくい場合は、以下のようにします。
表示 > 自動折り返しの切り替え （これはトグルになっています）
ブラウザのインターフェイスと同様です。
COMMAND [+] で拡大 / COMMAND [-] で縮小
HTMLの入力では、タグ名＋[TAB] で、開始タグ（+基本属性）・終了タグの枠組みがセットで表示されます。ファイルの拡張子が .html となっていることが前提です。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html><link rel="stylesheet" href="/css/master.css">
<script type="text/javascript"> </script>
a+[TAB] → <a href=""></a> h2+[TAB] → <h2></h2>
<!-- ： -->
CSSの入力では、セレクタ名の入力中、プロパティーの入力中に候補が表示されるので、単語綴りを正確に覚えていなくても大丈夫です。ファイルの拡張子が .cssとなっていることが前提です。
/* ： */
[Command] + [F] ← 多くのソフトで共通です（ブラウザも）
拡張子.md のファイルは Markdown 形式（代表例 Wikiの表記）です。DLしたパッケージに .md がある場合、以下の操作できれいに表示されます。
CTRL + SHIFT + m
参考：https://github.com/koichi-inoue/MarkdownSample
TAB[>>]や半角スペース[・]、改行コードの明示をお勧めします。
ATOM > 環境設定 > エディタ設定 > 不可視文字を表示（Show Invisible）
特にコード内の「全角スペースの存在」はトラブルの原因になるので、それを排除するためにも、半角スペースと全角スペースの区別がつくことが重要です。不可視文字の視覚化を行うと半角スペースは[・]で明示されます。
TABキーを押したときの挙動を設定する項目です。ハードタブは、不可視文字 >> で表示されるもので、当該箇所には TAB コードが入ります。一方ソフトタブは、不可視文字・・で表示されるもので、当該箇所には、半角スペースが入ります。
TABは自動的にインデントをとるのに便利ですが、開くエディタによって、8スペース、4スペース、2スペースなど、挙動が様々なので、どちらかというとソフトタブ、つまり半角スペースをつめていく方がおすすめです。
様々な追加パッケージが用意されており、設定メニューからそれをインストールするだけで機能を追加していくことが可能です。
以下の手順でメニュー等の日本語化が可能です。
ソースコード全体を自動で綺麗に整形してくれます。
メニュー＞ Packages ＞ Atom-Beautify ＞ beautify
メニュー＞ Packages ＞ Atom-Beautify ＞ settings
https://atom.io/packages/atom-live-server
簡易的な Webサーバをローカルに実現することができます。サーバーに置かないと動作しないタイプのプロジェクトの動作確認に使うことができます（PHPには対応していません。PHPを利用する場合は、後述の php-server を）。
メニュー＞ Package ＞ Atom Live Server：Start
http://127.0.0.1:3000/
メニュー＞ Package ＞ Atom Live Server：Stop
PHPを用いている動的サイトの動作確認に利用することができます。
https://atom.io/packages/php-server
$ PHP --version
PHP 7.3.9 (cli) (built: Aug 30 2019 12:38:27) ( NTS ) Copyright (c) 1997-2018 The PHP Group ： $
メニュー＞ Package ＞ PHP Server：Start in Project Root
http://localhost:8000/
長いソースコードの全体を縮小表示したマップ画像をウインドウに表示するプラグインです。PhotoShopのナビゲータのように、全体の中のココに移動したい・・という場合に便利です。
Atom の画面内で Terminal が使えるようになります。
最終行末に勝手に改行コードを入れて欲しくない場合（例えばアクセスカウンター用のデータファイルで、数字が１件のみ記載されてる前提の場合、改行コードが邪魔になるケースがあります）などにこの操作をします。
まず [Command] + [F] でフッターに出る検索ダイアログの中の、以下の部分をクリックして、特殊記号の利用を有効にします。
[ .＊ ] : Use Regex
検索・置換フィールドで、以下の入力をすることで、TAB や ENTER を処理対象にすることが可能です。
TAB：\t ENTER：\n
[ \ ]（インバーススラッシュ）は [Option] + [¥] で入力できます。
$ open -a Atom ~/sample.txt
$ open ~/sample.txt
Atom->Install Sell Commands標準のインストール場所は以下です。
/usr/local/bin/atomコマンドは、以下のようにタイプします。ファイルが存在しない場合は、新規のファイルとして作成されます。
$ atom ~/sample.txt
「隠しファイル」とは、通常の GUI 操作では、フォルダの中に確認することができないファイルです。ユーザーが間違って消すといけないような、設定ファイルの類は、通常隠しファイルとして存在しています。
Macで 隠しファイルの存在を確認するには、Terminal が必要です。以下のようにすると隠しファイルが確認できます。
$ ls -a
隠しファイルには、ファイル名の付け方にルールがあって、一般にファイルの先頭に .（ドット）が付いています。
例）.htaccess
で、この隠しファイルの編集に ATOM のシェルコマンドが役に立つわけです。以下のようにして ATOM を Terminal から起動することで、隠しファイル（ここでは .test.dat とします）を編集・更新することができます。
$ atom .test.dat
何らかの操作で、操作環境が戻せなくなった場合、個人の設定ファイルを一旦削除することで初期化可能です（ソフトを捨てて再インストールしても、個人の設定ファイルが残っていると環境は変わりません）。
この先の作業は危険を伴います。自己責任で・・
$ ls -aおそらく .atom という名称のディレクトリがあります。
$ rm -rf .atomReMove（削除）、Recuesive（フォルダ・ファイルを再帰的に）、対象は .atom ディレクトリ・・という意味です。