Atom Editor をインストール
インストール環境
| macOS | High Sierra |
|---|---|
| プロセッサ | intel Core i5 |
| メモリ | 8GB |
インストールしたAtomのバージョン
1.27.0
インストール
ブラウザーより https://atom.io を開く Download ボタンをクリックするとダウンロードが開始されます。
解答された atomファイル をアプリケーションにドラッグアンドドロップし、移設します。
アプリケーションフォルダにある、 Atomファイル をクリックすると
“Atom”はインターネットからダウンロードされたアプリケーションです。開いてもよろしいですか？
というポップが表示されるので開くをクリックします。
Atomの日本語化
- Welcome Guideを表示します。
上部メニュー → Help → Welcome Guide
- Install Packagesを表示します。
Install a Package → Open Installer
の順にボタンをクリックします。
Search packagesというテキストボックスに Japanese と入れて Packagesボタンをクリックします。
Japanese-menu
を探し、 Install ボタンをクリックします。
半角スペース、タブの可視化
タブやスペース、改行などの見えない文字を記号として表示します。
Atom → 環境設定 → 設定タブ → エディタ設定
の順にクリックします。
エディタ設定を下にスクロールすると、
不可視文字を表示
という項目にチェック
インデントガイドを表示
エディタ内にインデントガイドを表示します。
不可視文字を表示の近くに
インデントガイドを表示
にチェック
Atomに慣れてきたらWelcomeタブを非表示
Show Welcome Guide When opening Atom
のチェックを外す
再表示したい場合はメニュー → ヘルプ → ウェルカムガイドをクリック
Show Welcome Guide When opening Atomのチェックを入れる
Telemetry Consentを非表示にする
- Telemetry Consent → Atomの状態を製作者に送って良いか同意を求める画面
To help improve Atom,you can anonymously send usage state to the team.
Atomを改善するために、匿名で使用状態をチームに送信することができます。
The date we send is minimal.
日々送るデータは最小です。
Broadly, we send things like startup time, session time and exception
概ね、起動時間、セッション時間、例外などを送信します・
never code or paths.
決して、コードや、パスは送信されません。
See the atom/metrics package for details on what date is sent.
送信する情報は、atom/metrics packageを参照してください。
No, I don't want to helpボタン
いいえ、私は情報を送信したくないです。
By opting out, your usage patterns will not be taken into account.
上記ボタンをクリックする事によって、あなたの情報は使用されません。
Yes, I want to help improve Atom ボタン
はい、私はAtomの改善に協力したいと思います。
You are helping us assess Atom's performance and understand usage patterns.
Atomのパフォーマンスを評価し、使用パターンを理解するのに役立っています。
再表示する方法はわかりませんでした、すみません。
私は、No, I don't want to helpボタンをクリックしています。
各パッケージを入れる
Atom → 環境設定 → install
パッケージのインストールの下のSearch Packagesに欲しいパッケージ名を入れます。
Packagesボタンをクリックします。
- 欲しいパッケージが表示されたら、欲しいパッケージを選択します。
Installボタンをクリックします。
パッケージ名をクリックすると使いかたが表示されます。
Project-manager
プロジェクト毎に管理する
プロジェクトの登録方法
ツリービューに登録したいフォルダを表示します。 一度atomエディターを閉じ、再度atomエディターを起動します。 何も表示していない状態(untitledのタブのみ)のatomエディターの状態で、編集したいファイルがあるディレクトリをatomにドラッグアンドドロップします。
command + shift + p でコマンドパレットを開きます。
「Project Manager」と入力すると、「:」のあとに 「Edit Project, Save Project, List Projects」が表示されるので、「Save Project」を実行します。
Save Project Project内容を入力して save ボタンをクリックして登録完了します。
Title タイトル名だけで大丈夫です。
プロジェクトを呼び出す
一度atomエディターを再起動させます。
conmand + control + p
「Project Manager」と入力します。
一覧からProject Manager:List Projectを選択します。
つくったprojectを選択します。
open-recent
直近で開いていたファイルを記憶します。
smart-tab-name
タブに表示されるファイル名にパスを表示します。
file-icons
各ファイルをプログラミングごとにアイコンを変更します。
auto-encoding
文字コードを自動的に判別します。
入力関係
tag
HTMLの閉じタグを自動で挿入してくれる </ まで入力するかoption + command + .
autocomplete-paths
ファイルのパスなどを自動補完します。
highlight-selected
一つの単語を選ぶとファイル中の同じ単語がハイライトする。
pigments
カラーコードをハイライトする。
css内で使用している全ての色を一覧表示できる cmd + shift + p でパレットを開いて pigments find color を実行
色変換 #からRGBAに変換する事ができる Cssを右クリック pigments convert to XXをクリック
show-ideographic-space
全角スペースのハイライトします。
autoprefixer
自動でベンダープレフィックスをつけてくれます。 command + shift + pでコマンドパレットを表示して autoprefixerキーボードよりタイプする。
atom-beautify
コードの整形 Ctrl + alt + b 右クリックでも
atom-csscomb
Cssのプロパティをソートする
右クリック
● atom-minify jsとかcssを圧縮してくれる Option + shift + M
登録しておいたスニペットを自動補完
css-snippets
cssの入力補完
javascript-snippets
JavaScriptの入力補完。
jquery-snippets
jQueryの構文補完
文法チェッカー
w3c-validation
linter
構文チェックのためのパッケージ
これに加えて各言語のlinterプラグインをインストール
linter needs to install dependenciesと表示されるので
linter-ui-default（linterのエラーを表示する）をインストールします。
Yesボタンをクリックします。
linter-jshint
javascriptの文法チェック
linter-htmlhint
HTMLの文法チェック
linter-sasss-lint
sassの文法チェック
Linter-csslint
cssの文法チェック
