エディタ Atom の便利なおすすめパッケージ一覧

Atom

プログラミング、WEB制作や文書作成に、使いやすいフリーソフトのエディタ　Atom

■ bracket-matcher

対応する括弧やHTMLタグを光らせたり、ctrl + M で対応する括弧に移動したり、cmd + ctrl + M で対応する括弧内をすべて選択したりできます。

■ autocomplete-paths

ローカルのファイル名の入力補完をしてくれます。

■ atom-html-preview

HTMLファイルを編集中にライブプレビューします。 ctrl + shift + H で起動します。
https://atom.io/packages/atom-html-preview

■ pigments

CSSカラーコードの背景色をその色で表示します。

■ autoprefixer

CSSのベンダープレフィックスを自動で追加・削除してくれます。

■ EditorConfig

「プロジェクト」「拡張子」ごとにタブ幅や後ろの空白行を制御する .editorconfig に対応できるようになります。

■highlight-selected

ある単語を選択すると同じ単語をハイライト表示します。　

■ script

ほとんどのプログラミング言語を即座に実行します。（セーブも必要なし）
画面右下のモードを実行したい言語に設定して cmd + A で実行します。

■ show-ideographic-space

全角スペースを表示します。

■ Sublime-Style-Column-Selection

option

を押しながらドラッグで矩形選択ができます。

■ atom-alignment

https://atom.io/packages/atom-alignment
複数行を選択して ctrl + cmd + A を押すと = の位置を揃えてくれます。

var english  = 'test';
var japanese = 'テスト';

■ tablr

ATOMでCSVファイルをエクセルのように編集できる。便利です。

■ linter

https://atom.io/packages/linter
プログラムのエラーをリアルタイムで表示します。プログラムごとに以下のパッケージを追加でインストールします。

linter-jshint（JavaScript , JSON 用）
linter-php （PHP用）
linter-ruby （Ruby用）
linter-csslint （CSS用）
linter-htmhlint （HTML用）

■ atom-beautify

https://atom.io/packages/atom-beautify
HTMLやJavaScriptからPHP,Rubyなどほとんどのソースをきれいに整形できます。

ctrl + option + b
メニューの【Packages】>【Atom Beautify】>【Beautify】

PHPでコード整形をするには php-cs-fixer.phar http://cs.sensiolabs.org が必要です。

■ symbols-tree-view

プログラムソース記述時に関数やメソッド、変数の一覧を表示します。

ctrl + option + o

■ minimap

画面右にファイル全体のミニマップを表示する

■ minimap-highlight-selected

minimapに「highlight-selected」結果を表示する

■ minimap-bookmarks

minimapにブックマークをを表示する

■ minimap-find-and-replace

minimapに検索結果を表示する

■ minimap-autohide

スクロール時にのみminimapを表示させる

■ tag

https://atom.io/packages/tag

HTML入力時に <div> を入力した後 < を入力したタイミングで自動でタグを閉じてくれます。

■ emmet

https://atom.io/packages/emmet
HTML入力支援

div>div

と記述して TAB キーを押すと

<div>
  <div></div>
</div>

に展開されます。
http://docs.emmet.io/cheat-sheet/

他にも以下のようなショートカットがあります。

Command	Darwin	Linux/Windows
選択した複数の行を1行にまとめる	`shift` + `⌘` + `m`	`ctrl` + `shift` + `m`
対応するタグに移動する	`ctrl` + `alt` + `j`	`ctrl` + `alt` + `j`
Expand Abbreviation	`tab` or `shift` + `⌘` + `e`	`tab` or `ctrl` + `e`
Expand Abbreviation (interactive)	`alt` + `⌘` + `enter`	`ctrl` + `alt` + `enter`
Wrap with Abbreviation	`ctrl` + `w`	`ctrl` + `alt` + `w`
Balance (outward)	`ctrl` + `d`	`ctrl` + `,`
Balance (inward)	`alt` + `d`	`ctrl` + `shift` + `0`
Next Edit Point	`ctrl` + `→`	`ctrl` + `alt` + `→`
Previous Edit Point	`ctrl` + `←`	`ctrl` + `alt` + `←`
Select Next Item	`ctrl` + `shift` + `→`	`ctrl` + `shift` + `.`
Select Previous Item	`ctrl` + `shift` + `←`	`ctrl` + `shift` + `,`
Toggle Comment	`⌘` + `/`	`ctrl` + `shift` + `/`
Split/Join Tag	`shift` + `⌘` + `j`	`ctrl` + `shift` + `
Remove Tag	`⌘` + `'`	`ctrl` + `shift` + `;`
Evaluate Math Expression	`shift` + `⌘` + `y`	`ctrl` + `shift` + `y`
Increment Number by 0.1	`ctrl` + `alt` + `↑`	`alt` + `↑`
Decrement Number by 0.1	`ctrl` + `alt` + `↓`	`alt` + `↓`
Increment Number by 1	`ctrl` + `alt` + `⌘` + `↑`	`ctrl` + `↑`
Decrement Number by 1	`ctrl` + `alt` + `⌘` + `↓`	`ctrl` + `↓`
Increment Number by 10	`ctrl` + `alt` + `⌘` + `shift` + `↑`	`shift` + `alt` + `↑`
Decrement Number by 10	`ctrl` + `alt` + `⌘` + `shift` + `↓`	`shift` + `alt` + `↓`
Reflect CSS value	`shift` + `⌘` + `r`	`ctrl` + `shift` + `r`
Update Image Size	`ctrl` + `i`	`ctrl` + `u`
Encode/Decode image to data:URL	`ctrl` + `shift` + `i`	`ctrl` + `'`
Update Tag	`ctrl` + `shift` + `u`	`ctrl` + `shift` + `'`