コーディング

カスタマイズ無限で便利!SublimeText

ここ何年か、わたしは「SublimeText」でコーディングをしています。
SublimeTextを使うメリットとしては以下になります。

  • 直感的な操作ができる。
  • 動作が軽く、色んなソフトと同時に起動できる。
  • カスタマイズしてより作業効率を上げられる。

以前はDream Weaverを使用していたので、こんなちょっとおしゃれなメモ帳みたいなのでちゃんとコーディング出来るのか?と不安でしたが、慣れると本当に使いやすいです!!

実際に、実案件で使用しているパッケージなどを紹介したいと思います。

直感的な操作

SublimeTextは、カーソルでの動作が優秀。

コマンドMacWin
矩形(くけい)選択opt + 左クリックしながらドラッグShift + 左クリックしながらドラッグ
複数箇所の選択cmd + 左クリックしながらドラッグCtrl + 左クリックしながらドラッグ

複数箇所を選択して、そのまま文字を入力すると選択箇所が置換されます。かなり便利ですね。

またショートカットを覚えると、簡単に様々な操作ができます!
よく使っているショートカットをまとめました。

選択

コマンドMacWin
カーソルがある行を全選択cmd + LCtrl + L
カーソルがある行ごと入替cmd + Ctrl + ↑↓キーCtrl + Shift + ↑↓キー

検索 / 置換

コマンドMacWin
検索cmd + FCtrl + F
置換cmd + opt + FCtrl + H
選択したフォルダ内から検索/置換cmd + shift + FCtrl + 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にはパッケージという色々な拡張機能があり、インストールする事で作業が格段に楽になります。
こちらも使用しているものを紹介します。

ソースの差分比較

  1. cmd + shift + P でcommand paletteを開く。
  2. 「install」と入力して「Package Control: Install Packagde」を選択。
  3. Compare Side-By-Side」と入力し候補に出てきたら選択。
    これでインストール完了!

差分比較したい2つのファイルを開き、画面上で右クリック。
「Compare with…」を選択すると、新しいウインドウで差分が表示されます。

結果の表示も、差分が色でマークされてとても見やすいです。

イメージタグの補完

  1. cmd + shift + P > command paletteで「install」と入力 > 「Package Control: Install Packagde」を選択。
  2. Auto File Name」と入力し候補に出てきたら選択しインストール。

このように、開いているフォルダ内のパスを表示してくれます。
かなり作業が楽になりますね!
なおこの場合は cmd + O でルートディレクトリからファイルを開いておく必要があります。

いくつかピックアップして紹介しました。
まだまだパッケージを書ききれていないので、徐々に更新していこうと思います。
SublimeText初心者の方に少しでもお役に立てれば嬉しいです!

ページトップへ