いまさら聞けない!? マークアップエンジニアの為の Sublime Text 3

calendar

reload

Sublime Text を使い始めて、はや1年。もうこれなしでは、コーディングは考えられない!っていうくらいまでなんとか使えるようになってきました。
この記事を書いている時点ですが、マークアップに使うアプリケーションのシェアで、なんとあの Dreamweaver を抜いて、1位だそうです。
ここでは、「Sublime text って何?」「学校では習ってない」「世間のトレンドに乗り遅れた!?」という人の為と、自分への備忘録として、Sublime Text 3 のインストールから、おすすめパッケージの導入まで紹介したいと思います。
※自分のPCがMacなので、Mac版での紹介となります。

Sublime Text 3 のインストール

Download からインストールをしてください。
OSのリストが黒丸になっているので、わかりやすいかと思います。

Package Control のインストール

Sublime Text を便利に使うには、様々なパッケージをインストールする必要があります。
そのパッケージをインストールするのに必要なのが Package Control です。
※パッケージをインストールするには、Package Control が無くてもできるようですが、あったほうが俄然便利だと思います。
https://packagecontrol.io/installation にアクセスして SUBLIME TEXT 3 のコードをコピーします。

または下記(上記と同じ)をコピーしても良いです。。

Sublime Text を起動し、ctrl + shift + `(バッククォート)
または、View > Show Console でコンソールを開き、コピーしたコードをペースト、Enter を押します。

これで、パッケージをインストールする準備はOK!

パッケージのインストール

パッケージのインストールは、Tools > Command Palette コマンド + shift + P でコマンドパレットを開き、[install] と入力してみましょう。
[Package Control: Install Package] という項目がありますので[Enter]で選択します。

すると、パッケージの一覧が表示されます。ここでインストールしたいパッケージを選択して [Enter] を押せばパッケージのインストールができます。

おすすめパッケージ

AutoFileName

ファイル名を補完してくれるパッケージ。

BracketHighlighter

開始タグ・終了タグをハイライトしてくれるパッケージ。

ConvertToUTF8

Sublime Text は、日本語の Shift-Jis に対応していません。
それをエンコードしてくれるパッケージです。
ただし、これだと正常に動作しないので、下記の Codecs33 も一緒にインストールしてください。

Codecs33

上記のConvertToUTF8のバグを解決してくれるパッケージ。

Compass

Compassのスニペット。Compassをコンパイルすることもできるみたいです。

Emmet

説明不要。HTML入力の補助をしてくれる。

Emmet Css Snippets

Emmetのスニペットパッケージです。Sass用のスニペットも入っているとの事。

HTML5

HTML5 の補完をしてくれるパッケージ。

HTMLAttributes

HTMLの属性や属性値のスニペットのパッケージ。

JQuery

JQuery の自動補完をしてくれるパッケージ。

Sass

SCSSのスニペットのパッケージ。

SASS Snippets

SCSSの関数などのスニペットのパッケージ。

SassBeautify

Sassのコードフォーマットができるパッケージ。

SCSS

とりあえずインストールしてみました。用途は不明。

SideBarEnhancements

サイドバー右クリックのメニューを拡張してくれるパッケージ。

SublimeLinter

エラーチェックをしてくれるパッケージ。

SublimeLinter-html-tidy

HTML5の構文チェックをしてくれるパッケージ。

SublimeLinter-jshint

JavaScriptの構文チェックをしてくれるパッケージ。

SublimeLinter-json

JSONの構文チェックをしてくれるパッケージ。

SublimeLinter-phplint

PHPの構文チェックをしてくれるパッケージ。

Syntax Highlighting for Sass

SCSS / Sass のシンタックスハイライトをしてくれるパッケージ。

Tag

閉じタグを打つと補完してくれるパッケージ。

IME Surport(Windowsのみ)

『Windows版Sublime Textは日本語をインライン変換できないので、それを解決するパッケージ。』との事です。

パッケージのアンインストール方法

コマンド + shift + P でコマンドパレットを開き、[remove] と入力して、[Package Control: Remove Package] という項目がありますので[Enter]で選択します。
インストールされているパッケージの一覧が表示されるので、アンインストールしたいパッケージを選択して[Enter]を押して完了。

Sublime Text 3 の日本語化

こちらのサイトで丁寧に説明されています。
MacでSublime Text 3のインストールと日本語化メモ

参考にさせて頂いたサイト

大変参考になりました。
ありがとうございました。
MacでSublime Text 3のインストールと日本語化メモ
SublimeText3 おすすめ?プラグイン
SublimeText(Windows、Mac)をSassで使いやすい設定にする
私的SublimeText3プラグイン集
【Mac】Sublime Text 3のインデント設定と表示について(タブとスペース)
Sublime Text 3 のダウンロードと基本的な設定
【Mac】Sublime Text 3のPackage Controlの機能