読者です 読者をやめる 読者になる 読者になる

かんがえちゅう!

出来寛祥です。多趣味に生きていこうと思って、楽器とかスポーツとかいろいろやってます。プログラミングも好き。

Sublime Text使い倒しリファレンス:基本設定編

プログラミング プログラミング-ツール Sublime Text

sponsor

Sublime textを最強の相棒にするためのスニペットや使い方、細かい設定のまとめをします。

Macの方向けです!

基本設定編

Sublimet textはダウンロード直後は本当にただのテキストエディタです。そのためにやらなきゃいけないのがこちら。

Side Barの表示

サイドバーがないとプロジェクト参照できないので絶対に出しましょう。

f:id:hiroyoshi-deki:20151211071320p:plain

View > Side Bar > Show Side Barをクリックするとサイドバーが出てきます。

ショートカットか[ ⌘ + k, ⌘ + b ]なので覚えておくといいです。サイドバーが邪魔な時もあるので。連続押しって意味ですよ!⌘押しながらk -> bって

Default keybindingの変更:コメント内の日本語入力が消えてしまう問題

検索窓に日本語入力をしてしまうと消えてしまう人へ。キーバインドのデフォルトをいじると直せます。が、デフォルトは普通ではいじれないので、いじれるようにしましょう。

  • Preferences > Browse Packages...をクリック
  • 開いたフォルダにDefaultフォルダを作る
  • Preferences > Key Bindings - Defaultをクリック
  • ⌘ + s で保存する
  • 新しくDefaultフォルダに出来上がったsublime-keymapファイルをいじる

以上の流れでいじれるようになります。

Defaultフォルダを作らないと、ないよって怒られちゃうんです。で、600行目くらいから3箇所コメントアウトしなければなりません。

f:id:hiroyoshi-deki:20151211113755p:plain

画像の行番号は大体の人があってるとは思いますが、違う場合もあるかも。

  • // Find panel key bindings
  • // Replace panel key bindings
  • // Incremental find panel key bindings

以上の3項目の下3行をコメントアウトしてください。それで、検索窓でも日本語を使えるようになります。本当はデフォルトはできるだけいじらないようにしましょう。

行頭行末移動

{ "keys": ["super+right"], "command": "move_to", "args": { "to": "hardeol" } },
{ "keys": ["super+left"], "command": "move_to", "args": { "to": "hardbol" } },

Preferences > Key Bindings - Userにこのコードが書いてあれば[ ⌘ + → ][ ⌘ + ← ]で行頭行末へ移動できるようになります。

DockBlockrでコメントアウト内でも日本語を使えるように設定

DockBlockrでコメントアウトをしやすくして、きれいなコードをかくのはいいんですが、コメントアウト内で日本語を使うために変更が必要です。

まずはPackage ControlでDocBlockrをインストールしてください。

Preferences > Package Settings > Settings - Userを開いてこのコードをコピペ。

{
  "jsdocs_extend_double_slash": false,
}

これで日本語が使えます。

