こんにちは、えんぞーです。
SSDを新しく買って環境を再構築したので「Sublime Text3」もインストールし直しました。
以前同じ事をしているはずですが、すっかり忘れているので未来の自分にメモを残そうと思います。
現状ではHTMLやらCSSやらPHPはphpStormを使っていますが、プロジェクト外のちょっとしたファイルを弄る場合等に「Sublime Text」は必須です＾＾
一通り使える様にするまでの流れ
以前はSublimeText2を使っていてどこかのタイミングで3にしたと思いますが・・・今回は最初から3をインストールします。
細かい部分の説明等省略している部分もありますがご了承下さい＾＾
インストール
まずは公式ページから「Sublime Text3」をダウンロードし、インストール。
Package Controlの導入
この作業があるからなのか、導入が面倒な印象があります。最初から付いてたら良いのに・・・とかｗ
メニューの「View」→「Show Console」でコンソールを表示してこのコードを貼り付けてEnter。
|
1 |
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) |
Installation – Package Control
これでパッケージコントロールの使用が出来る様になっているはず。
winの場合はctrl + shift + P。macの場合はcmd + shift + Pで使えるか確認。
FontFaceの変更
まずは日本語文章等見るとFontがガタガタなのでFontを指定してあげます。
「Preferences」→「Settings – User」に下記の2行目3行目を追加（カンマ忘れずに）
font_faceに関しては自分の好きなフォントを指定。私はRictyが好きなので「Ricty」を指定しましたが、一般的には「メイリオ」とか指定して良いと思います。
|
1 2 3 4 5 6 7 8 |
{ "font_face": "Ricty", "font_size": 12, "ignored_packages": [ "Vintage" ] } |
日本語化
賛否ありますが今回は日本語化してみました。
パッケージコントロール（ctrl + shift + P）→「Install Package」→「japanize」を検索・インストール。
インストール後に表示される説明に従ってファイルをコピーしたりします。
日本語をインラインで入力する
このままだと日本語を打つ場合に明後日の方向で入力が行われるのでインラインで入力されるように「IMESupport」を導入します。
パッケージコントロールから「IMESupport」を検索・インストール。
EUC-JPとかShift-Jisのファイルを開けるようにする
扱うファイルが全てUTF-8なら良いけどそうも行かないのでこちらの「ConvertToUTF8」を導入。
これでファイルエンコードで悩まされることもなくなります。
ここまででひとまず必須の設定は終わり。
Compassを使える様にする
css書くなら必ず入れておきたいのがCompassです。
正確に言うとSASS+Compassですが・・・。
Rubyをインストールする
RubyInstaller for WindowsからRubyInstallerをダウンロードしてインストール。
インストール時に環境変数PATHを設定するにチェックを忘れずに。
インストールが終わったらコマンドプロンプトから
|
1 |
ruby -v |
でバージョン情報が表示されるかチェック。
大丈夫なら
|
1 |
gem update --system |
このコマンドでアップデートを行った後に
|
1 |
gem install compass |
これでCompassをインストール。Sassも一緒に入るのでこれだけでOK。
SublimeTextにCompassのプラグインや関連プラグインをインストール
- Compass
- SASS
- SCSS
- SCSS Snipet
この辺を一気にパッケージコントロールでインストール。
その後、適当な場所に「config.rb」を作成。内容はとりあえず下記のような感じに。
|
1 2 3 4 5 |
http_path = "/" css_dir = "css" sass_dir = "scss" output_style = :nested line_comments = false |
「scss」ディレクトリ作って中に適当なSCSSをSublimeTextで書いてビルドのテスト。
このままの状態でもCtrl + Bでビルド出来ました。
出来ない場合は「Tool」→「BuildSystem」で「Compass」選択するといけるかと思います。
それでも駄目なら一度コマンドプロンプトで「compass -v」を実行してみてバージョン情報が出るか確認してみましょう。
私の場合はここまで来たらあとは好みで他のプラグインを入れていく感じになります。
他にインストールする（かも）プラグイン
BracketHighlighter
{}等の強調表示。
Hayaku
なんとな～くのニュアンスでCSSの記述を補完してくれる便利プラグイン。個人的にこれと同機能をphpStormに実装して貰いたいｗ
(phpStormでも直感的な補完してくれますが、こっちに慣れているので＾＾)
EMMET
こちらも割とお世話になったりするけど、たまに思い出したかのように使う感じなのでチートシートが手放せません。
SubLimeLinter
コードチェックやらを色々やってくれるプラグイン。
SFTP
修正したファイルをすぐアップしたいとき等は便利。
ColorPicker
そのまんまカラーピッカー。何気に便利。
Flatland（Theme）
こちらはプラグインというかテーマファイル。もうずっとこれ使ってます。
とりとめのないまとめ
他にも色々な便利プラグインがあるのですが、今までどれを入れていたのかがハッキリしませんｗ
ハッキリしないと言う事は使ってなかったんだろうという結論に達しますが、いずれ思い出して入れる事になるかと思います。
プラグインを増やしたり変更があった場合は随時ここを修正することにします。
