読者です 読者をやめる 読者になる 読者になる

Carpe Diem

備忘録。https://github.com/jun06t

Sublime Text 2 の設定

Web開発で人気のある Sublime Text 2 というエディタの設定方法です。 Mac, Linux, Windows と幅広いプラットフォームに対応しているのが非常に魅力的です。 こちら一応シェアウェアですが、たまに「良ければ買ってね!」の表示が出るだけで実質全機能使えるフリーウェアみたいなものです。 まずはダウンロードから Sublime Text ◆Package Controlをインストール 拡張機能を簡単に導入できるパッケージツールをまず最初に導入します。 View – Show Console を選択すると下に入力バーが出ます。 sublime1.png ここに
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'
を入力して再起動します。これでパッケージツールの導入は完了です。 ◆便利なパッケージをインストール パッケージツールを導入すると ctrl+shift+p でコマンドパレットを表示できます。ここに「install」と入力して「Package Control:Install Package」を選択するとパッケージモードになってくれますので sublime2.png この状態で好きなパッケージを検索、インストールしていきます。 便利なのは
HTML5HTMLの自動補完
CSS SnippetsCSSの自動補完
jQueryjQueryの自動補完
Bracket Highlighterタグの開始タグ・閉じタグをハイライト
SideBarEnhancementsSide Barの右クリックに機能を追加
SublimeLinterHTML,CSS,JSのエラーをリアルタイムで指摘
Terminalターミナルを開く
IMESupport日本語入力の対応
Thema - SodaSodaスタイル
などです。左の名称で検索すればすぐ出てくると思います。 ◆テーマの変更 先ほどの「Thema - Soda」が一番有名なスタイルです。見やすいです。これをパッケージツールからインストールした後、 Preferences - Settings - User"theme": "Soda Dark.sublime-theme", を付け足して再起動すると反映されます。セッティングファイルはJSON形式です。 ◆設定ファイルの編集 先ほどのと併せて私の設定を紹介すると { "highlight_modified_tabs": true, "draw_white_space": "all", "font_size": 11, "highlight_line": true, "ignored_packages": [ "Vintage" ], "tab_size": 4, "theme": "Soda Dark.sublime-theme", "trim_trailing_white_space_on_save": true, "word_wrap": true } こんな感じです。 Emacsキーバインドに変更 Emacsキーバインドに変更することもできます。 同じくパッケージツールからなので、ctrl+shift+p でコマンドパレットを表示し、「install」を入力してから Sublemacspro と入力すると出てきますのでインストールしてください。以降Emacsキーバインドで使用出来ます。 ◆タブの移動をブラウザみたいにする デフォルトだと「最後に使用した文書に切り替える」仕様です。これは正直使いづらいので、ブラウザのように右隣、左隣に移動するように変換します。 「Preferences」->「Key bindings - User」 で以下を貼り付けてください。
    { "keys": ["ctrl+tab"], "command": "next_view" },
    { "keys": ["ctrl+shift+tab"], "command": "prev_view" },
    { "keys": ["ctrl+pagedown"], "command": "next_view_in_stack" },
    { "keys": ["ctrl+pageup"], "command": "prev_view_in_stack" }
以上です。 ソース: Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ sublime text で emacsキーバインドを使う 話題のSublime Text2!Webデザイナーが入れておきたいプラグイン 導入編:Sublime Text 2を使いやすくする4つのステップ