1. トップページ
  2. コラム
  3. 無料テキストエディタAtomの便利パッケージ5選

無料テキストエディタAtomの便利パッケージ5選

こんにちは。

暑い日が続いてますが熱中症には気を付けてください。
私は仕事中こまめに水分と塩分のとれる飴をとっています。
体を壊さずに夏を乗り切りましょう!

さて、話は変わりますが皆さんホームページ制作時どんなテキストエディタを使っているのでしょうか?
Dreamweaver、WebStorm、Atom… たくさんのエディタがありますね。
初心者の方は無料のテキストエディタを使用している方がほとんどだと思います、
今は無料のエディタでもかなり高機能なものもあり効率的にコーディングすることができますね。

私は無料エディタはAtomを使っていますが、なんといってもたくさんのパッケージプラグインがありすごく便利!
今回は無料で高機能なAtomの便利なパッケージをご紹介したいと思います。

指定色が一目で分かるパッケージ

pigments
カラーコードに色を付けてくれるパッケージです。
どのタグにどんな色を指定したのかがすぐ分かります。
指定した色コードと同じ色が背景色に設定されるといった感じです。
一目で分かるからすごく便利です!

ソースコードを自動的に整形してくれる

atom-beautify
ファイルの種類に応じて、字下げを自動的に行ってくれます。
ショートカット (Ctrl + Alt + B) で自動的に整形してくれるので便利!
きれいなソースの方が読みやすく修正もしやすい!後々手を加える時にもやってて良かったと思います。

HTMLを素早くかけるパッケージ

emmet
「#header」と入力すると、に変換され、
「#header>h1」と入力すると、に変換されるという便利な機能です。
単純にHTMLのコーディングがはかどります。
打つ文字が少ないと、単純に時間が短縮されますね!

ソースの全体図を表示するパッケージ

minimap
ソースの全体図を画面内に表示してくれるパッケージです。
ソースが長文になるほど自分が今どのあたりにいるかわからなくなりますよね…
迷子になるのを防ぐため、長文なソースもあまりストレスを感じなくなります。

コーディングスタイルを統一するパッケージ

editorconfig
EditorConfigは、開発者がさまざまなエディタとIDE間で一貫したコーディングスタイルを定義し、
維持するのに役立ちます。
複数人で作業していると、インデントがタブだったりスペースだったり、インデント数が2つの人もいれば4つの人がいてプロジェクトごとに毎回エディタの設定を変えるのは不便ですが、EditorConfigに対応したエディタを開くだけでコーディングスタイルと整えてくれます。

ということでざっと5つのパッケージをご紹介致しました。
まだまだたくさん便利なパッケージはありますが後々更新していきます。

コーディングを行う上でやはり時間の短縮、効率化はとても重要なことです。
その分品質をあげることができ、またミスをなくすことにもつながってきます。
できるだけ作業の個数を減らし確認や調整に時間を使いクライアントの満足のいくサイトを創っていきたいですね。

暑い日が続いているので熱中症対策です。
熱中症のときには、水分・塩分補給がポイント。水分だけでなく塩分も補給することで、
症状の改善が期待できます。
塩分の補給には、塩分を含む飴・タブレットや梅干しがおすすめです。
長時間のスポーツなどの際は塩分に加え糖分の入ったスポーツドリンクがおすすめです。

体を壊さず頑張りましょう!

ホームページ・ECサイト運用に関する情報をメルマガで配信中!
WEB担当者様向けのお役立ち情報を無料でご案内しております。
登録は下記フォームから!


この記事を書いた人

デザイントランスメディア

Creative & Development Division