2022.10.8 更新
最近全然使っていなかったので公式ページを見てみたら、2022/12/15に終焉を迎えるということでした……
https://github.blog/2022-06-08-sunsetting-atom/
Atom、今までありがとう。そしていつかまた会える日を楽しみにしています。
2022.05.03 更新
少し見直しました
環境
OS：Windows11 Pro（バージョン21H2）
Atom バージョン：1.60.0
追加パッケージ
Sublime-Style-Column-Selection
矩形選択ができるようになります。
サクラエディタの矩形選択の方が使いやすいと思いますが、Atomでも使いたい場合に使用します。
atom-beautify
言わずもがな。昔はコアパッケージでしたが、切り離されましたね。
整形してくれるやつです。
PHPだったらphp-cs-fixerが必要です。GitHubからダウンロードできます。
ダウンロード後、atom-beautifyで設定します。
Pythonだったらautopep8が必要です。
pip install autopep8 もしくは pip install pycodestyle をしましょう。
Perl だったら、 Perl::Tidy を入れればいけるかなと思います。
atom-clock
ただウインドウの右下に時計を表示してくれるだけ。
一度使わなくなりましたが、軽いので入れておくことにしました。
atom-ide-base
ついにFacebookのatom-ide-uiとはおさらばです。
セットで色々入りますが、linterを使うため、前のatom-ide-uiとは違いdiagnosticsとlinterが競合する、ということがなくなりました。
最高！
atom-typescript
Atom で TypeScript を書くために使用します。
autoclose-html
HTMLタグを閉じてくれます。
地味に便利。
autocomplete-paths
pathを補完してくれます。これは便利。
color-picker
これは必須。CSSの色を指定したり調べたりするのにすごく重宝します。
docblockr
docblockを入れてくれます。
emmet
VSCodeではデフォルトで入っているんですよね。
例えばHTMLのファイルを作成し、 html:5 と入力してタブキーを押すとテンプレートを作ってくれます。
file-icons
Tree-viewに表示されるファイルのアイコンが分かりやすくなります。
file-types
これは拡張子によって決まっているデフォルトのシンタックスハイライトを変更するのに使います。
cgiがRubyのシンタックスハイライトが当たってしまうのを、Perlにするのに使ったくらいで滅多に使わないかも。
git-blame
行単位で git のコミット履歴が見れるようになるっぽいです。
面白半分で入れてみて、あんまり使っていません。。。
ctrl + b で表示・非表示を切り替えられる点は便利です。
highlight-line
行を強調表示します。
無くてもいいのですが、シンタックステーマによってはあった方が見やすいかと思い、入れています。
highlight-selected
選択しているものをハイライト表示します。これもコアパッケージでいいくらい必須。
ide-python
なんと、今まではatom-ide-uiが必要でしたが、バージョンアップでatom-ide-baseを使うようになったようです。
機能としてはCtrl+左クリックで定義に飛べたりもしますし、インテリセンスのように入力補完やカーソルを合わせるだけで（docstringを書いていれば）docstringが表示されたりします。
linterのようにpycodestyleでのチェックや、使用していない変数やimportの検出など、色々やってくれます。
pip install python-language-server[all] を実行する必要があります。
indent-guide-improved
インデントガイドの縦線を表示にしているなら、こちらを入れるとカーソルの位置に従ってインデントの縦線を強調表示してくれます。
language-docker
dockerfileの編集中にシンタックスハイライトを適用できます。
language-ini
iniファイルにシンタックスハイライトを適用できます。
linter
コード解析ツール、というのでしょうか、まあそんなやつです。
atom-ide-base で使われています。
FacebookのAtom-IDEが出るまではlinterの方が主流だったと思います。
復権しました。
linter-eslint
ES6（ES2015）で JavaScript を書くなら必須だと思います。
ただし、 Node.js をインストールして npm init したり npm install eslint したりが必要です。
あと .eslintrc.json で ESLint の定義を書いたりも必要ですね。
使い始めるための準備の仕方を調べないといけないです。
linter-php
PHPのコード解析をしてくれます。
ただ、更新されていなさそうなのでatom-ide-baseを使うide-phpみたいなのが出るまで待たないとダメかもしれません。
※ ide-phpは今もありますが、まだatom-ide-ui版です。
minimap
言わずもがな、ミニマップです。必須ですね。
minimap-git-diff
ミニマップ上に git の差分を表示します。
minimap-highlight-selected
ミニマップ上に選択された単語をハイライト表示します。
単純に、highlight-selected の minimap 版です。
minimap-linter
ミニマップ上にも lint の警告を表示させます。
minimap-git-diff とちょっと似た感じの表示なので、見づらいかもしれません。
pigments
コード上に書かれた色コードに色を付けます。
prettier-atom
VSCode で使っている Prettier の Atom 版ですが、とりあえず入れただけでまだ使ってないです……
pretty-json
jsonの整形をしてくれます。
project-manager
ソースコードのルートディレクトリを登録することで、プロジェクトとして呼び出せるようになります。
ソースコードを複数のgitで管理していたりする場合は、プロジェクトごとに分けた方が分かりやすいですよね。
python-indent
地味に便利です。改行した時とかに上手くインデントしてくれます。
ただ、ファイルの改行コードが CRLF だとうまくインデントできないようです。
その代わり、それでファイルの改行コードを LF にし忘れていることに気付けます(笑)
rainbow-csv
CSV 形式に色を付けてくれます。
script
Atom 上で手元のちょっとしたスクリプトを起動して動作確認するのに使います。
だいぶ昔に動かなくなり、それ以来使っていませんでしたが、今はどうなんだろう。
検索じゃヒットしなくなったので、 apm コマンドじゃないと入らないかも。
以上です。
今はPython書くかHTMLやCSSやJavaScriptを書く時にしかAtomを使っていないので、IDE
IDE系のパッケージの調査が足りてないです。
すみません。
覚えておくと便利なショートカット
ついでによく使うショートカットキーも記載します。
Ctrl + f
Atom の機能というより Windows ではみんな同じだと思いますが、検索ボックスを表示します。
置換もここからやります。
Ctrl + Shift + f
Tree-view に表示された全ファイルからの検索です。
置換もここからやります。
Ctrl + ,
Settings を開きます。
Ctrl + \
Tree-view を開いたり隠したりします。
Ctrl + w
アクティブになっているタブを閉じます。
Ctrl + p もしくは Ctrl + t
ファイル名を指定して開くことができます。
一つのプロジェクトフォルダにソースコードが400個とかあるといちいちTree-viewからクリックするのが面倒なので重宝します。
Ctrl + Shift + l
シンタックスハイライトの言語を指定できます。
Ctrl + Alt + b
atom-beautify が入っていれば、整形を実行します。
Ctrl + Shift + b
script が入っていれば、script を実行します。
Ctrl + Shift + u
Atom はファイルを開く時にかならずutf-8で開きますが、Shift-JIS にしたい時などに切り替えることができます。
Ctrl + Shift + p
コマンドパレットを開きます。
Ctrl + Alt + F2
ブックマークをつけたり外したりできます。
ブックマークへは、F2キーのみで移動できます。
Ctrl + F2
ブックマークの一覧を表示し、そこから選択してジャンプ出来ます。
Ctrl + Shift + F2
ブックマークを一括削除します。
Ctrl + g
行番号を指定してジャンプできます。
デバッグ時にとてもお世話になります。
Shift + Alt + p
project-manager を入れていれば、プロジェクトの一覧を表示させ Atom を別途起動させたりできます。
Ctrl + ↓ もしくは Ctrl + ↑
現在カーソルのある行、もしくは選択している複数行を上下に移動させ入れ替えることができます。
Ctrl + Shift + i
パッケージがエラーを履いた時、Google Chrome の開発ツールみたいなのを開いてコンソール上のエラーを確認できます。
Ctrl + Shift + m
markdown を書いている時にプレビューを見れます。
Ctrl + r
定義を検索して飛べます。
Ctrl + Shift + 8
Github の右側ペインをトグルします。
Ctrl + Shift + 9
Git の右側ペインをトグルします。Github との違いが分かりませんが、なぜか自分の Github のリポジトリからクローンとかしてきたソースをいじるときはこっちを使うと差分とかいろいろ出ます。
Alt + o
atom-ide-baseを入れると一緒に入るatom-ide-outlineがあるおかげなのか、アウトラインを表示します。
設定
細かい設定をするの、めんどくさいですよね。
なので、Settingsの「Open Config Folder」で開く設定ファイル集をいじりましょう。
config.cson
各種パッケージやAtom本体の設定が記載されています。
以下のような設定をしています。
"*":
"atom-beautify":
executables:
"php-cs-fixer":
path: "D:\\MyDownloads\\programming\\php\\php-cs-fixer.phar" # php-cs-fixerを使う場合はパスを指定します
"autoclose-html":
forceInline: [
"title"
"h1"
"h2"
"h3"
"h4"
"h5"
"h6"
"td"
"th"
"span"
]
makeNeverCloseSelfClosing: false
core:
closeDeletedFileTabs: true
telemetryConsent: "no"
editor:
fontFamily: "HackGen" # いつも使用させていただいているフォントです
fontSize: 18
scrollSensitivity: 200
showInvisibles: true
tabType: "soft"
"exception-reporting":
userId: # ここは個人ごとに違う
"ide-python":
pylsPlugins:
flake8:
enabled: true
python: "C:\\Python\\Python39\\python.exe" # ここは人それぞれです
"line-ending-selector":
defaultLineEnding: "LF"
minimap:
plugins:
"git-diff": true
"git-diffDecorationsZIndex": 0
"highlight-selected": true
"highlight-selectedDecorationsZIndex": 0
linter: true
linterDecorationsZIndex: 0
welcome:
showOnStartup: false
".html.php.text":
editor:
tabLength: 4 # タブの場合、スペース4つ分として表示してもらいます
tabType: "auto" # たまたま自分が見たPHPのコードがタブとスペースがばらばらだったのでオートにしてみました
style.less
このご時世、4Kディスプレイでコードを書くことも珍しくないと思います。たぶん。
そんな時、文字サイズが小さすぎますよね。
config.csonでfontSizeを18にしているので多少は見やすいと思いますが、Tree-Viewとファイル名のタブの文字は小さいままです。
そんな時はこんな設定をします。
.tree-view {
font-size: 16px;
}
.title {
font-size: 16px;
}
.list-nested-item {
font-size: 16px;
}
これで見やすくなりましたね。