AtomでWebコーディングするためにインストールしているパッケージ

2021/02/19

Web

B!

Webコーディングする際のエディタは主にAtomを使用しています。
インストールしているパッケージをどういう目的で入れているのか自分で忘れないように、ここに書いていこうと思います。

追加でインストールしたら追記していきます。

必須

japanese-menu

日本語化。
https://atom.io/packages/japanese-menu

sync-settings

設定をGitHub経由で同期。
https://atom.io/packages/sync-settings

外観

file-icons

タブなどにファイルアイコンを表示する。
https://atom.io/packages/file-icons

highlight-column

縦列をハイライト。
https://atom.io/packages/highlight-column

highlight-selected

選択した文字列をハイライト。
https://atom.io/packages/highlight-selected

show-ideographic-space

全角スペースを可視化。
https://atom.io/packages/show-ideographic-space

pigments

カラーコードに実際の色を表示。
16進⇔RGBaの変換などもできる。
https://atom.io/packages/pigments

整形

atom-beautify

インデントなど自動整形。
https://atom.io/packages/atom-beautify

atom-csscomb

CSSプロパティをソート。
https://atom.io/packages/atom-csscomb

プレビュー

atom-html-preview

簡易ブラウザプレビュー。
https://atom.io/packages/atom-html-preview

browser-plus

デベロッパーモードも使えるブラウザプレビュー。
https://atom.io/packages/browser-plus

補助

color-picker

カラーピッカーで視覚的に色を選べる。
https://atom.io/packages/color-picker

sublime-style-column-selection

テキストを矩形選択する。
https://atom.io/packages/sublime-style-column-selection

auto-encoding

自動文字コード判別。
Shift_JIS使用する案件も未だにあるのでそのとき用。UTF-8のみだったらインストールすると別コードで判定されてしまうときもあるので不要。
https://atom.io/packages/auto-encoding

sequential-number

マルチカーソルで連番を入力する。
https://atom.io/packages/sequential-number

補完

autocomplete-paths

ファイルパスをオートコンプリート。
https://atom.io/packages/autocomplete-paths

tag

自動で閉じタグを入力。
https://atom.io/packages/tag

文法チェック

w3c-validation

HTMLとCSSのバリデーションチェックを行う。
保存のタイミングでチェックしてくれるところが良く、linterではなくこちらを使っています。
https://atom.io/packages/w3c-validation

QooQ