mnemoniqs web desiner blog

   ̃Gg[͂ĂȃubN}[Nɒlj   Clip to Evernote  

Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。ダウンロードは無料で(継続して使う場合はシェアウェア)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。

HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い!なんていう僕と同じような人がいるなら、このエディタはオススメですw

以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。

ダウンロード

Sublime Text 2 – Dev Builds

初期設定

アプリを立ち上げて、Sublime text2 > Preference > Settings User (command + ,)を開く。
Sublime Text2内で「Preferences.sublime_settings」のタブが立ち上がるので、そこに以下を記述。

{
	//フォントサイズ
	"font_size": 13,
	//行間
	"line_padding_top": 5,
	//タブサイズ
	"tab_size": 4,
	//空白の削除
	"trim_trailing_white_space_on_save": true,
	//タブやスペースなどの不過視文字を表示(お好みで)
	"draw_white_space": "all",
	//現在の選択行をハイライト表示(お好みで)
	"highlight_line":true,
	//自動改行
	"word_wrap": true
}

フォントサイズ、行間はお好みで。font_faceでフォントの種類も設定できます。Rictyなんかいいみたい。
他にも色々設定できるみたいなので、調べてみるといいかも!保存したら再起動します。

Packageを入れる準備

自動補完機能や便利な拡張機能は、PackageというものをSublime Text2に入れることで使えるようになります。
簡単に機能を入れるために「Package Control」をインストールします。
View – Show Consoleを選択すると、下部に入力エリアがでます。

ここに以下を入力します。

sublimetext2は

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

sublime Text3はこちら

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

を入力して再起動します。これで他のPackageを手軽にインストールする準備ができました。

オススメのPackageをインストールする

command + Shift + pで「Command Palette」が開くので、そこにinstallと入力します。

「Package Control:Install Package」でEnterを押すと、Packageを検索できるようになります。

例えばhtml5と検索して出てきたHTML5を選択すると、Sublime Text2のhtml文書でHTML5の自動補完が行われるようになります。いくつかのPackageはSublime Text2を再起動させないといけない場合があるので、効かないときはそれで。

最初に入れたPackageは以下の通り。

Package名 機能
HTML
HTML5
HTMLの自動補完
CSS
CSS Snippets
CSSの自動補完
jQuery jQueryの自動補完
Emmet(前ZenCoding) Emmetの実装&自動補完
Sass
SASS Build
Sassの自動補完
SCSS
SCSS Snippets
Scssの自動補完
Compass Build System Compassの自動補完
Bracket Highlighter タグの開始タグと閉じタグをハイライト表示
SideBarEnhancements Side Barの右クリックに機能を追加
Browser Refresh Sublime Text2を開いたままcommand + shift + rでブラウザ更新
Tag HTMLをoption + control + fでフォーマット(Dwでいうソースコードフォーマット)。
SublimeLinter HTML,CSS,JSのエラーをリアルタイムで指摘
CSScomb Shift + control + cでCSSのプロパティを自動整列
Goto-CSS-Declaration HTMLのclass、ID名にカーソルをあてcommand + →でCSSの同じ単語に一発ジャンプ。超便利です。

僕の場合はマークアップ目的で使うのでその目的に沿ったPackageを選んでいますが、他にもたくさんあるので用途で検索するといいかも。

カラーとテーマの設定

Sublime Text2は自分の好みにあった背景色や文字色に変更することができます。

上のキャプチャは僕が使っている設定で、カラーが「Monokaki」、テーマが「Soda Dark」です。

カラーの設定は、Sublime Text2 > Preferences > Color Schemeから選択。
テーマはコマンドパレットからダウンロードすると使えるようになります。
Command Paletteで「Package Control:Install Package」を選択し、「Theme-Soda」 をインストール。

(command + ,) で「Preferences.sublime_settings」を開き「”theme”: “Soda Dark.sublime-theme”,」を追加

{
	//テーマ
	"theme": "Soda Dark.sublime-theme",
	//フォントサイズ
	"font_size": 13,
	//行間
	"line_padding_top": 5,
	//タブサイズ
	"tab_size": 4,
	//空白の削除
	"trim_trailing_white_space_on_save": true,
	//タブやスペースなどの不過視文字を表示(お好みで)
	"draw_white_space": "all",
	//現在の選択行をハイライト表示(お好みで)
	"highlight_line":true,
	//自動改行
	"word_wrap": true
}

最後にSublimeText2を再起動すると、テーマが反映されています。

覚えておくといい機能や使い方

ショートカットキーはファイルの保存(command + S)、やり直し(command + Z)など馴染みのものが多くて助かります。その他覚えておくと捗ることなどが以下。

コマンドパレットを表示 command + shift + P
installと検索するとPackageを検索できる「Package Control」が使えます。
画面を分割で表示
command + alt + 1〜4
HTMLとCSSとJSを横に並べたくなっちゃう感じ。縦割もできます。
隣のタブに移動 command + alt + ← or →
タブの切り替え command + 1~4
グループを選択 control + 1~4
選択中のタブをグループに移動 control + Shift + 1~4
Mini Mapを非表示
View > Hide MiniMap
ちょっと邪魔だと思ったら。
Side Barの表示/非表示 View > Side Bar
command + K(のあとすぐ) + B
Side BarにProject Folderを表示 Project > Add Folder to Project
Dreamweaverでいうサイト管理みたいな。
Project内のファイル/関数/行番号を検索して開く
command + p
ファイル名を検索して開ける。
「@」を最初にいれると関数検索(#headerとか)を検索できる。
「:」を最初にいれると行番号で検索。
検索/置換/フォルダを指定して検索and置換 command + F で検索。
command + alt + F で置換。
command + shift + F でフォルダを指定して検索and置換
新規でタブを作成 command + T
タブを新しい名前で保存 command + shift + S
選択範囲をコメントアウト command + /
command + alt + /
選択中の行を複製して直下にペースト command + shift + D
タグを閉じる command + alt + ,
選択行をインデント command + [
選択行をアンインデント command + ]
タグをすべて折り畳む command + K(のあとすぐ) + T
タグの折り畳みをすべて解除 command + K(のあとすぐ) + J
同じ単語を上から選択して編集可能状態にする command + D
同じ単語をすべて選択して編集可能状態にする command + control + G
行を選択 command + L

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

   ̃Gg[͂ĂȃubN}[Nɒlj   Clip to Evernote