• 日本語
  • English
  • 中文
MENU
CREATE A PLATFORM FOR DIVERSITY
Web, Game, App, Illustration
https://monstar-lab.com/
Tips
2015/02/19
カスタマイズしまくったSublime Textの設定を晒してみる

モンスター・ラボでフロントエンドをやっている井口です。
今回は数々のフロントエンドエンジニアを恋に落としてきたSublime Text、その子の僕の設定を晒してみます。

Packageいろいろ

Sublime Textの魅力は豊富なPackageにあります。自分の開発環境に合わせて最適なPackageをいれることでeclipseやdreamweaver,coda2等に負けないeditorにカスタマイズすることが出来ます。以下僕のinstallしたPackageです。

{
	"installed_packages":
	[
		"All Autocomplete",
		"AutoFileName",
		"Autoprefixer",
		"Better CoffeeScript",
		"BoundKeys",
		"Codecs33",
		"Color Highlighter",
		"ColorPicker",
		"Compass",
		"ConvertToUTF8",
		"CSS3_Syntax",
		"CTags",
		"DocBlockr",
		"Emmet",
		"FileBrowser",
		"FileOpTabContextMenu",
		"FindKeyConflicts",
		"Git",
		"GitGutter",
		"Haml",
		"Hayaku - tools for writing CSS faster",
		"HTML-CSS-JS Prettify",
		"HTML5",
		"Inc-Dec-Value",
		"InputSequence",
		"Jade",
		"Java Velocity",
		"Jinja2",
		"jQuery",
		"Jump Along Indent",
		"Keymaps",
		"LineEndings",
		"List stylesheet variables",
		"LiveStyle",
		"Local History",
		"Markdown Preview",
		"PHP-Twig",
		"PlainTasks",
		"PowerShell",
		"RailsCasts Colour Scheme",
		"RecentActiveFiles",
		"Ruby Slim",
		"Sass",
		"SASS Snippets",
		"SCSS",
		"SFTP",
		"SideBarEnhancements",
		"SideBarGit",
		"Slim",
		"Stylus",
		"Sublime Files",
		"SublimeLinter",
		"SublimeLinter-contrib-scss-lint",
		"SublimeLinter-csslint",
		"SublimeLinter-haml",
		"SublimeLinter-jshint",
		"Sublimerge Pro",
		"SuperNavigator",
		"Syntax Highlighting for Sass",
		"Terminal",
		"Theme - itg.flat",
		"Vintageous",
		"Zip Browser"
	],
	"repositories":
	[
		"https://github.com/kope88/InputSequence.git"
	]
}

ちなみにメニューバーから 、
Preferences -> Package Settings -> Package Control -> Settings – User
を開き、上記のコードをペタっとすると勝手にすべてインストールしてくれます。それでは中でもオススメのPackageをいくつかピックアップしてご紹介したいと思います。

All Autocomplete

補完強化

AutoFileName

ファイルのpathを追ってファイル名の候補を出してくれます。
画像のサイズも勝手に入ってくれるのがありがたいです。

Color Highlighter

`#faa`などのカラーコードにその色のフォーカスが当たります。
色が直感的にわかるので便利。

FileBrowser

Sublime textのファイル操作はめんどくさいので僕はこれを使っています。

GitGutter

これがないと生きていけない

Hayaku – tools for writing CSS faster

これがないと生きていけない

LiveStyle

とても人気。僕はあまり使わないですが。

Sublimerge Pro

差分見たりmergeしたりするときに便利

設定


{
	"auto_complete": true,
	"bold_folder_labels": true,
	"close_windows_when_empty": false,
	"color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme",
	"debug": true,
	"draw_indent_guides": true,
	"draw_white_space": "all",
	"file_exclude_patterns":
	[
		"*.pyc",
		"*.pyo",
		"*.exe",
		"*.dll",
		"*.obj",
		"*.o",
		"*.a",
		"*.lib",
		"*.so",
		"*.dylib",
		"*.ncb",
		"*.sdf",
		"*.suo",
		"*.pdb",
		"*.idb",
		".DS_Store",
		"*.class",
		"*.db",
		"*.sublime-workspace"
	],
	"fold_buttons": true,
	"font_face": "Ricty",
	"font_size": 16.0,
	"highlight_line": true,
	"ignored_packages":
	[
	],
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"itg_small_tabs": true,
	"tab_size": 2,
	"theme": "itg.flat.dark.sublime-theme",
	"translate_tabs_to_spaces": true,
	"vintage_start_in_command_mode": true,
	"vintageous_enable_cmdline_mode": true,
	"vintageous_use_ctrl_keys": true
}

