LoginSignup
18
22

More than 5 years have passed since last update.

@jam(jam)

自分用Sublime Text3の設定メモ

Last updated at Posted at 2015-11-18

自分用Sublime Text3の設定メモ

※ 基本的にMacでの設定なので、他のOSだと一部異なる場合があります。

Package(プラグイン)

Package Control

これを入れないと始まらない。
参考：https://packagecontrol.io/installation

以下、よく使うPackage

Abacus

  • before
hoge = hoge
hoge2 = hoge2
hogehoge = hogehoge
  • after
hoge     = hoge
hoge2    = hoge2
hogehoge = hogehoge

All Autocomplete

オートコンプリートの拡張

BracketHighlighter

カッコや開始タグ/閉じタグを強調

Codecs33

「ConvertToUTF8」をMacで動かすためのもの

ConvertToUTF8

shift-jis、euc-jpを利用可能にする

CSScomb

CSSのセレクタを任意の順序に並び替え。可読性アップ。

PackageControlから消えた？ようなので、GitHubからインストール
Package Control: Add Repository -> Package Control: Install Package
https://github.com/csscomb/sublime-csscomb.git

自分用設定ファイル
https://gist.github.com/jamog3/c12e044f051b22a30e1e

memo：
node.jsを使用しており、nodebrewなどで管理してる場合は、
デフォルトのパスから変更されてしまっているので、
macの場合、シンボリックリンクを貼る必要がある。

ターミナルで

$ which node

そこで表示されたものをコピーし、

$ ln -s 「ここに貼る」 /usr/local/bin

Emmet

みんな大好きEmmet。htmlとかcssの記述が爆速に。
チートシート：http://docs.emmet.io/cheat-sheet/

FindKeyConflicts

コンフリクトしたショートカットキーの確認

GitGutter

gitで管理してる場合、変更があった行番号にアイコンが追加されて教えてくれる

Goto-CSS-Declaration

html上でショートカットキーを押すと、対応したcssにジャンプ。
ただし、BEM+SCSSで、&__hoge みたいな記述だと反応しない。

HTML-CSS-JS Prettify

コードフォーマットの設定

Inc-Dec-Value

alt+up / alt+downで数値を増減

Local History

保存するたびにローカルに自動バックアップを生成

OmniMarkupPreviewer

Markdown記法をリアルタイムプレビュー

SideBarEnhancements

サイドバーを拡張

StringEncode

文字列変換

  • URLエンコード
あいうえお -> %E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A
  • HTML特殊記号(HTML Entitize)
<¥> -> &lt;&yen;&gt;
  • Unicode変換
“” -> \u201c\u201d

sublime-multi-number-input

連番入力を劇的に楽にする。
PackageControllerからは追加できないので下記から。
参考：http://qiita.com/airosB/items/5b743e419bbe1a1f22f9

SublimeCodeIntel

関数定義元にジャンプする

SublimeLinter

  • SublimeLinter-coffee
  • SublimeLinter-contrib-sass-lint
  • SublimeLinter-contrib-scss-lint
  • SublimeLinter-csslint
  • SublimeLinter-jshint

など。各記法のlintチェック用。いろいろ設定が必要なので詳しくは下記を参照。
参考：http://liginc.co.jp/web/js/73704

SublimeServer

Sublime Text単体でローカルサーバを起動。
自分の環境だと不安定でよくフリーズするがお手軽なのでたまに利用。

SuperSelect

Cmd+D(Ctrl+D)を拡張

Theme - Afterglow

お気に入りのテーマ。使いやすい。

Trailing Spaces

不要な半角/全角スペースをハイライト
Preferences > Package Settings > Trailing Spaces > Settings - User

{
  "trailing_spaces_regexp": "　|[ 　\t]+"
}

その他

Syntax用に使用するものとか。
実際に使用する言語などに応じてインストール。

  • Jade
  • Jade Snippets
  • JavaScript Console
  • JavaScript Patterns
  • JavaScript Snippets
  • jQuery
  • jQuery Snippets pack
  • Mocha Coffee Snippets
  • ReactJS
  • Ruby Slim
  • Sass
  • SASS Snippets
  • SCSS
  • SCSS Snippets
  • Syntax Highlighting for Sass

Settings - User

Sublime Text3の設定
Preferences > Settings - User

