Sublime Textをインストールしたらまずやる事のまとめ。
パッケージのインストールや覚えておきたい操作など。
インストール・初期設定
概要など
まずはインストール
本家サイト
有償ですが、試用版でも機能制限なし。
Sublime Text2もありますが、最新バージョンの3を使います。
オレオレユーザー設定
[Preference] > [Setting – User] に以下を記載
|
{ "bold_folder_labels": true,//フォルダを太字で表示 //Emmetは日本語の変換の確定時に問題があったので、以下の設定を書き込む。 "disable_formatted_linebreak": true,// 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet "disable_tab_abbreviations": true,// tabでの展開の上書きしない for Emmet "draw_white_space": "all",//スペースの描画。none:描画しない。selection:選択時のみ描画。all:常に描画。 "highlight_line": true,//現在の行をハイライトする "highlight_modified_tabs": true,//編集が行われたファイルのタブをオレンジ色にする "preview_on_click": false,//ファイルをクリック時の自動プレビューを解除 "scroll_past_end": true,//最後の行を超えてスクロール出来る "word_wrap": false//テキストを折り返す。true:常に折り返す。false:常に折り返さない。auto: ファイルがプログラムのソースコードなら折り返さない。普通のテキストファイルなら折り返す。 } |
オレオレスニペット
https://github.com/WebNAUT-BW/snippets-st-frontend
インストール方法
/Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/snippet/
に***.sublime-snippetファイルを格納。このディレクトリ以下であれば自由にフォルダに分けてOK。
呼び出し方
[cmd] + [shift] + [p] → 各スニペットファイルのtabTriggerで設定した名前を入力(予測変換するので途中までの入力でOK)
押さえておきたい基本機能
操作・表示系
名前 |
詳細 |
Multiple Selections |
[cmd](windowsなら[ctrl])を押しながら、複数ヶ所を同時に選択して編集することが出来る |
SoftUndo [cmd] + [u] |
「選択」「カーソルの位置」なども戻すことができる、便利な「戻る」機能 |
フォルダによるファイル管理 |
基本的な作業はフォルダをアプリにドラッグしてサイドバーに設定から行う |
Minimap |
コードの全体像が把握可能 |
ショートカット
Sublime Textのキーボードショートカット一覧 (Mac OS X)
よく使うショートカット:
名前 |
詳細 |
[cmd] + [d] |
一回で単語を選択、二回目から選択中の文字列を検索して順次選択 |
[cmd] + [alt]+ (数字キー) |
ウィンドウを横n等分 |
[cmd]+ [/] |
コメントアウト(コメント解除) |
[ctrl]+ [t] |
選択された二箇所の文字を交換する |
[cmd] + [shift]+ [a] |
親のタグまで選択 |
[cmd] + [shift]+ [d] |
カーソル位置の行を下に複製 |
[cmd] + [alt]+ [f] |
置換パネルを開く |
検索パネルで[enter] |
次を検索 |
検索パネルで[shift]+ enter |
前を検索 |
[tab]/[shift] + [tab] |
インデント/アンインデント |
パッケージ
Package Control
パッケージを管理しやすくするパッケージ。まずはこれを入れないと始まらない。
機能概要:
設定方法:
- 公式サイトにアクセス(必ず最新の情報でインストールすること)
- Sublime Text3のタブが選択されているのを確認して、Installationの項目の「import urllib〜」で始まるコードをコピー。
- [View] > [Show Console] をクリック
- コピーしたインストール用のコマンドを貼り付けて[enter]
- インストールが走っている間しばし待つ
- 「Package Control: No updated packages」と表示されて処理が止まった所で完了
Package Controlを使ったパッケージのインストール方法:
- [command] + [shift] + [p] > 「Install Package」 と入力(変換候補が出るので”install”まででOK)
- [enter] を押してしばらく待つ(ステータスバーがLoading中の動きになります。)
- インストールしたいパッケージの名前を入力して [enter]
Emmet
Zen-codingの現行版
使い方:
1.ショートコードでタグを展開([ctl] + [e])
例:
↓[ctl] + [e]で展開
|
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> |
2.wrap with abbreviation(後からタグで括る)
- 括りたい範囲を選択して、[ctl] + [alt] + [enter]
- ウィンドウの下に「Enter abbreviation」が出るので、指定したいタグを入力して[enter]
- 複数行をliなどで括る場合はul>li#と入れると行単位でliを指定可能
- クラスやIDも1.のショートコード同様指定可能
Emmet Cheat Sheet
http://docs.emmet.io/cheat-sheet/
Bracket Highlighter
htmlのタグ、jsの括弧のペアをハイライトしてくれる
SideBarEnhancements
サイドバーの強化、右クリックで操作できる事が増える
AutoFileName
imgタグやcssなどで、パスを入力する時に、ファイル名を補完してくれる素晴らしいパッケージ
※ユーザ設定に下記を追加するとimgタグのwidthとheightの順番がwidthが先になります。
[Preference] > [Setting – User]
|
"afn_insert_width_first": true, |
Abacus
イコールとかコロンとかを綺麗に揃える
▼例:使い方
|
@tableBackground:transparent; // overall background-color @tableBackgroundAccent:#f9f9f9; // for striping @tableBackgroundHover:#f5f5f5; // for hover @tableBorder:#ddd; // table and cell border |
↓整えたい行を選択して、[cmd] + [alt] + [ctrl] + ]
|
@tableBackground: transparent; // overall background-color @tableBackgroundAccent: #f9f9f9; // for striping @tableBackgroundHover: #f5f5f5; // for hover @tableBorder: #ddd; // table and cell border |
ConvertToUTF8
Sublime TextはデフォルトでShift-JISやEUCに対応しておらず、そのまま開くと文字化けしてしまいます。
それらのファイルを開いた時に文字エンコードをUTF8に変換し、保存時にまたエンコードを戻してくれるというパッケージです。
各種シンタックス
- SCSS(SASSを入れてしまうと.scssでemmetを使った時にセミコロンが自動で付かない)
- Compass
- LESS
各種スニペット
- HTML Snippets
- CSS Snippets
- jQuery Snippets pack
- JavaScript Snippets
JSHint
JavaScriptのリアルタイム構文チェックを行うパッケージです。
なお、これを使うためには別途Node.js経由でJSHintをインストールする必要があります。
紹介記事
追加するパッケージ
- SublimeLinter
- SublimeLinter-jshint
TrailingSpaces
全角スペースをハイライト表示するパッケージ
インストールしただけではうまく動かず、
[PackageSetting] > [TrailingSpaces] > [Setting – User] に
|
{ "trailing_spaces_regexp": " |[ t]+" } |
を記載します。これでOK
参考サイト
上記設定を追記する先が
[PackageSetting] > [Package Control] > [Setting – User] と書かれていますが、正しくは
[PackageSetting] > [TrailingSpaces] > [Setting – User] ですのでご注意。
カラーテーマ設定
おすすめ
[Monokai Dark]、[Flatland]
参考サイト
オリジナルなテーマ設定を行う方法
紹介記事:Sublime Textのテーマをカスタマイズできる「Color Scheme Editor for Sublime」 – へっぽこプログラマーの日記
まずはこちらにアクセス
- 左上の[Gallery]で既存のテーマを選択
- 細かい色の調整(必要に応じて)
- [download]して**.tmThemeファイルをダウンロード
- [Preferences] > [Brouwse Packages] でFinderにPackage内容を表示
/Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/**.tmTheme ここにファイルを格納
- すると [Preferences] > [Color Scheme] > [User] にテーマ**が選択できるようになる