Web制作環境を整える その8 – Web制作の効率化を目指そう

効率化を目指す

今回は Sublime Text 3 におけるWeb制作をさらに効率化するために役に立つパッケージの追加や、カスタマイズを書いていきます。

すでに Emmet と Sass の導入のおかげで、ヒラでCSSを書いていくよりも大幅にキータイプを減らせましたが、Sublime Text ならもっとやれます。

パッケージを追加する

Sublime Text では、便利なパッケージが多く存在しますので、積極的に利用していくことにします。

Package Control 公式

には、人気のパッケージランキングや新作がアナウンスされているので、暇なひとはチェックしておくといいでしょう。

Abacus
複数行にわたる定数・変数定義などを「=」の箇所で揃える自動成形パッケージです。Alignment というパッケージの方が人気ですけど、コマンドから使えなかったのでこっちを使っています。
All Autocomplete
自動補完機能を強化してくれます。自分で定義した定数・関数も補完候補に入れてくれるので便利です。
AutoFileName
imgタグなど、ファイルを指定する属性値を入力する時に活躍してくれるパッケージです。
Block Cursor Everywhere
Vintage で使用しているとカーソル位置が見えずらくなるので、このパッケージを入れると見やすくなります。
BracketHighlighter
対応するタグや引用符・括弧の位置を、行番号の左側にわかりやすく表示してくれるパッケージです。タグの表示がかわいいです。
Color Highlighter
CSSファイルなどの色指定箇所を、その色で表示してくれるパッケージ。SCSSで変数に格納しても対応してくれるので助かります。
jQuery
jQueryの補完候補を追加できます。
HTML5
HTML5の補完候補を追加できます。
Nettuts+ Fetch
ファイルやzipをリモートから取得して展開します。WordPress サイトを新しく立ち上げたり、いつも使うファイル・フォルダの構成をプロジェクトに取り込めます。
SFTP
Sublime Text 3 から直接FTPでサーバへアップロードまで出来ちゃいます。しかも自動化も出来る。有料パッケージですが、試用制限はありません。(確認メッセージはでます)
SideBarEnhancements
標準ではショボすぎるサイドバーの右クリックメニューを強化します。
SublimeLinter
構文チェックをリアルタイムで行い、エラー箇所をわかりやすく教えてくれます。よく怒られます。導入に少々手間取ったので、後ほど解説します。
TrailingSpaces
設定ファイルの編集が必要ですが、全角スペースをハイライト表示するために導入しました。
wpseek.com WordPress Developer Assistant
WordPress の関数定義を補完候補に出してくれるパッケージ。WordPressのテーマやプラグインを書く人には役立ちます。WordPress というパッケージが有名です。

SublimeLinter を動くようにする

Package Control ランキングでも常にTOP10に入ってるくらい人気の SublimeLinter ですが、このパッケージ単体では動きません。言語別のlintパッケージと、lint本体をそれぞれインストールしてあげる必要があります。

今回、CSSlint と Jshint を動作させるまでにちょっと手間取ったので、備忘録として解説を残します。ちなみに Windows環境です。

まず、Package Control から 「SublimeLinter-csslint」と「SublimeLinter-jshint」をインストールします。
念のため、インストール後に Sublime Text 3 を再起動しておきましょう。

つぎに、lint本体をシステムにインストールします。CSSlint と Jshint は「node.js」で動作するプログラムですので、node.js をダウンロードしてインストールします。

Node.js

私の環境では C:\Program Files\nodejs にインストールしました。インストールできたか、コマンドプロンプトで確認しましょう。

Node.jsのバージョンが表示されたらインストールできています。

Node.js もまた、ruby の gem や、Sublime Text の Package Control のように「npm」というプログラムでパッケージ管理をしています。この npm を使って CSSlint と Jshint をインストールしましょう。その前に、こちらも確認を。

npmのバージョンが表示されればOKです。次のコマンドを入力して、それぞれのパッケージをインストールします。

ちなみに、 -g オプションは、グローバルインストールのオプションで、パスを通してどこからでもコマンドを叩けるようになります。
インストールが完了したら、いつもの通り確認作業を

ハイフン2個です。

Sublime Text 3 に戻って、SublimeLinter の設定をします。Preferences: SublimeLinter Settings – User を開いきます。その中から

の箇所を探して、windows のパラメータにインストールした CSSlint, Jshint のパスを指定します。私のWindows環境では、npm でグローバルインストールしたプログラムのありかが C:\Users\ユーザ名\AppData\Roaming\npm に納められていましたので、このパスを指定します。もちろん、ユーザ名は各自で置き換えてくださいね。npm の設定によっては別の場所になっているかもしれません。

これで動作するようになることを祈ります。HTML Tidy も同様のやり方でできます。