【テキストエディタ】Atomのおすすめ機能3選について

  • URLをコピーしました!

当記事では、テキストエディタAtomのおすすめ機能を3つ紹介します。

特に初心者の方で、これからAtomを使用してHTMLやCSSをコーディングする方には、とても便利な機能となっております。

今回ご紹介するパッケージは、Atomユーザ必須パッケージと言っても過言ではないので、是非使ってみてください!

目次

1.Atomエディタの入手・インストール

①Atomエディタをダウンロード

ちらの公式サイトからダウンロードしてください。

画面の真ん中右側にダウンロードボタンがありますので、クリックします。

ATOM公式サイトの画像

②インストール作業

ATOMのインストール中の画面
ATOMのインストール中の画面

ダウンロードが完了したら、ダウンロードされたexeを実行しましょう。(AtomSetup-x64 (1).exe)

インストールが完了すると、ATOMエディタが自動的に起動します。

初回起動時は、下記のWelcome画面や設定確認画面が表示されることがありますが、チェックボックスをはずせば次回からは表示されません。

Atom初期設定画面

Atomおすすめパッケージ3選

①japanese-menu を使って、Atomを日本語仕様にしよう!

インストール直後のAtomは英語仕様となっています。英語仕様だとエディタが使いづらいという方に、是非おすすめなのが、「japanese-menu」というパッケージです。「japanese-menu」をインストールすることでAtomを日本語仕様にすることができます。では早速、パッケージのインストール手順をご説明します。

メニューバーより、「File」をクリックしてください。

Atomのパッケージインストールの画面

すると、パッケージをインストールする画面が起動します。(下記画面)

Atomパッケージをインストール画面の画像

下記図のとおり、検索窓にパッケージ名「japanese-menu」と入力して、「install」ボタンをクリックするとパッケージがインストールされます。簡単ですね。

japanese-menuのインストール画面

インストールが完了すると、すぐにAtomが日本語仕様に早変わり!やはり日本語のほうが見やすいですね。

Atom日本語化の画像

②atom-html-previw を使って、プレビュー 機能を追加しよう!

2つ目のパッケージは、HTMLをコーディングする方に、是非おすすめです。

「atom-html-previw」というパッケージをインストールすると、コーディングと同時に入力したHTMLがブラウザでどのように表示されるかが一目瞭然でわかるんです!

通常だと、コーディングした後に、ブラウザを起動して、HTMLファイルを開いて確認する必要があります。しかし、atom-html-previwをインストールすると、ブラウザとAtomをいったりきたりすることなく、即座にAtom上のプレビューで確認することができるんです!

では「atom-html-previw」というパッケージをインストールしてみましょう。

ファイル(F) ⇒ 「設定」 をクリックし、パッケージのインストール画面を起動します。

検索窓に「atom-html-previw」を入力して、パッケージをインストールしましょう。

atom-html-previewのパッケージインストール画面の画像

インストールが完了したら、実際に「atom-html-package」パッケージを使用してみましょう。test.htmlを新規でファイル作成して準備してください。test.htmlには、定番の「Hello World!」とコーディングしてみましょう。

サンプルHTMLコーディングの画像

Hello World!」のコーディングが終わったら、Atom上で、右クリックしてみてください。メニューが表示されますので、そこから、「Preview HTML」をクリックしてください。

すると、画面右側にHTMLが即座にプレビューで表示されます。

HTML-Hello-Worldのプレビュー画像


ブラウザとAtomをいったりきたりする必要もないため、コーディング直後のHTMLの状態を確認するのにとても便利な機能です!

③autoclose-html を使って、作業速度を倍にしよう!

最後におすすめのパッケージが「autoclose-html 」というパッケージです。

HTMLの言語特性として、コードを書くときは、開始タグと終了タグを必ずセットで書く必要があります。

「autoclose-html 」をインストールすると、「開始タグ」を入力すると、同時に「終了タグ」を自動で表示してくれるんです!

では「autoclose-html 」パッケージをインストールしてみましょう。

auto-close-htmlパッケージのインストール画像

インストールが完了しましたら、HTMLファイルを作成して、Atomで開いてみましょう。

ここでは、「test.html」を事例にコーディングしてみます。

最初に h1 タグを記述します。

autoclose-htmlの画像①

<h1 と記述して、 >  でタグを閉じると・・・

autoclose-htmlの画像②

なんと、終了タグの </h1> を自動表示してくれました!

あとは、<h1>と</h1>タグのあいだに、ブラウザに表示する文字を記述すればOK。

「終了タグ」の記述漏れを防止することが出来ますし、

何より、開始タグだけ書けばいいので作業速度も倍速ですね。

まとめ

Atomエディタのパッケージ機能まとめ

今回は、Atomの便利機能を紹介しました。

Atomには、紹介しきれないほどの便利な機能がまだまだたくさんあります。

エディターが使いやすければ使いやすいほどコーディングの効率が

アップすること間違いなしです。


徐々に慣れてきたら、この記事で紹介した以外にも、

便利な機能を探してみてくださいね。

今回はHTMLを例にしましたが、Atomは様々な言語を

サポートしていますので、是非みなさんも勉強されている

言語に合わせていろいろ使ってみてください!

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次