Sublime Text 3 メモ

約 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 + ` でコンソールを表示して、上記サイトのコードを貼り付けたらなんか出た。

sublimetext_01

>>> 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
コード補完を強化する。
Apache​Conf.​tm​Language
Apache の設定ファイルをハイライト表示。.htaccess とか。
Bound​Keys
ショートカットキーの一覧を表示。
Bracket​Highlighter
カッコを見やすく、今どこのカッコの中にいるかがわかりやすくなる。
Can I Use
ショートカットキー control + option + F で Can I use 検索ができる。(ブラウザで開く)
Codecs​33
ConvertToUTF8 が動かない場合に入れる。
Color Highlighter
カラーコード部分にその色の背景色や下線等を表示してわかりやすくする。Fix Mac Path 入れたら左側の ● も表示されるようになった!
Color​Picker
カラーピッカーを起動。Pick ボタンを押すまでは自由に別アプリのウィンドウに行けるので、例えば Photoshop のウィンドウから色を拾うとか、ブラウザで表示しているページの色を拾うとかできる。Pick ボタンを押すと Sublime Text のカーソル位置に色コードが挿入される。
Color​Scheme​Selector
インストールされているカラースキームのリストを表示して、カーソル移動で実際の画面で表示確認しながら選べたりする。
Convert​To​UTF8
UTF-8 以外の文字コードのファイルを一時的に UTF-8 に変換して編集できて、保存すると元の文字コードにしてくれる。
Data​Converter
カンマ区切りのテキストファイルを、JSON 形式や HTML のテーブルに変換してくれる。
Dotfiles Syntax Highlighting
.(ドット)から始まるいろんなファイルのハイライト表示。
eCSStractor
HTML から class を抽出して CSS の骨組みを生成してくれる。
Editor​Config
EditorConfig を使う。
Emmet
control + E は行末に移動で使いたいので、Emmet の設定で無効にする。
Find​Key​Conflicts
キーコンフリクトを調べる。
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 のスニペット。
j​Query
jQuery のスニペットとシンタックス。
List stylesheet variables
定義した変数をリストから探して挿入できる。
Local History
ファイル保存毎に履歴が保存され、履歴を個別に見たり、差分表示できる。
Lock​Tab
ファイル右クリック Lock Tab でタブをロックできる。うっかり閉じたくないファイルに設定すると便利。
Markdown Preview
Markdown 形式のファイルをブラウザでプレビューする。
Nettuts+ Fetch
Sublime Text の中だけで使える Bower みたいなやつで、オレオレセットも追加できて便利!みたいなかんじかなーと思ってる。
Omni​Markup​Previewer
Markdown のファイルをリアルタイムプレビューしたり、書き出したり。
Project Manager
プロジェクトを管理する。
Sass
Sass のシンタックス。
SCSS
SCSS のシンタックス。
Side​Bar​Enhancements
サイドバーのプロジェクト内のファイルやフォルダの右クリックメニューを拡張。
Smart Delete
次の行頭にインデントがある行末で delete すると、普通はインデントが残ってしまうが、インデントを自動的に削除してくれる。
Sublime​Code​Intel
自動入力補完や、定義にジャンプできる。
Sublime​Linter
このパッケージの他に、言語別のパッケージをインストールした。
Sublime​NFDTo​NFCPaste
コピペしたときに濁点や半濁点が分解されてしまう対策。
Sublime​Server
簡易ウェブサーバを起動する。
Terminal
プロジェクト内のフォルダをターミナルで開くことができる。fish シェルを使っているのでちょっと変更
Theme – itg.flat
テーマ。itg.flat.dark.green.sublime-theme が気に入った。カスタマイズしてみたよ!
Themes Menu Switcher
Preferences → Themes からテーマを変更できる。
Trailing​Spaces
行末の半角スペースやタブがハイライトされて見やすくなる。
Word​Press
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 + ↑↓
今いる行を上下に移動できる。複数行選択していると複数行(ry
control + shift + K
今いる行を削除できる。複数(ry
command + J
今いる行の末尾にある改行を削除して半角スペース区切りの 1 行に結合できる。複数(ry
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 にショートカットを設定。コマンド名はフォーラムで見つけた。

追加したパッケージで重複しているキーボードショートカットがあるはずだし、これから使っていくうちに「これはキーボードショートカットでやりたい!」というのが出てくるだろうから、おいおい整理していきたい。

  • Sublime​Server でポート番号とかは設定できるけど、localhost じゃなく 192.168.xx.xx とかに変更できないのかな。

その他メモ

  • コマンドパレットからシンタックスを指定する。
  • テキストベースのデータファイルの並び替えや不要な行の削除等にも使える。
  • Package Controlの検索では「:st3:osx」等のオプションを利用するとよい。
  • 設定ファイルの show_encoding show_line_endings をそれぞれ true にすると、改行コードと文字コードをステータスバーに表示できる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です