Webデザイナーにおすすめ!Atomのおすすめパッケージまとめ

2016/10/28

33
私がWebデザインをしていてコーディングする時に重宝しているAtomのパッケージをまとめてみました。自分の入れているパッケージを見直してみると、Atomの前はSublimeTextを利用していたのでSublimeTextの使い心地に似るようなパッケージを選んでいるような感じがしました。これからAtomを使おうと思っている方の参考になればと思います!

Japanese Menu

33_1

初期状態では英語表示であるAtomのメニューバーとコンテキストメニュー・設定画面を日本語化します。

convert-to-utf8

Shift_JISなどのファイルをUTF8に変換して保存してくれるパッケージです。Shift_JISで保存されたファイルを編集することもある方は入れておくと便利です。

auto-encoding

開いたファイルのエンコーディングを自動でしてくれるパッケージです。Ctrl + Shift + u で「Auto Detect」を選択すると半別してくれますが毎回するのが面倒な方は是非!

minimap

33_4

sublimeTextではおなじみですが、コード全体を小さく表示してくれてスクロール位置を見るがわかるパッケージです。

file-icons

33_5

ツリービューなどでファイルの種類によって横にアイコンを表示してくれるパッケージです。パッと見でファイルの種類がわかるので便利です!

highlight-selected

33_6

テキストを選択するとファイル内の同じテキストをハイライトしてくれるパッケージです。これもsublimeTextではおなじみですね!

less-than-slash

このパッケージを使うとHTMLのタグを閉じるときに[

emmet

HTMLとCSSの入力を素早くしてくれるツールのEmmetは有名なので知っている方も多いと思います。Atom用のパッケージも用意されているので利用しています!

color-picker

33_9

CSSのカラーを指定するときにカラーピッカーを表示して直感的にカラー選択ができるパッケージになります。HEXやrgbaなど色々と対応しているので便利です!

autocomplete-paths

33_10

画像やファイルのパスの入力補完をしてくれるパッケージです。

maximize-panes

33_11

画面分割を利用しているときに一つの分割画面をショートカットで最大化することができるパッケージです。もう一度ショートカットを押すと元の状態に戻るという一時的に利用できるので便利です!

simple-drag-drop-text

33_12

選択したテキストをドラッグ&ドロップで移動することができるパッケージです。地味ですが何気に使うことがあるので入れておくといいです!

split-diff

2つのファイルの違っている部分を比較してくれるパッケージです。

Project Manager

33_14

プロジェクトを複数登録しておいて切り替えて表示することができるパッケージです。

browser-plus

Atom自体でGoogleChromeを表示してくれるパッケージです。開発ツールも利用できるのが非常に便利です!

terminal-plus

33_16

Atomの画面でターミナルを利用できるようにするパッケージです。私はSass+Compassのコンパイルが必要なコーディングの時などに使っています!

AtomはSublimeTextに比べると起動時など動作がやや重たく感じることがあります。便利なパッケージが他にもたくさんありますが、あまりパッケージを入れすぎてしまうとさらに動作が遅くなってしまうこともあると思うので必要なパッケージを厳選して快適なAtomライフをおくりましょう!

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend