初心者でもHTML/CSS/JavaScriptを正しい構文で書ける！フロントエンドエンジニアのためのATOM導入マニュアル

[PR]

フロントエンドエンジニアのための、GitHub社製エディタ「ATOM」導入マニュアルです。

ATOM本体のインストールから、主にHTML/CSS/JavaScriptを扱うフロントエンドエンジニア向けの、おすすめPackageの導入までまとめています。

本記事に沿ってATOMを導入するメリットは以下です。

  • HTML構文チェック
  • CSS構文リアルタイムチェック
  • JavaScript構文リアルタイムチェック
  • 全角スペース検知

正しい構文で書けること、間違いやすい全角/半角スペースを検知しやすいこと、を主な目的としています。
趣味でコーディングされる方はもちろん、仕事でコーディングされる方にもおすすめです。

尚、今まで「Sublime Text」を使ってきており、「Sublime Text」の使いやすさは体に染み付いているので、少し「Sublime Text」っぽくカスタマイズしています。
「Sublime Text」からの乗り換えにも適した内容かと思います。

ATOMのインストール

ATOMをインストールします。
以下URLにアクセスしてご自分に適した環境のものをインストールしてください。
Atom

インストールして起動するとこのような画面が表示されます。

次のステップのために、一旦ATOMを終了します。

Node.jsのインストール {#nodejs_install}

Node.jsをインストールします。
各言語の構文エラーをチェックするPackageに必要となるためです。

既にインストール済みの場合は、スキップしてください。
または、古ければ最新版にアップデートするのも良いと思います。

以下URLにアクセスしてご自分に適した環境のものをインストールしてください。
Node.js 日本ユーザーグループ

僕の場合はMacなのでこのような流れでインストールしました。

Node.jsが正しくインストールされているか確認します

Macであればターミナルを起動、Windowsであればコマンドプロンプトを起動します。

「node -v」とタイプして実行し、「vX.XX.XX」と表示されたら問題ありません。
※「X」は数字

ついでに、npmが正しくインストールされているか確認します。
「npm -v」とタイプして実行し、「X.XX.XX」と表示されたら問題ありません。
※「X」は数字

「exit」とタイプして実行し、ターミナルを終了します。

各種Linterのインストール

構文エラーチェックを動作させるため、各言語のLinterをnpmでインストールします。
Macであればターミナルを起動、Windowsであれば管理者としてコマンドプロンプトを起動します。

CSSLintのインストール

CSS構文エラーチェックのためにCSSLintをインストールします。
「npm install -g csslint」とタイプして実行します。

ERR!と出るようであれば、管理者としてインストールします。
「sudo npm install -g csslint」とタイプして実行します。

JSHintのインストール

JavaScript構文エラーチェックのためにJSHintをインストールします。
「npm install -g jshint」とタイプして実行します。

ERR!と出るようであれば、管理者としてインストールします。
「sudo npm install -g jshint」とタイプして実行します。

必要なLinterのインストールが終わったら、「exit」とタイプして実行し、ターミナルまたはコマンドプロンプトを終了します。

各種Packageのインストール

僕の考えるフロントエンドエンジニア向けのおすすめPackageをインストールします。
ただし、余計なものをなるべく入れたくないので、最低限必要なものとなります。

Atom > Preference をクリックして、Settingを開きます。（Macの場合）

そして、Installをクリックします。

Packageを検索して、インストールします。

おすすめPackage一覧

パッケージ名概要
japanese-menuメニューバー、コンテキストメニュー、設定画面の日本語化
linter構文チェックに必要
linter-csslintCSS構文チェック用のLinter
※構文チェックはリアルタイム
linter-jshintJavaScript構文チェック用のLinter
※構文チェックはリアルタイム
linter-htmlhintHTML構文チェック用のLinter
※構文チェックは保存時
tagHTML/XMLの閉じタグ補完
trailing-spaces余分な半角スペースをハイライト表示
show-ideographic-space全角スペースをハイライト表示
※要カスタマイズ
highlight-selected同じ文字列（半角英数）をハイライト表示
minimapソースの全体像を表示
atom-beautify[Ctrl]+[Alt]+[B]で様々なソースコードを整形
※お好みで要カスタマイズ
file-iconsファイル言語に合わせたアイコン表示

環境設定

ATOMはデフォルトでも使いやすいエディタですが、より使いやすくカスタマイズします。
japanese-menuが導入済みを前提とし、設定画面が日本語化されているものとします。

ATOMの環境設定

Sublime Textっぽくなるよう環境設定をします。

Atom > 環境設定 をクリックして、設定を開きます。（Macの場合）

インデントガイドを表示オン
不可視文字を表示オン
ソフトラップオン
Ctrlスクロールでフォントサイズを変えるオン

保存時の自動削除無効化

ATOMにはデフォルトで以下の便利な機能がありますが、複数人で作業した場合など差分確認する際に不都合な時があります。

  • 最後の行以降に余分な空行があると自動で削除
  • 行末に余分な半角スペースがあると自動で削除

これらの機能を設定にて無効化します。

Atom > 環境設定 > パッケージ > Whitespace > 設定をクリックして、設定を開きます。（Macの場合）

Ensure Single Trailing Newlineオフ
Remove Trailing Whitespaceオフ

全角スペースのハイライト表示のスタイル調整

show-ideographic-spaceというパッケージによって、全角スペースのハイライト表示が可能となりますが、もっと視覚的に分かりやすくするため、スタイルを調整します。

Atom > スタイルシート… をクリックして、Your Stylesheetを開きます。（Macの場合）
以下コードを最下部に追加して保存します。

// show-ideographic-space用スタイル
atom-text-editor, atom-text-editor::shadow {
  .highlight.ideographic-space {
    .region:after {
      content: '　';
      background-color: @background-color-warning;
      border-radius: 2px;
    }
  }
}

content: ‘　‘; には何も指定していないように見えますが、「全角スペース」を指定しています。

まとめ

全部で大まかに5つのステップで、導入完了です。

  1. ATOMのインストール
  2. Node.jsのインストール
  3. 各種Linterのインストール
  4. 各種Packageのインストール
  5. 環境設定

ワンステップあたり10分程度なので、1時間もあれば導入できるかと思います。

パッケージに関しては、必要最低限なものを紹介しています。
便利なパッケージは山ほどあるので、タグを補完してくれる機能や構文エラーチェックにしても、僕がおすすめしたものより肌に合うものが他にもあると思います。
自分好みのエディタに育てるには手間がかかりますが、痒い所に手が届くエディタだと、作業効率がアップすること間違いなしです。

導入は簡単なので、ぜひ挑戦してみてください。

[PR]

コメント