ここ何年か、わたしは「SublimeText」でコーディングをしています。
SublimeTextを使うメリットとしては以下になります。
- 直感的な操作ができる。
- 動作が軽く、色んなソフトと同時に起動できる。
- カスタマイズしてより作業効率を上げられる。
以前はDream Weaverを使用していたので、こんなちょっとおしゃれなメモ帳みたいなのでちゃんとコーディング出来るのか？と不安でしたが、慣れると本当に使いやすいです！！
実際に、実案件で使用しているパッケージなどを紹介したいと思います。
直感的な操作
SublimeTextは、カーソルでの動作が優秀。
| コマンド | Mac | Win |
|---|---|---|
| 矩形（くけい）選択 | opt + 左クリックしながらドラッグ | Shift + 左クリックしながらドラッグ |
| 複数箇所の選択 | cmd + 左クリックしながらドラッグ | Ctrl + 左クリックしながらドラッグ |
複数箇所を選択して、そのまま文字を入力すると選択箇所が置換されます。かなり便利ですね。
またショートカットを覚えると、簡単に様々な操作ができます！
よく使っているショートカットをまとめました。
選択
| コマンド | Mac | Win |
|---|---|---|
| カーソルがある行を全選択 | cmd + L | Ctrl + L |
| カーソルがある行ごと入替 | cmd + Ctrl + ↑↓キー | Ctrl + Shift + ↑↓キー |
検索 / 置換
| コマンド | Mac | Win |
|---|---|---|
| 検索 | cmd + F | Ctrl + F |
| 置換 | cmd + opt + F | Ctrl + H |
| 選択したフォルダ内から検索/置換 | cmd + shift + F | Ctrl + Shift + F |
ウインドウ分割
| コマンド | Mac | Win |
|---|---|---|
| 1画面 | cmd + opt + 1 | Alt + Shift + 1 |
| 縦分割(2〜4画面まで) | cmd + opt + 2〜4 | Alt + Shift + 2〜4 |
| 横分割(2〜3画面まで) | cmd + opt + shift + 2〜3 | Alt + Shift + 8〜9 |
| 4グリッド | cmd + opt + 5 | Alt + Shift + 5 |
基本的に縦2分割で作業しています。
htmlの構造を確認しながらcssを書けたりするので効率が良いです。
検索してみると、他にも様々なショートカットがあるようです。
まだまだ使いこなせてませんが、徐々に覚えていきたいです！
おすすめのパッケージ
SublimeTextにはパッケージという色々な拡張機能があり、インストールする事で作業が格段に楽になります。
こちらも使用しているものを紹介します。
ソースの差分比較
- cmd + shift + P でcommand paletteを開く。
- 「install」と入力して「Package Control: Install Packagde」を選択。
- 「Compare Side-By-Side」と入力し候補に出てきたら選択。
これでインストール完了！
差分比較したい2つのファイルを開き、画面上で右クリック。
「Compare with…」を選択すると、新しいウインドウで差分が表示されます。
結果の表示も、差分が色でマークされてとても見やすいです。
イメージタグの補完
- cmd + shift + P ＞ command paletteで「install」と入力 ＞ 「Package Control: Install Packagde」を選択。
- 「Auto File Name」と入力し候補に出てきたら選択しインストール。
このように、開いているフォルダ内のパスを表示してくれます。
かなり作業が楽になりますね！
なおこの場合は cmd + O でルートディレクトリからファイルを開いておく必要があります。
いくつかピックアップして紹介しました。
まだまだパッケージを書ききれていないので、徐々に更新していこうと思います。
SublimeText初心者の方に少しでもお役に立てれば嬉しいです！