Preferences.sublime-settings
{
    "auto_complete_commit_on_tab": false,
    "bold_folder_labels": true,
    "close_windows_when_empty": true,
    "color_scheme": "Packages/User/SublimeLinter/Monokai Bright (SL).tmTheme",
    "dictionary": "Packages/Language - English/en_GB.dic",
    "draw_indent_guides": true,
    "draw_minimap_border": true,
    "draw_white_space": "all",
    "font_face": "Ricty Regular",
    "font_options":
    [
        "subpixel_antialias",
        "no_italic",
        "no_round",
        "directwrite"
    ],
    "font_size": 13,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Abacus",
        "sublime-csscomb",
        "sublime-multi-number-input",
        "Vintage"
    ],
    "indent_guide_options":
    [
        "draw_active"
    ],
    "jshint_options":
    {
    },
    "overlay_scroll_bars": "enabled",
    "show_encoding": true,
    "show_full_path": true,
    "show_line_endings": true,
    "show_tab_close_buttons": false,
    "status_bar_brighter": true,
    "sublimelinter_delay": 0.3,
    "sublimelinter_gutter_marks": true,
    "sublimelinter_wrap_find": true,
    "tab_size": 2,
    "tabs_padding_medium": true,
    "tabs_small": true,
    "theme": "Afterglow-orange.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "word_wrap": true
}

参考：http://qiita.com/lunatea/items/7101572e159f98369bc9

なお、記述ミスがある状態で保存するとダイアログが出てくる。
そのままの状態でSublime Textを終了すると、立ち上がらなくなることがあるので注意。
やらかした場合は、別のテキストエディタでこの設定ファイルを修正すれば復活する。

Syntax Specific - User

Syntax別に設定する場合。該当ファイルを開いた状態で下記から開く。
Preferences > Settings - More > Syntax Specific - User

xxx.sublime-settings
{
  "auto_complete": false
}

例：特定のSyntaxの際、自動補完を切る

KeyBindings - User

ショートカットキーがバッティングしてた場合など、ここで別のショートカットキーに割り当てる。
Preferences > KeyBindings - User

Default.sublime-keymap
[
  // emmet
  {
      "keys": [
          "command+e"
      ],
      "args": {
          "action": "expand_abbreviation"
      },
      "command": "run_emmet_action",
      "context": [
          {
              "key": "emmet_action_enabled.expand_abbreviation"
          }
      ]
  },
  // Input Sequence sublime-multi-number-input
  { "keys": ["command+shift+alt+0"], "command": "multi_number_input"},

  {
    "keys": ["ctrl+shift+alt+."], "command": "goto_css_declaration",
    "args": {"goto": "next"}
  },
  {
    "keys": ["ctrl+shift+alt+,"],  "command": "goto_css_declaration",
    "args": {"goto": "prev"}
  },
  // indent
  { "keys": ["super+alt+r"], "command": "reindent" ,
    "args": { "single_line": false }
  },
  // タグ選択
  {
    "keys": [
        "command+ctrl+a"
    ],
    "command": "rename_tag",
    "context": [
        {
            "key": "emmet_action_enabled.rename_tag"
        }
    ]
  },
  // shift + enter で Dreamwerverのように<br>を挿入
  { "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "<br>"},
   "context": [
     {
       "key": "selector",
       "operand": "text.html.basic - source",
       "operator": "equal"
     }
   ]
  },
  // jade用
  { "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "\nbr\n| "},
   "context": [
     {
       "key": "selector",
       "operand": "source.jade, text.jade",
       "operator": "equal"
     }
   ]
  },
  // オートコンプリート
  { "keys": ["alt+space"], "command": "auto_complete" }
]

operandは、該当ファイルを開いた状態で command + alt + p でステータスバーに表示される。

Syntaxのデフォルトを変更

該当のファイルを開いた状態で、
View > Syntax > Open all with current extension as...
から選択

検索窓で日本語を入力

参考：https://gist.github.com/chibicode/ad1f50b3b191ee694556

ついでに、F7でカナ変換もしたいので、下記もコメントアウト

{ "keys": ["f7"], "command": "build" },

他のMacでの設定の同期

DropboxかGitでやるのが一般的なようで。
参考：https://packagecontrol.io/docs/syncing

よく使うショートカットとか

※ Mac用です。commandをctrlに置き換えると一部はWindowsでも使えます。

カーソル関連

  • ctrl + shift + up / ctrl + shift + down
    カーソルが上下に増える。マルチカーソル機能。
    Macの場合、OSのショートカットと衝突するので、OS側の設定を要変更。

  • （単語などを選択した状態で）command + D
    同じものを検索して選択状態になる

  • command + クリック
    複数のカーソルを任意の位置に配置

  • command + shift + D
    カーソルがある行を複製

  • command + ctrl + up / command + ctrl + down
    カーソルがある行を上下に移動

  • command + L
    1行選択。連打で行数が増える

  • （複数行を選択した状態で）command + shift + L
    各行にカーソルが現れる

検索

  • command + F
    検索

  • command + shift + F
    複数のファイルの中から検索

その他

  • command + P
    プロジェクト内のファイルを検索して開く

  • command + /
    コメントアウト

  • command + alt + 2
    画面を2列に分割

18
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
18
22