サイト制作に関するメモ書き

HOME > その他 > Atomのパッケージを使ってみる

Atomのパッケージを使ってみる

Atomのパッケージで便利そうなものをいくつか試してみます。

インストール方法

Atomを開いて、ファイル > 環境設定 を選択します。

左メニューの一番下の「インストール」をクリックします。

インストールしたいパッケージ名を検索ボックスに入力して、「パッケージ」をクリックします。

検索結果に表示されるので、インストールをクリックします。

インストール完了すればOKです。

 

パッケージ一覧

共通

file-icons
ファイルの種類ごとにアイコンを表示する。

japanese-menu
メニューを日本語にする。
show-ideographic-space
全角スペースを表示する。

highlight-selected
選択した単語がファイル内にある場合にハイライトする。

Sublime-Style-Column-Selection
Altを押しながらドラッグで矩形選択ができる。

コーディング関連

emmet
Emmetの記法が使えるようになる。
autocomplete-paths
パスの自動補完。

pigments
CSSで色指定している部分の背景にその色を表示したり、色の形式の変換をしたりできる。

色を指定している場合の背景。

色の形式を変更する場合、右クリックからPigments > Convert to XXX を選択します。

rgba形式に変換できました。

docblockr
ドキュメントブロックの自動補完。
「/**」を入力してエンターを押す。
wordpress-api
WordPress 関数の入力補完。

minimap

minimap
コードの全体図を表示する。

minimap-autohide
minimapを自動で表示・非表示にする。
minimap-highlight-selected
highlight-selectedのハイライトをminimapにも表示する。

git

git-time-machine
Gitのログを表示する。
上部メニューのパッケージ > git-time-machine > Toggle for current file から表示切り替え。

blame
Gitのblameを表示する。
上部メニューのPackages > Blame > Toggle から表示切り替え。

入力補完

autocomplete-sass
Sassの入力補完。
javascript-snippets
JavaScriptの入力補完。
jquery-snippets
jQueryの入力補完。

linter

linter
linterのベース。
言語毎に別途パッケージが必要。
linter-ui-default
linterのエラーを表示する。
linter-htmlhint
HTMLの文法をチェックする。
linter-csslint
CSSの文法をチェックする。
linter-jscs
JavaScriptの文法をチェックする。
linter-eslint
ECMAScriptの文法をチェックする。
linter-sass-lint
Sassの文法をチェックする。
linter-php
PHPの文法をチェックする。

linter-phpのインストール後、PHPのパスを変更する必要があります。
ファイル > 環境設定 の画面で、左メニューにあるPackagesを選択して、linter-phpを探します。

PHP Executable PathにPHPの実行ファイルのパスを追加します。
今回はXAMPPを使用しているので、「C:\xampp\php\php.exe」としました。

PHPファイルで間違った文法を記述してみて、エラーが表示されたらOKです。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP