【Atomユーザー必見】WEBデザイナーおすすめのプラグイン | 株式会社Esolab
logo

ARTICLE

記事ページ

記事ページ

【Atomユーザー必見】WEBデザイナーおすすめのプラグイン

TECH

みなさんWEB開発をする際はどのエディターを使用していますか?私はAtomを使って開発をしています。そこで今回はAtomユーザーに向けて実際に私が開発する際に使用しているプラグインを9つ紹介したいと思います。

目次

  1. おすすめのプラグイン
  2.       

            

    • japanese-menu
    •       

    • file-icons
    •       

    • minimap
    •       

    • color-picker
    •       

    • pigments
    •       

    • highlight-column
    •       

    • selection-highlight
    •       

    • emmet
    •       

  3. まとめ

おすすめのプラグイン

japanese-menu

URL:https://atom.io/packages/japanese-menu

japanese-menuはAtomを日本語化するプラグインです。インストールした時は英語になっているかと思いますが、このプラグインでAtomを日本語化することができます。

file-icons

URL:https://atom.io/packages/file-icons

file-iconsはファイルのアイコンをカラフルにしてくれるプラグインです。ファイルの拡張子ごとにアイコンがつくので、視覚的に見やすくなります。

minimap

URL:https://atom.io/packages/minimap

minimapは画面の右に今開いているファイルを全画面に表示してくれるプラグインです。構築が進むと記述するコードの量も増えてきます。いちいちスクロールするのが大変ですが、minimapを使うと任意に位置まですぐにスクロールすることができます。

color-picker

URL:https://atom.io/packages/color-picker

color-pickerは色をエディター上で視覚的に選ぶことができます。通常色は色コードで記述しますが、color-pickerを使うことでパネル上で色を選択することができます。ショートカットは「Command + Shift + C」です。

pigments

URL:https://atom.io/packages/pigments

pigmentsは色コードに色をつけてくれるプラグインです。視覚的に色を見ることができるのでその色コードがどんな色なのか一目でわかります。

highlight-column

URL:https://atom.io/packages/highlight-column

highlight-columnは字下げ(インデント)をわかりやすくしてくれるプラグインです。しっかりとインデントすることで綺麗なコードになります。コードは誰が見てもわかるように綺麗に書くようにしましょう。

selection-highlight

URL:https://atom.io/packages/selection-highlight

selection-highlightでは選択したテキストをダブルクリックするとその単語がハイライトされるプラグインです。

emmet

URL:https://atom.io/packages/emmet

emmetはコードを書く上で覚えておくと開発速度がかなり上がります。例えば.headerと入力すると

に変換されます。またpタグでクラス名をtextとしたい場合はp.textで変換されます。

emmetは「Enter」の代わりに「Command + Shift + E」を押すと変換されます。これを覚えるとタイピングをする回数がへるので、タイピングミスなどの防止にも繋がります。

まとめ

いかがだったでしょうか?今回紹介したプラグインは私が現場で使っているものなので、実用性はかなりあるかと思います。これらのプラグインを導入して、素早い開発をできるようになりましょう。

弊社では、そうしたツールを活かして、素早い構築を心がけています。短期間で高品質なホームページをお求めの方はぜひ、弊社Esolabにご依頼ください。

この記事を書いた人

黒坂天翔

開発部 フロントエンジニア

アーカイブ

カテゴリー

  • TECH (35)
  • DESIGN (23)
  • OTHER (17)
  • MARKETING (6)
  • SEO (5)
  • お問い合わせ

    株式会社EsolabではWEBサイトやECサイトの運営など多岐にわたり事業を展開しています。
    ホームページや自社ECサイトをお求めの方は一度お問い合わせください。

    お問い合わせ