Sublime Text 3 初期設定

  • このエントリーをはてなブックマークに追加

「Doreamweaver重すぎるんだよ!」ってなり、Codaを使い始め、最近はSublime Textを使い始めてみました。

色々調べていて自分なりの設定をメモっておこうと思います!
基本的にはMacでの設定方法です!


プラグイン

「Package Control」の導入方法

  1. https://sublime.wbond.net/installation より
    Sublime Text 3の内容をコピーする。
  2. 「View → Show Console」にコピーした内容をペーストする。

インストール方法

  1. 「command + shift + p」でwindowを開き「install Package」を選択します。
  2. インストールしたいプラグインを検索し、クリックします。

プラグインを削除する方法

  1. 「command + shift + p」でwindowを開き「Remove Package」を選択します。
  2. 削除したいプラグインをクリックします。

japanize

日本語化 とにもかくにも日本語化したい人は入れておくと良いと思います。

HTML5

html5タグの補完

SASS,SCSS

  • scssをカラーリング
  • コード補完 SASSとSCSSの2種類のプラグインがあります。
    なんか使ってみたら少し補完などが違いました。

実際に使ってみて自分に合う方を使ってみると良いと思います。

※ もしもカラーリングされない場合はscssのファイルを開いた状態で右下のタイプが書かれている部分をクリック
「Open all width current extension as...」と書いてあるところからsassまたはscssを選択すれば今開いている拡張子のファイルを全てその設定を反映することができます。

jQuery

jQuery の コード補完

DocBlockr

YUIDocっぽい関数のコメントを入力補完してくれるプラグインです。

「/**」と入力して「Enter」を押すと下記のように展開してくれます。

/**
 * [description]
 * @param  {[type]}  [description]
* @return {[type]}  [description]
 */

今プラグインを入れていると//とコメントして日本語入力しEnterを押すと日本語入力が消えてしまうことがあるようです。
「Sublime Text → Preferences → Package Settings → DocBlocker → Settings - User」に下記を記述すると大丈夫なようです。

{
    "jsdocs_extend_double_slash": false,
}

TrailingSpaces

行末のスペースをカラーリングしてくれる
Sublime Text 2 で trailing space に色をつける

今いる行は色を付けないようにする

  1. 「Sublime Text → Preferences → Package Settings → Trailing Spaces → Settings - User」
  2. 下記を記述
{
    "trailing_spaces_include_current_line": false
}

一気に消すショートカットを設定

  1. 「Sublime Text → Preferences → Key Bindings - User 」
  2. 下記を記述(keysは自分のおこのみで変えて下さい。)
[
    {
        "keys": ["ctrl+shift+d"],
        "command": "delete_trailing_spaces"
    }
]

CSScomb

CSSのプロパティをソートしてくれます。
またソートするプロパティの順番も自分でカスタマイズ可能!これ案件で書き順きまってるときとかにめっちゃ便利ですね。

http://dev.classmethod.jp/tool/csscomb/

Google Translate

ファイル内の文字列を翻訳してくれる。 選択してショートカットを実行することでその行を翻訳してくれます!めちゃ便利!

テーマ

インストール方法

通常は「command + shift + p」でinstall Packageを開きthemaと検索して使いたいテーマを選ぶことができます。 ですが「Aqua - Esspresso」がinstall Packageになかったので直接インストールしました。

手順

  1. 「/Users/**/Library/Application Support/Sublime Text 3/Packages」に「git clone https://github.com/cafarm/aqua-theme.git "Theme - Aqua"」でファイルをgithubからコピーする
  2. 「Sublime Text → Preferences → Color Scheme → Thema - Aqua」よりEsspressoを選択。

テーマを自作する

TmTheme Editor」を使うとテーマを簡単に自作することもできます。

使い方

Sublime Textのカスタムカラーテーマの作り方と使い方 - Axross.log

ショートカット

標準

ctrl + g
行の移動
command + r
項目に移動
command + p
プロジェクト内ファイル名検索
command + option + f
置換
command + shift + f
フォルダを選択して置換
command + d
同じ文字を複数選択→一括編集
command + k
ひとつ飛ばししたい場合
command + /
option + shift + /
コメントアウト

追加

  1. 「Sublime Text → Preferences → Key Bindings - User 」
  2. Sublime Text 3でeclipseのF3のような関数ジャンプキーバインドを設定する
{
    "keys": ["f3"], "command": "goto_definition"
}
F3
関数ジャンプ

Emmet

Ctrl + w
一気にタグを追加する
Ctrl + Shift + i
画像のサイズを取得する

Settings - User

{
    "color_scheme": "Packages/Theme - Aqua/Color Schemes/Espresso Aqua.tmTheme",
    "font_face": "Ricty",
    "font_size": 17,
    "ignored_packages":
    [
        "Vintage"
    ],
    "line_padding_bottom": 1,
    "line_padding_top": 1,
    "scroll_speed": 0,
    "tab_size": 2,
    "word_wrap": true,
    "shift_tab_unindent": true,
    "auto_match_enabled": false
}

個人的にはヒラギノ丸ゴシックも好きです。

"font_face": "Hiragino Maru Gothic ProN",
"font_size": 14

アンインストール方法

一度Sublime Textが壊れて起動するとCPU起動率が100%になるという事態がおきました・・。

いろいろプラグインとかアンインストールしたのですが直らず結局、設定とかを削除したのでどこを削除すればいいのか残しておきます。
「/Users/**/Library/Application Support/Sublime Text 3/」と「/Applications/Sublime Text.app」を削除してインストールをし直します。

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/115

このページの先頭へ戻る