コンテンツへスキップ
ホーム > Atomの導入

Atomの導入

  • Web

Atom

Sublime Text を使ってましたが、ドットインストールさんの講座をうけたことで浮気気味にAtomを使い始めてます。
今回は導入したパッケージ・テーマなどを列挙します。

公式サイト

ダウンロードはこちらから。

インストールしたパッケージ

Autocomplete Plus
コードの補完機能の強化。

Japanese Wrap
日本語の折り返しを正常に表示してくれます。

Color Picker
CSSなどの色指定で、表示されるカラーピッカーから色を持ってくることができます。

File Icons
ファイルの言語、種類ごとにアイコンを振ってくれるので、見た目が可愛らしくわかりやすくなります。

Emmet
Emmetが使えるようになります。

Linter
コードのエラーチェック(バリデート)をしてくれるパッケージ。
jshint などの追加パッケージを入れることで、その言語ごとに対応させることが可能です。
その辺りの詳細についてはパッケージ詳細ページのAvailable lintersを参照ください。

自分が入れたLinter追加パッケージ

・Linter Jshint
・Linter Coffeelint
・Linter Rubocop
・Linter Php
・Linter Csslint
・Linter Scss Lint
・Linter Bootlint

テーマの変更

「setting > Theme」から変更することができます。
自分が使用するにあたって変更したテーマは以下。

UI Theme: Atom Dark
Syntax Theme: Monokai

UI ThemeSeti Ui を使おうと思いましたが、アイコンやタブのレイアウトが崩れるのでデフォルトの Atom Dark に戻しました。

おまけ:Emmetの ! コンパイルについて

Sublime Textでもありましたが、Emmetで ! をコンパイルした際、<html lang=“en”>となっている部分。これを ”ja” に直したりしてみました。
⌘ + ,からsetting画面を開き、Emmetパッケージを導入済み場合は画面左下からパッケージを探し出します。

Emmetの設定画面が出るので、詳細文下の、Open in Atomを選択し、パッケージの設定フォルダを開きます。ここから⌘ + Shift + fでフォルダ全体から”en”を探し出します。

"Open in Atom" をクリック

“Open in Atom” をクリック

"snippets.json" をダブルクリック

“snippets.json” をダブルクリック

数個のファイルが見つかった中で、snippets.jsonを開き、”en”の部分を”ja”と変更して、Atomを再起動します。
そうするとlang=“ja”に変更されているかと思います。

Sublime Textと違ってユーザファイルで別に設定するとかではないので、このへんは自己責任でお願いします。

使ってみた感想

今のところコーディングについては当たり障りなく使えていますが、補完まわりがまだSublime Textほどまでいかない感じなので、調べながら追いつくところまでカスタムできたらなーと思います。

ちょっとBootlintがうるさい。

ちょっとBootlintがうるさい。

以上です。

 


参考

Atom

Atom入門 (全12回) – プログラミングならドットインストール

タグ:
%d人のブロガーが「いいね」をつけました。