Atom

テキストエディタ「Atom」のインストール・日本語化と設定しておくと便利な機能

 

テキストエディタ「Atom」。

パッケージと呼ばれるものをダウンロード・インストールすることで

機能を拡張できるテキストエディタです。

Atomダウンロードへ

今回は入れておくと便利なパッケージを紹介していきます。

日本語化パッケージ「japanese-menu」のインストール方法

まずはメニューの中にある「File」から「setting」を選びます。

 

settingタブが現れるのでその中の「+install」をクリックします。

 

次に「sarch packages」と書かれたボックス内に「japanese-menu」と書き込むと

日本語化するパッケージ「japanese-menu」が出てくるので「Install」をクリックします。

 

すると英語表記が日本語表記に変わります、これでインストール終了です。

 

また、タブはカーソルを合わせた時に出る「×ボタン」で消すことができます。

 

この設定タブは「ファイル」内の「環境設定」からいつでも開くことができます。

入れておくと便利なパッケージ

 auto-encoding

文字コードを自動判別してくれるパッケージです。

デフォルトに設定されている文字コードだと日本語は新しいエディタと相性が悪いため

このパッケージを導入することで以前に作成したファイルの日本語が

文字化けして表示されてしまうことを防いでくれます。

autocomplete-paths

ファイルパス入力時に相対ファイルパスを入力補完してくれるパッケージです。

HTMLでファイルの指定を行うときに便利です。

color-picker

CSSでは色をコードで表現するため使いたい色を探し出すのに苦労します。

そこでAtomの追加パッケージ「color-picker」をインストールします。

インストールし終わったらテキストエディタ内で右クリックします。

するとメニュー欄に「color-picker」が追加されているので選択します。
ここで使いたい色を選ぶとその色のコードが自動で挿入されるようになります。
まずは下のボックス一覧から「HEX」を選択して赤を使ってみましょう。
使いたい色を選んだらEnterキーでその色を選択します。
すると
先程選んだ赤色のコードが自動で挿入されます。
色の指定は使うことが多いのでインストールしておくと便利です。

pigments

カラーコードに色をつけるパッケージです。

「color-picker」で先ほど付けたカラーコードを

このパッケージをインストール後見てみます。

色の指定場所がその色で囲まれています。

このようにどのタグにどんな色を指定したのかすぐに分かるので

デザインの編集に便利です。