Carpe Diem

  Top > スポンサー広告> Windows > Sublime Text 2 の設定  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Sublime Text 2 の設定

2013 - 06/27 [Thu] - 01:04

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つのステップ

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。