1. abebe_shu

    Posted

    abebe_shu
Changes in title
+おすすめATOMパッケージ(フロントエンドエンジニア向け)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,108 @@
+フロントエンドエンジニアの僕がオススメするATOMのパッケージです。
+
+# ATOMをオススメする理由
+## GitHub Desktopを使いたいから
+一番の理由がこれですね。
+僕はGitの管理にGitHub Desktopを使用しているのですが、ATOMとの相性がいいんですよね。
+具体的にはGitHub Desktopから直接開いたりできるので助かってます。
+GitHubを使っていない人でもGitHub Desktopは利用できるので恩恵は受けられると思います。
+
+## 無料
+これも大きな理由ですね。
+無料でもこれだけ使いやすいので有料に手を出したことはありません。。
+
+## Vimとかは敷居高いし、Visual Studio Codeはなんか嫌だ
+これは個人的な感覚なんですが、なんとなくです。
+深い理由はないです。
+
+
+# オススメパッケージ
+
+前置きが長くなりましたが、紹介していきたいと思います。
+
+## 基本
+
+各エンジニア共通でオススメのパッケージです。
+
+### [file-icons](https://atom.io/packages/file-icons)
+ファイルが見やすくなって便利です。
+よく使う言語だと見慣れているんですが、あまり使わない言語のファイルのアイコンが意外とオシャレだったりします。
+
+### [atom-beautify](https://atom.io/packages/atom-beautify)
+HTML等のファイルを綺麗にしてくれるやつです。
+言語によっては使えなかったり変な感じになることもありますが、HTMLとかなら綺麗になるのでたまに使います。
+
+### [atom-clock](https://atom.io/packages/atom-clock)
+画面の右下に時計を表示させてくれます。
+集中しているといつの間にか時間が経っていることも多いので、時間の目安として助かってます。
+時間は大事です。
+
+### [atom-clock](https://atom.io/packages/atom-clock)
+画面の右下に時計を表示させてくれます。
+集中しているといつの間にか時間が経っていることも多いので、時間の目安として助かってます。
+時間は大事です。
+
+### [japanese-menu](https://atom.io/packages/japanese-menu)
+メニューバーとコンテキストメニューを日本語化してくれます。
+英語が苦手な人には必須ですね。
+
+### [pigments](https://atom.io/packages/pigments)
+色を表示してくれます。
+
+### [minimap](https://atom.io/packages/minimap)
+右端にソースマップを表示してくれます。
+長いコードを書いているときには助かります。
+
+### [minimap](https://atom.io/packages/minimap)
+右端にソースマップを表示してくれます。
+長いコードを書いているときには助かります。
+
+### [minimap-git-diff](https://atom.io/packages/minimap-git-diff)
+minimapにgit diffを表示してくれます。
+どれくらい修正したのかすぐにわかりますね。
+
+### [minimap-highlight-selected](https://atom.io/packages/minimap-highlight-selected)
+選択した箇所をminimapに表示してくれます。
+
+### [minimap-pigments](https://atom.io/packages/minimap-pigments)
+pigmentsに関連するパッケージでminimap上に色を表示してくれます。
+
+### [platformio-ide-terminal](https://atom.io/packages/platformio-ide-terminal)
+ATOM上でターミナルを起動することができます。
+僕はターミナルは基本これしか使ってません。
+
+### [project-manager](https://atom.io/packages/project-manager)
+プロジェクトマネージャーです。
+
+### [show-ideographic-space](https://atom.io/packages/show-ideographic-space)
+全角スペースを視覚的に表示してくれます。
+意外と便利。
+
+## Git関連
+
+Git関連のオススメです。
+
+### [git-plus](https://atom.io/packages/git-plus)
+Gitを使うとき便利。
+
+### [git-log](https://atom.io/packages/git-log)
+Gitを視覚的に見ることができる
+SourceTreeみたいな感じですね。
+Cmd+Shift+P、 `Git Log:Show`です。
+
+## Vue.js関連
+フロントエンドエンジニアという職業柄Vue.jsををよく使うので、
+Vueを書くときに便利なパッケージを紹介します。
+
+### [language-vue](https://atom.io/packages/language-vue)
+Vueの表示をしてくれます。
+Nuxt.jsでも大丈夫。
+
+### [Stylus](https://atom.io/packages/Stylus)
+StylusというCSSメタ言語が使えます。
+以前はSCSSで書いてましたがStylusを知ってから病みつきに。
+
+### [atom-pug](https://atom.io/packages/atom-pug)
+pugが使えます。
+他にも色々パッケージはあるんですが、
+Vue + Stylus + pug の組みわせだとこれが一番いい気がします。