DocBlockr自体は[ /** ]の後にタブで使えますが、いろいろな言語への対応は別に必要です。

Packege Controlのインストール

Installation - Package Controlこのページからインストール用のコードをコピペして、自動でインストールできます。

Sublime text 2用と3用あるので注意してください。ちなみにぼくはSublime text3がおすすめです。

f:id:hiroyoshi-deki:20151211072259p:plain

このコードをView > Show Consoleをクリックして出てきた窓に貼り付けましょう!

f:id:hiroyoshi-deki:20151211072828p:plain

すると下の灰色のところでばたばたコードが走っているのが見えます。しばらく待つとインストール完了します。

ちなみにコンソールのショートカットは[ ⌘ + ` ]です。この点はプログラミングでテキストを表す点じゃなくてUSキーボードだと左上にある点です。

Package Controlの利用方法は[ ⌘ + Shift + p ]で窓が出てくるのでそこにinstallなどと入力してPackage Controlを選択すればの窓に変わります。

  1. ⌘ + Shift + p
  2. installと打ち込む
  3. キーボードの上下でPackage Control: Install PackageをハイライトしてEnter

f:id:hiroyoshi-deki:20151211073914p:plain

あとは欲しいパッケージを入力して選んでいくだけです。

ということでおすすめパッケージ編いきます。

基本設定系パッケージ

キーボードの挙動やVim化などいろいろできることがあるので、設定していきましょう。

Monokai JSON+ テーマ

文字色を変えてくれるパッケージです。MonokaiというカラースキーマがとてもいいのとJSONも扱うのでぼくはこれにしていました。

Material Theme テーマ

けど最近でたらしいMaterialがかっこよすぎて乗り換え!

Mattia Astorino | Web Designer & Developerこちらが公式ページ。書かれているMore infoからgit hubのページへ飛べるので、そこを読んでインストールします。

github.com

  1. Package controlでMaterialとか入れて出てくる「Material Theme」をインストール
  2. Preferences > Settings > Userにテーマ毎に必要なコードをコピペ

ぼくはDarkerにしたので

"theme": "Material-Theme-Darker.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",

このコードを貼り付けました。

Package controlでThemeと入力するとたくさん見つかるしググってもいろいろ出てくるので好みのものをチェックするといいと思います。

カラースキーマはここまで。

Vintageous Vim化

もしVimみたいに使いたかったらVintageousを有効にしましょう。初期状態だと向こうになっています。さらに起動直後にコマンドモードに入れるようにしましょう。これでVimです。ぼくはfalseにしていますが笑

"ignored_packages":[],
"vintage_start_in_command_mode": true,

このコードをPreferences > Settings - Userに貼り付けてください。

gtとかgTを使いたい場合も設定が必要です。後ほどぼくのkeybindingまとめます。

ctrl + h,l,j,kでの上下左右移動 ショートカット、コマンド系

{ "keys": ["ctrl+l"], "command": "move", "args": {"by": "characters", "forward": true } },
  { "keys": ["ctrl+h"], "command": "move", "args": {"by": "characters", "forward": false } },
  { "keys": ["ctrl+k"], "command": "move", "args": {"by": "lines", "forward": false } },
  { "keys": ["ctrl+j"], "command": "move", "args": {"by": "lines", "forward": true } },

これの有無で使いやすさが全然違うのでぼくには必須です。

Terminality ターミナル

これを入れるとSublime textの上でTerminalが開けます。

Preferences > Key Bindings - Userに以下のコードを張り付ければ[ ⌘ + ctrl + r ]ですぐに開けるようになります。

{
    "keys": ["ctrl+alt+r"],
    "command": "terminality",
    "args": {
        "action": {
            "name": "main"
        },
        "arguments": false
    }
},

IME support 日本語関係

日本語で入力するのに、ちゃんとインラインで表示するにはこれが必要です。

ConvertToUTF8 日本語関係

文字化けしたファイルを開いてFile > Set File Encoding to > 好きなエンコードに設定してファイルを保存すればエンコード完了です。

f:id:hiroyoshi-deki:20151211100018p:plain

Codecs33 日本語関係

ConvertToUTF8を正しく動かすために必要。とりあえず入れましょう。

All Autocomplete オートコンプリート

オートコンプリートが強化されて、ファイル内のマッチングした文字列とかも行けるようになります。でも、たまに邪魔なときも笑

AutoFileName オートコンプリート

ファイルを飛び越えてオートコンプリートしてくれるようになります。同じ改装だけでなく、プロジェクトの下の階層など相対パスも認識してくれます。

BracketHighlighter 表示系統

対応するかっこをハイライトしてくれるようになります。見やすい!

f:id:hiroyoshi-deki:20151211101449p:plain

SideBarEnhancements サイドバー強化

サイドバーでファイルのリネームや除去などいろいろできるようになります。

FindKeyConflicts ショートカット、コマンド系

キーコンフィグの衝突を探してくれます。ぼくはパッケージいれまくったので、だいぶコンフリクトしてますが、そこまで問題にならないので、そのまま使っています。

Nettuts+ Fetch

事前にURLを指定しておけば、プロジェクトにそのURLにあるファイルを落とすことができる。普段使うようなものをたくさん登録しておけばすぐにプロジェクトを始められるので、慣れてきた人にめちゃくちゃ便利。

[ ⌘ + shift + p ]のコマンドパレットにFetchと打ち込むとManageとFileとPackageというところがあります。

  • Manage - 設定ファイルの編集
  • File - 設定ファイルにあるコードを開いているファイルにペーストする
  • Package - フォルダごとダウンロードします

ただネット環境に依存してしまうので、外だと何もできない人間になってしまうこともあるので、ぼくはスニペットを作成することをおすすめします。

Color Picker

色コードをカラーピッカーを使って選択できます。

f:id:hiroyoshi-deki:20151211170942p:plain

ぼくは設定が必要でした。

{ "keys": ["alt+shift+c"], "command": "color_pick" },

このコードをPreferences > Key Bindings - Userに貼り付けてください。最後にまとめたあるので、今しなくても大丈夫です。

Dek1chan-sublime-snippet

github.com

ぼくが普段使っているスニペットです。自作です。

他にもスニペットをいろいろ入れてあげるととても便利になると思います。

是非登録の仕方も覚えてください。

sublime-snippetの登録方法

/Users/{user name}/Library/Application Support/Sublime Text 3/Packages/

sublime text 3 ならこの場所に「.sublime-snippet」という拡張子のファイルを以下の書式で置いていくだけです。フォルダを組んでも自動で下の方まで読み込んでくれます。

<snippet>
  <content><![CDATA[
  <!-- 登録したい内容をここのCDATAの中に -->
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>mailre</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>source.ruby</scope>
</snippet>

tabTriggerには呼び出すときのトリガーになる文字列を入れてください。

scopeはファイルの拡張子を設定できます。sublime textでファイルを開いて[ ⌘ + opt + p ]で下の方に小さく表示されます。

f:id:hiroyoshi-deki:20151215153259p:plain

ですが、たまにスコープ指定しても発動しないことがあるので、困ったらスコープ空にするといいと思います。

TrailingSpaces

行末のスペースのハイライトと削除を行ってくれる。

{ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },

これをPreferences > Key Bindings - User に追記してください。

あとでまとめる、ぼくのKey Bindings - Userにも書いてあります。

そうすれば[ ctrl + shift + t ]で発動できます。

最後にぼくのsublime-settingsとkey bindingsを!

Sublime settings - User

{
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",

  // 空白を見える化
  "draw_white_space": "all",
  "font_size": 16,

  // vintageous 有効か
  "ignored_packages":["vintageous"],

  // tab size固定
  "tab_size": 2,

  // エディター横の空白を減らす。
  "margin": -15,

  // 文字数のところに縦のラインを表示する。
  "rulers": [80],

  // phase, smooth, blink, solid, wide など: top,bottomは上下の飛び出し。
  "caret_style": "phase",
  "caret_extra_top": 1,
  "caret_extra_bottom": 1,

  // 文章の折り返し、ぼくは勝手にされるようにTrue
  "word_wrap": true,

  // 右側のミニマップが枠で囲まれます。
  "draw_minimap_border": true,

  // キャレットの行がハイライトされる。
  "highlight_line": true,

  // Autcompleteをタブでしか行わずEnterは改行だけにする。
  "auto_complete_commit_on_tab": true,

  // サイドバーのフォルダ名を太字にする
  "bold_folder_labels": true,
  "theme": "Material-Theme-Darker.sublime-theme",

  // 基本的にスペースで
  "translate_tabs_to_spaces": true,

  // vim keybindを使う
  "vintage_ctrl_keys": true,

  // vim command mode でスタート
  "vintage_start_in_command_mode": false,

  // yankではなく普通にコピーにする。
  "vintage_use_clipboard": true,

  // スクロールバーを一体化して動かしたときだけにする。
  "overlay_scroll_bars": "enabled",

  // コードを=や:の位置で縦に揃えてくれる。
  "alignment_chars": ["=",":"],
  
  { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },
}

Sublime Key Bindings - User

[
  // タブの切り替え
  { "keys": ["g", "t"], "command": "next_view",
     "context":
     [
             { "key": "setting.is_widget", "operand": false },
             { "key": "setting.command_mode" }
     ]
  },
  { "keys": ["g", "T"], "command": "prev_view",
     "context":
     [
             { "key": "setting.is_widget", "operand": false },
             { "key": "setting.command_mode" }
     ]
  },
  { "keys": ["j","j"], "command": "exit_insert_mode",
    "context":
    [
      { "key": "setting.command_mode", "operand": false },
      { "key": "setting.is_widget", "operand": false }
    ]
  },
  { "keys": ["ctrl+l"], "command": "move", "args": {"by": "characters", "forward": true } },
  { "keys": ["ctrl+h"], "command": "move", "args": {"by": "characters", "forward": false } },
  { "keys": ["ctrl+k"], "command": "move", "args": {"by": "lines", "forward": false } },
  { "keys": ["ctrl+j"], "command": "move", "args": {"by": "lines", "forward": true } },
  {
    "keys": ["ctrl+alt+r"],
    "command": "terminality",
    "args": {
      "action": {
        "name": "main"
      },
      "arguments": false
    }
  },
  { "keys": ["alt+shift+c"], "command": "color_pick" },
  { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },
  { "keys": ["super+right"], "command": "move_to", "args": { "to": "hardeol" } },
 { "keys": ["super+left"], "command": "move_to", "args": { "to": "hardbol" } },
]

 

© 2015 かんがえちゅう!