開発用テキストエディタ Atom のインストールとおすすめ初期設定

ここでは、HTMLやCSSを編集するのに便利なテキストエディタ「Atom」の紹介とインストール手順などを説明していきます。
 

HTMLやCSSを勉強するためにAtomというテキストエディタを導入しようと思っています。
 

AtomはHTMLやCSSなどのコードを効率化よく記述するための有名なテキストエディタで、補完機能や文法チェックなど様々な機能をがあります。
ここではインストール方法とオススメの初期設定を紹介していきますね。
 
 

 

【メルマガ登録はこちら!!】
HTML・CSS・お役立ち情報をGET

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト

 

Atomとは

Atomとは、HTMLやCSSおよびWeb系のプログラミング言語全般の中身を閲覧したり編集したりするための開発用テキストエディタです。
 

プログラム開発のためのサービス「GitHub」で開発され、2015年6月リリースされました。
 

■Atomで開いたHTMLのソースコード画面サンプル
HTML入門 基本構造 ソース
 

テキストを開くソフトだと他にメモ帳やさくらエディタなどありますが、これらとどう違うんでしょうか??
 

基本的にメモ帳などと同じテキストを開くためのツールなのですが、メモ帳にはない予測変換機能や誤字チェック機能など、多くの機能が盛り込まれています。
 

■AtomによるHTMLコード作成の例。一から記述しなくても予測変換してHTMLコードが作成されます。


 
 

このようなツールを開発エディタと呼んだりします。
Atomの他にも、Sublimetext(サブライムテキスト)やBracket(ブラケット)などいくつかのテキストエディタがあります。
 

今回は、「Atom」のインストール方法とオススメの初期設定を紹介していきます。
 
 

Atomのインストールと設定(Mac版)

 

インストール手順

下記のサイトにアクセスします。
 

Atom 公式サイト
 

以下、MACの場合の手順です。Windows版はページ下部の方に記述しています。

下記ページよりAtomをダウンロードします。
開発エディタ Atom トップページ
 

ダウンロードしたzipファイルを解凍します。
開発エディタ Atom zipファイル

Atom.appを起動します。
開発エディタ Atom 起動
 

Atomエディタを開きます。
開発エディタ Atom 開く
 

ここで、HTMLやCSSなどのコードを記述していきます。
 

Atomのインストールは以上で完了です。
 
 

Atomのおすすめ初期設定

初期設定はやや使いづらいので、ここでは簡単なオススメ初期設定をご紹介します。
 

まずAtom起動時に表示される不要な画面が出ないように下記の設定をしておきましょう。
 

■WelCome Guideのチェックを外す

 

■telemetry consentで「I Dont Want to Help」を選択する

 
 

またAtomには便利な追加パッケージがたくさんあります。ここでは、HTMLの文法をチェックする便利なツールを紹介します。
 

環境設定(Preferences)を開きます。
開発エディタ Atom 環境設定
 

インストールを選択します。
開発エディタ Atom 環境設定>インストール
 

「linter」と入力して、「packages」を押下します。表示されたツール「linter」をインストールします。
開発エディタ Atom linter
 

追加で下記のようなダイアログが表示されたら、Yesでインストールしていくとよいでしょう。
開発エディタ Atom linter
 

次に、「linter-htmlhint」と入力して、「packages」を押下します。表示されたツール「linter-htmlhint」をインストールします。
開発エディタ Atom linterhtml
 

インストール後、文法エラーがあると該当箇所赤い●が表示されるようになります。
文法エラーがあると該当箇所赤い●が表示されるようになります。
 

(あくまで、機械的にわかる範囲でのチェックに限られれます。全てのエラーが●で表示されるわけではないのでご注意ください。)
 

つぎに全角スペースを表示しれくれるプラグイン「show ideographic space」もインストールしておきましょう。
show ideographic spaceのインストール
 

インストール後に全角スペースが下記のようにわかるようになります。
show-ideographic-spaceで全角スペースが□と表示されるようになった
 

つぎに、エディターの設定もしておきます。再度、環境設定(Preferences)を開きます。
開発エディタ Atom 環境設定
 

Editorを選択します。
Atom 設定 Editor
 

Show Indent GuideSoft Wrapにチェックを入れます。
Atom 設定 Editor  Show Indent GuideとSoft Wrapをオンにする 
 

(※)上記設定により、インデントで縦線が表示されて、折り返しが有効になります。
Atom 設定後の画面
 

以上でAtomのインストールは完了です。
 
 

 

Atomのインストールと設定(Windows版)

下記のサイトにアクセスします。
 

インストール手順

Atom 公式サイト
 

以下、Windowsの場合の手順です。OSバージョンなどにより若干表記が異なりますので、適選読み替えてすすめていってください。
 

下記ページよりAtomをダウンロードします。
開発エディタ Atom トップページ Windows版
 

ダウンロードしたsetup.exeファイルを実行してインストールします。
開発エディタ Atom Setup.exe
 

Atomを起動します。
 

Atomエディタを開きます。
開発エディタ Atom エディター
 
 

Atomのおすすめ初期設定

初期設定はやや使いづらいので、ここでは簡単なオススメ初期設定をご紹介します。
 

まずAtom起動時に表示される不要な画面が出ないように下記の設定をしておきましょう。
 

■WelCome Guideのチェックを外す

 

■telemetry consentで「I Dont Want to Help」を選択する

 

つぎに環境設定(settings)を開きます。
開発エディタ Atom 環境設定
 

インストールを選択します。
開発エディタ Atom 環境設定  インストール 
 

「linter」と入力して、「packages」を押下します。表示されたツール「linter」をインストールします。
開発エディタ Atom linter インストール 
 

追加で下記のようなダイアログが表示されたら、Yesでインストールしていきましょう。
開発エディタ Atom linter
 

次に、「linter-htmlhint」と入力して、「packages」を押下します。表示されたツール「linter-htmlhint」をインストールします。
開発エディタ Atom linter-htmlhint インストール 
 

インストール後、文法エラーがあると該当箇所赤い●が表示されるようになります。
文法エラーがあると該当箇所赤い●が表示されるようになります。
 

(あくまで、機械的にわかる範囲でのチェックに限られれます。全てのエラーが●で表示されるわけではないのでご注意ください。)
 

最後に全角スペースを表示しれくれるプラグイン「show ideographic space」もインストールしておきましょう。

 

インストール後に全角スペースが下記のようにわかるようになります。
show-ideographic-spaceで全角スペースが□と表示されるようになった
 

つぎに、エディターの設定もしておきます。再度、環境設定(Preferences)を開きます。
開発エディタ Atom 環境設定
 

Editorを選択します。
Atom 設定 Editor
 

Show Indent GuideとSoft Wrapにチェックを入れます。
Atom 設定 Editor  Show Indent GuideとSoft Wrapをオンにする 
 

(※)上記設定により、インデントで縦線が表示されて、折り返しが有効になります。
Atom 設定後の画面
 

以上でAtomのインストールは完了です。
 
 

まとめ

今回は、HTMLやCSSを扱う上で便利なツール「Atom(アトム)」について紹介しました。
 

Atomを使うことで、メモ帳にはない予測変換機能や誤字チェック機能などの便利な機能を使うことができます。
 

高機能なぶん、慣れていないうちは少し画面に戸惑うかもしれませんが、操作方法は限られているので、少しずつ触っていくと良いと思います。
 

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

今回は、以上になります。最後までご覧いただきありがとうございました。
 

【メルマガ登録はこちら!!】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室

自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

 

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