約 8 年間 Coda 一筋 → Sublime Text 便利そうだし使ってみよう → Atom もいいらしいね、で、Sublime Text と Atom を一日ずつ使ってみた結果、Sublime Text をもりもり使ってみたい気持ちになりました。Sublime Text: The text editor you’ll fall in love with のサブタイトルの通り、まさに恋に落ちたかんじ。だっ！だけど！Coda ちゃんも大好きだよ！！
Web制作者のためのSublime Textの教科書等を見ながら設定を行い、キーボードショートカット等メモっておきたいことをここに書いておきます。
Package Control
パッケージ管理をしやすくするため Package Control をインストール。control + ` でコンソールを表示して、上記サイトのコードを貼り付けたらなんか出た。
>>> import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
174110
reloading plugin Package Control.bootstrap
reloading plugin Package Control.Package Control
reloading Packages/Package Control/Package Control.sublime-settings
found 2 files for base name Main.sublime-menu
reloading plugin 0_package_control_loader.00-package_control
reloading Packages/User/Package Control.sublime-settings
Package Control: Installing 1 missing dependency
Package Control: Installed missing dependency bz2
Package Control: No updated packages
error: Package Control
1 missing dependency was just installed. Sublime Text should be restarted, otherwise one or more of the installed packages may not function properly.ぐぐってもわからんし、そのままにしておこう。
インストールするパッケージ
- Abacus
- 特定の記号で列をそろえてくれる。
- All Autocomplete
- コード補完を強化する。
- ApacheConf.tmLanguage
- Apache の設定ファイルをハイライト表示。.htaccess とか。
- BoundKeys
- ショートカットキーの一覧を表示。
- BracketHighlighter
- カッコを見やすく、今どこのカッコの中にいるかがわかりやすくなる。
- Can I Use
- ショートカットキー control + option + F で Can I use 検索ができる。（ブラウザで開く）
- Codecs33
- ConvertToUTF8 が動かない場合に入れる。
- Color Highlighter
- カラーコード部分にその色の背景色や下線等を表示してわかりやすくする。Fix Mac Path 入れたら左側の ● も表示されるようになった！
- ColorPicker
- カラーピッカーを起動。Pick ボタンを押すまでは自由に別アプリのウィンドウに行けるので、例えば Photoshop のウィンドウから色を拾うとか、ブラウザで表示しているページの色を拾うとかできる。Pick ボタンを押すと Sublime Text のカーソル位置に色コードが挿入される。
- ColorSchemeSelector
- インストールされているカラースキームのリストを表示して、カーソル移動で実際の画面で表示確認しながら選べたりする。
- ConvertToUTF8
- UTF-8 以外の文字コードのファイルを一時的に UTF-8 に変換して編集できて、保存すると元の文字コードにしてくれる。
- DataConverter
- カンマ区切りのテキストファイルを、JSON 形式や HTML のテーブルに変換してくれる。
- Dotfiles Syntax Highlighting
- .（ドット）から始まるいろんなファイルのハイライト表示。
- eCSStractor
- HTML から class を抽出して CSS の骨組みを生成してくれる。
- EditorConfig
- EditorConfig を使う。
- Emmet
- control + E は行末に移動で使いたいので、Emmet の設定で無効にする。
- FindKeyConflicts
- キーコンフリクトを調べる。
- Fix Mac Path
- Path を通す。
- Gist
- コードを Gist に保存したり、Gist のコードを開いて編集して保存したりできる。
- Goto-CSS-Declaration
- .html 等の class 名や id 名から CSS の該当箇所に移動できる。
- Gulp
- gulp のスニペット。
- Hayaku – tools for writing CSS faster
- CSS を Hayaku 書けるやつ。
- HTML-CSS-JS Prettify
- HTML 等をぷりちー化する。
- Inc-Dec-Value
- control + ↑↓ で 1 増減、command + option + ↑↓ で 10 増減、または値を切り替えることができる。
- Jade
- Jade のシンタックス。
- Jade Snippets
- Jade のスニペット。
- jQuery
- jQuery のスニペットとシンタックス。
- List stylesheet variables
- 定義した変数をリストから探して挿入できる。
- Local History
- ファイル保存毎に履歴が保存され、履歴を個別に見たり、差分表示できる。
- LockTab
- ファイル右クリック Lock Tab でタブをロックできる。うっかり閉じたくないファイルに設定すると便利。
- Markdown Preview
- Markdown 形式のファイルをブラウザでプレビューする。
- Nettuts+ Fetch
- Sublime Text の中だけで使える Bower みたいなやつで、オレオレセットも追加できて便利！みたいなかんじかなーと思ってる。
- OmniMarkupPreviewer
- Markdown のファイルをリアルタイムプレビューしたり、書き出したり。
- Project Manager
- プロジェクトを管理する。
- Sass
- Sass のシンタックス。
- SCSS
- SCSS のシンタックス。
- SideBarEnhancements
- サイドバーのプロジェクト内のファイルやフォルダの右クリックメニューを拡張。
- Smart Delete
- 次の行頭にインデントがある行末で delete すると、普通はインデントが残ってしまうが、インデントを自動的に削除してくれる。
- SublimeCodeIntel
- 自動入力補完や、定義にジャンプできる。
- SublimeLinter
- このパッケージの他に、言語別のパッケージをインストールした。
- SublimeNFDToNFCPaste
- コピペしたときに濁点や半濁点が分解されてしまう対策。
- SublimeServer
- 簡易ウェブサーバを起動する。
- Terminal
- プロジェクト内のフォルダをターミナルで開くことができる。fish シェルを使っているのでちょっと変更。
- Theme – itg.flat
- テーマ。itg.flat.dark.green.sublime-theme が気に入った。カスタマイズしてみたよ！
- Themes Menu Switcher
- Preferences → Themes からテーマを変更できる。
- TrailingSpaces
- 行末の半角スペースやタブがハイライトされて見やすくなる。
- WordPress
- WordPress のテンプレートタグやスニペット。
キーボードショートカット
- 画面分割（横分割）
- command + option + 2 〜 4
- 画面分割（横分割）
- command + shift + option + 2 or 3
- 画面分割（4 × 4 グリッド）
- command + option + 5
- 画面分割（シングル・分割したのを戻す）
- command + option + 1
- サイドバーを開閉
- command + K → B
- コマンドパレット
- command + shift + P
- command + D
- 文字列を選択してから command + D を押すごとに、選択したものと同じ文字列が次々に選択される。
- command + D → command + K
- command + D を押している途中で command + K を押すとひとつスキップできる。
- command + D → command + U
- 勢い余って command + D で選択しすぎた場合は command + U でひとつ前の状態に戻ることができる。
- command + D → command + shift + U
- ひとつ前の状態に戻ったのをやり直す。
- command + D → command + option + G
- 選択した文字列と同じものをすべて選択。
- command を押しながらクリック
- 任意の場所を複数選択できる。
- contol + shift + ↑↓
- 前後の行の同じ位置を選択できる。
- option を押しながらドラッグ
- 矩形選択ができる。
- 複数行を選択した後 command + shift + L
- 1 行ずつ選択した状態になる。
- commnad + shift + D
- 今いる行を複製できる。範囲選択してコピペしなくていい！複数行選択していると複数行複製できる。
- command + control + ↑↓
- 今いる行を上下に移動できる。複数行選択していると複数行（ｒｙ
- control + shift + K
- 今いる行を削除できる。複数（ｒｙ
- command + J
- 今いる行の末尾にある改行を削除して半角スペース区切りの 1 行に結合できる。複数（ｒｙ
- command + enter
- 今いる行の次に改行を挿入。
- command + shift + enter
- 今いる行の前に改行を挿入。
- command + option + V
- Sublime Text 内でコピー / 切り取りした履歴リストが表示され、クリックで貼り付けできる。
- control + 1 〜 4
- 1 〜 4 のグループをアクティブにする。
- control + shift + 1 〜 4
- 今アクティブになっているファイルを指定のグループに移動する。
- command + shift + F
- 置換または検索範囲指定。
- control + G
- 「:」という小窓が出てきて、行番号を入力すると移動できる。
- command + R
- 「@」という小窓が出てきて、function や CSS のセレクタ等のシンボル一覧が表示され、インクリメンタルサーチでシンボルを探して移動できる。
- command + P
- 小窓が出てきて、「:」の後に行番号を入力、「@」の後にシンボルを入力、「#」の後に検索文字列を入力すると候補が出てきて移動できる。
- command + control + P
- Project Manager を呼び出す。
- command + shift + A
- タグの中身を選択する。子要素を持つ親要素にカーソルがある状態だと子要素もまとめて選択する。
- control + shift + W
- 選択した文字列をタグで囲む。
- control + option + F
- Can I use 検索。
追加したキーボードショートカット
- command + shift + U
- 今開いているファイルの複製 File → New View into File にショートカットを設定。コマンド名はフォーラムで見つけた。
追加したパッケージで重複しているキーボードショートカットがあるはずだし、これから使っていくうちに「これはキーボードショートカットでやりたい！」というのが出てくるだろうから、おいおい整理していきたい。
謎
- SublimeServer でポート番号とかは設定できるけど、localhost じゃなく 192.168.xx.xx とかに変更できないのかな。
その他メモ
- コマンドパレットからシンタックスを指定する。
- テキストベースのデータファイルの並び替えや不要な行の削除等にも使える。
- Package Controlの検索では「:st3:osx」等のオプションを利用するとよい。
- 設定ファイルの show_encoding show_line_endings をそれぞれ true にすると、改行コードと文字コードをステータスバーに表示できる。