おすすめATOMパッケージ(フロントエンドエンジニア向け)


フロントエンドエンジニアの僕がオススメするATOMのパッケージです。

ATOMをオススメする理由

GitHub Desktopを使いたいから

一番の理由がこれですね。
僕はGitの管理にGitHub Desktopを使用しているのですが、ATOMとの相性がいいんですよね。
具体的にはGitHub Desktopから直接開いたりできるので助かってます。
GitHubを使っていない人でもGitHub Desktopは利用できるので恩恵は受けられると思います。

無料

これも大きな理由ですね。
無料でもこれだけ使いやすいので有料に手を出したことはありません。。

Vimとかは敷居高いし、Visual Studio Codeはなんか嫌だ

これは個人的な感覚なんですが、なんとなくです。
深い理由はないです。

オススメパッケージ

前置きが長くなりましたが、紹介していきたいと思います。

基本

各エンジニア共通でオススメのパッケージです。

file-icons

ファイルが見やすくなって便利です。
よく使う言語だと見慣れているんですが、あまり使わない言語のファイルのアイコンが意外とオシャレだったりします。

atom-beautify

HTML等のファイルを綺麗にしてくれるやつです。
言語によっては使えなかったり変な感じになることもありますが、HTMLとかなら綺麗になるのでたまに使います。

atom-clock

画面の右下に時計を表示させてくれます。
集中しているといつの間にか時間が経っていることも多いので、時間の目安として助かってます。
時間は大事です。

atom-clock

画面の右下に時計を表示させてくれます。
集中しているといつの間にか時間が経っていることも多いので、時間の目安として助かってます。
時間は大事です。

japanese-menu

メニューバーとコンテキストメニューを日本語化してくれます。
英語が苦手な人には必須ですね。

pigments

色を表示してくれます。

minimap

右端にソースマップを表示してくれます。
長いコードを書いているときには助かります。

minimap

右端にソースマップを表示してくれます。
長いコードを書いているときには助かります。

minimap-git-diff

minimapにgit diffを表示してくれます。
どれくらい修正したのかすぐにわかりますね。

minimap-highlight-selected

選択した箇所をminimapに表示してくれます。

minimap-pigments

pigmentsに関連するパッケージでminimap上に色を表示してくれます。

platformio-ide-terminal

ATOM上でターミナルを起動することができます。
僕はターミナルは基本これしか使ってません。

project-manager

プロジェクトマネージャーです。

show-ideographic-space

全角スペースを視覚的に表示してくれます。
意外と便利。

Git関連

Git関連のオススメです。

git-plus

Gitを使うとき便利。

git-log

Gitを視覚的に見ることができる
SourceTreeみたいな感じですね。
Cmd+Shift+P、 Git Log:Showです。

Vue.js関連

フロントエンドエンジニアという職業柄Vue.jsををよく使うので、
Vueを書くときに便利なパッケージを紹介します。

language-vue

Vueの表示をしてくれます。
Nuxt.jsでも大丈夫。

Stylus

StylusというCSSメタ言語が使えます。
以前はSCSSで書いてましたがStylusを知ってから病みつきに。

atom-pug

pugが使えます。
他にも色々パッケージはあるんですが、
Vue + Stylus + pug の組みわせだとこれが一番いい気がします。