サイト移転しました → GLOSSY

  • 最終更新日:
  • 投稿者: @signpostme

Sublime Text 2 を再インストールしたので最初に行った設定と導入したパッケージをご紹介!

Web業界ではかなり有名なエディタソフト「Sublime Text」。たまたま再インストールする機会があり、せっかくなので初期設定や導入したパッケージ(拡張機能みたいなもの)を少しご紹介します。これから使い始める方向けに解説しますのでご了承ください。

無料で使える高性能テキストエディタ「Sublime Text 2」の設定方法

sb01「Sublime Text」は、無料で使用でき、「パッケージ」と呼ばれる拡張機能みたいなものをインストールすることで自分好みにカスタマイズできる高性能テキストエディタです。
 
ダウンロードは公式サイトより。
 
Sublime Text: The text editor you’ll fall in love with
 
 

インストールしたらまずやること

インストール後、まずは初期設定ということで「ユーザー設定」を自分好みに設定していきましょう。
「Preferences」→「Settings – User」と進んでいき、設定ファイルを開きます。
sb02設定ファイルに、以下のコードをコピペしてください。
 
 

{
	"font_size": 14,
	"line_padding_top": 5,
	"tab_size": 4,
	"draw_white_space": "all",
	"trim_trailing_white_space_on_save": true,
	"highlight_line":true,
	"word_wrap": true
}

 
 
意味は、上から「文字の大きさ」、「行間」、「タブのサイズ」、「すべての空白を可視化」、「空白の削除を使用」、「選択している行のハイライト表示を使用」、「自動改行を使用」といった具合です。個々の値は自分好みに調節していただいて構いません。コピペできたらCtrl+Sキーで保存します。
 
あと、起動直後には便利な「Sidebar」が表示されていないので、「View」→「Side bar」→「Show Side bar」をクリックしてサイドバーを表示させてやりましょう。これを表示させることで、作業中のプロジェクトのディレクトリ構造などを把握しやすくなります。
 
 

パッケージを使用する準備をしよう

いよいよ「Sublime Text」の目玉となる「パッケージ」のお話なんですが、初期状態では「パッケージ」をインストールするための「Package Control」が使用できないので、使用できるようにコマンドを入力します。
 
「View」→「Show Console」と進んでいき、画面下部に出てきたコンソールに以下のコードをコピペして実行します。
 
 

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')

 
 
「Please restart Sublime Text to finish installation」と表示されたら、Sublime Textを再起動します。
 
 

「Package Control」の実行

再起動後、「Ctrl」と「Shift」と「Pキー」を同時に押して「コマンドパレット」を表示させ、「Install」と打ち込みます。候補に「Package Control: Install Package」というものが表示されるはずなので、エンターキーを押します。
sb03しばらく待つと、再度「コマンドパレット」が表示されるので、インストールしたいパッケージの名前を入力して検索し、インストールします。
 
 

自分がよく使用しているパッケージを紹介

【スニペット】 HTML5 / CSS3 / jQuery / CSS Snippets / HTML5 Doctor CSS Reset snippet
 
展開するとひな形を出力してくれます。例えば、「html5」と入れて展開(Tabキー)するとHTML5のひな形が自動で出力されます。
 
【作業効率化】 Emmet / AutoFileName
 
Emmetは、独自の省略化されたコードを展開すると通常のコードに書き直されて出力されます。高速な開発が可能になります。AutoFileNameは、srcを参照したときに自動的にファイルを表示して画像ファイルならwidthやheight属性も入力してくれます。
 
【操作性向上】 Bracket Highlighter / SublimeLinter
 
Bracket Highlighterは、タグの始まりと終わりをハイライト表示してくれます。閉じ忘れ防止に。SublimeLinterは、エラーがあった場合教えてくれる機能を追加します。
 
 

今後もSublime Textのパッケージや使い方をご紹介する予定

今回ご紹介したパッケージはまだまだ一部のパッケージです。もっと便利な、この記事だけでは伝えられないほど魅力的なパッケージ・機能もたくさんあるのでまた別の機会にご紹介したいと思います。
 
本当にたまたま記事を書く気になったので書きましたが、これを読んで頂いて少しでも「Sublime Text」ユーザーが増えると嬉しいです。
 
 

新着記事を見る

TOP