設定ファイルはこんな感じです。無駄なものもいっぱい書いてますがポイントは`Ricty`を使っていることとvimモードの設定でしょうか。Rictyは本当によい子です。file_exclude_patternsはsublimeで表示しない拡張子一覧ですが本来はdefaultにあるので必要ありません。僕はpsdだけside barに表示したかったのでここで上書きしています。

KeyBinding


[
    {
        "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": ["super+r"],
        "command": "redo"
    },
    {
        "keys": ["shift+i"],
        "command": "find_under_expand",
        "context":
        [
            { "key": "simpleclone_keymap_enabled.down" },
            { "key": "setting.command_mode" },
        ]
    },
    {
        "keys": [","],
        "command": "toggle_comment",
        "args": { "block": false },
        "context":
        [
            { "key": "simpleclone_keymap_ena∏instabled.down" },
            { "key": "setting.command_mode" },
        ]
    },
    {"keys": ["super+shift+c"],"command":"color_pick"},
    { "keys": ["ctrl+9"],"command": "dired"},
    {
        "keys": ["super+alt+9"],
        "command": "set_layout",
        "args":
        {
            "cols": [0.0, 0.5, 1.0],
            "rows": [0.0, 0.8, 1.0],
            "cells":
            [
                [0, 0, 1, 1], [1, 0, 2, 1],
                [0, 1, 2, 2]
            ]
        }
    },
    {
        "keys": ["super+alt+8"],
        "command": "set_layout",
        "args":
        {
            "cols": [0.0, 0.2, 1.0],
            "rows": [0.0, 1.0],
            "cells":
            [
                [0, 0, 1, 1], [1, 0, 2, 1]
            ]
        }
    },
    {
        "keys": ["super+alt+7"],
        "command": "set_layout",
        "args":
        {
            "cols": [0.0, 0.8, 1.0],
            "rows": [0.0, 1.0],
            "cells":
            [
                [0, 0, 1, 1], [1, 0, 2, 1]
            ]
        }
    }
]

僕はSublime Textをvimモードで使っているのでその辺りのバインドも入っています。

Snippetを追加していこう

「あれ?この書き方どうするんだっけ?コピペしよう」ってことよくありませんか?
ライブラリに依存していたり普段使わないテンプレートエンジンとかだとあるかと思います。
例えばmiddlemanとかでslimを使ってimage_tagヘルパと画像ヘルパを入れるとこうなります。

= image_tag "#{lorem.image ('100x150')}", class: "className"

いちいち入力するのも面倒ですし覚えるまでは戸惑うばかりですね。 そこでsnippet Tools -> New Snippet…を開き


  
  
  image_tag
  
  text.slim

とかして保存してみましょう。これだけで`image_tag`->`tab`で先ほどのコードが出てきてくれます。 とても便利。

Packageを改造!

たくさん落としてきたPackageですが僕はkey bindやちょっとした不満などはどんどん改造してしまいます。
`Command+Shift+p`で`browse package`とするとインストールしたpackageのあるフォルダがファインダーで開きます。
簡単なpythonとxml,jsonだけで簡単に自分好みにカスタマイズ出来るので是非挑戦してみてください。僕はSlimでBemを使っているときによしなにカラーリングするPluginや全角半角変換用のPlugin等を案件に合わせて遊びがてら作っています。そう!Sublime Textの一番の魅力は「好き勝手拡張しやすいこと」なのです。

まとめ

php stormやatom,bracketsなど多くのIDE、エディタがありますが僕はSublime Textが一番しっくりきました。
今回設定を晒すことを目的としたので紹介しきれませんでしたがprojectにbuild systemを追加したり共通の設定にしたり便利な使い方はいっぱいあります。terminalからsublコマンドでSublime Textを開く等調べればいろいろ出てくるので是非自分だけのSublime Textを楽しんでください。

ちなみにモンスター・ラボではSublime Texter、vimmer問わずフロントエンドエンジニアを募集しています!
僕はmiddlemanやroots等でslimやjade,sass,stylus,coffee script等を使い開発していますが一緒にモダンなフロントエンド開発をしてくれる人、心よりお待ちしております。

Archives