Sublime Textのインストールから各種設定。

Sublime Textについて

Sublime Text - Download
開発者に特化したテキストエディタ
有料
Atomに比べ軽い
日本語が弱い

Package

Package Controlのインストール

Packageをインストールする前に、Package Controlのインストールが必要。

Installation - Package Controlにアクセス
記載さているコード「import .......write(by)」をコピー
Sublime Textを開き、「View > Show Console」を選択後、コードをペーストしReturn
再起動し、「Preference > Package Control」が選択できるようになっていたら完了

インストール方法

cmd+shift+p(もしくは「Tools > Command Palet」)を実行し、コマンドパレットを表示
「install」と入力。「Package Control: Install Package」を選択
インストールしたいパッケージ名を入力して実行、インストールする

インストール済

ConvertToUTF8：shift_jisのファイルを開いた際の文字化けを防ぐ
Codecs33：同様に文字化けを防ぐ
emmet：HTML、CSSの記述・編集を効率的に
All Autocomplete：入力補完
AutoFileName：ファイル参照強化
SublimeCodeIntel：JavaScript、HTML等の入力補完
BracketHighlighter：タグの開始・終了をハイライト
Syntax-highlighting-for-Sass：sassのハイライト
Alignment：コードの位置調整
HTML5：htmlの入力補完
JavaScript & NodeJS Snippets：JavaScriptの入力補完
jQuery：jQueryの入力補完
SublimeLinter：文法チェック
SublimeLinter-jshint：JavaScriptの文法チェック
SublimeLinter-jsxhint：JSXの文法チェック
SublimeLinter-csslint：CSSの文法チェック
SublimeLinter-contrib-scss-lint：SASSの文法チェック
Color Highlighter：コードの色指定の色を表示
Ecmascript Syntax：EcmaScriptのシンタックス追加
SideBarEnhancements：サイドバー強化
Can I Use：CSSのプロパティについて各環境の対応状況をチェックできる
View in Browser：開いているHTMLを設定したブラウザで開く
AdvancedNewFile：ファイル制作を瞬時に行う
SublimeCodeIntel：目的のfunctionが定義されているjsファイルにジャンプ
React Snippets：Reactのスニペット
Babel Snippets：Babelのスニペット

他、language packから利用する言語のハイライトを追加

language syntax - Labels - Package Control

現状以下を追加している

Angular2
Babel
TypeScript

Theme

たまにバグる為、デフォルトを利用。Matrialを入れる。「Preferences > Settings」の「color_scheme」「theme」を以下に変更。

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

Settings

「Preferences > Settings」のUserの画面で以下をペースト

  {
  	"always_show_minimap_viewport": true,
  	"auto_complete_commit_on_tab": true,
  	"auto_complete_triggers":
  	[
  		{
  			"characters": "<>\"'-_qazwsxedcrfvtgbyhnujmikolpQAZWSXEDCRFVTGBYHNUJMIKOLP",
  			"selector": "text, source, meta, string, punctuation, constant"
  		}
  	],
  	"auto_match_enabled": true,
  	"bold_folder_labels": true,
  	"caret_style": "phase",
  	"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
  	"create_window_at_startup": false,
  	"drag_text": true,
  	"draw_white_space": "all",
  	"ensure_newline_at_eof_on_save": true,
  	"find_selected_text": true,
  	"font_face": "Migu 1P Regular",
  	"font_size": 15,
  	"highlight_line": true,
  	"highlight_modified_tabs": false,
  	"ignored_packages":
  	[
  		"Vintage"
  	],
  	"line_numbers": true,
  	"line_padding_bottom": 2,
  	"line_padding_top": 2,
  	"match_tags": true,
  	"overlay_scroll_bars": "enabled",
  	"show_encoding": true,
  	"show_full_path": true,
  	"show_line_endings": true,
  	"smart_indent": true,
  	"tab_size": 2,
  	"theme": "Default.sublime-theme",
  	"translate_tabs_to_spaces": true,
  	"trim_trailing_white_space_on_save": true,
  	"word_wrap": true,
  	"fold_buttons": true,
  	"auto_indent": true,
  	"smart_indent": true
  }

※場所：~/Library/Application Support/Sublime Text 3/Packages/User
指定フォント：Miguフォント : M+とIPAの合成フォント

他の設定

JSX/Babel のハイライト

jsx記法のjsファイルを開いた際、デフォルトのJavaScriptシンタックスが正しく表示しないため設定

JSファイルを開く
「View > Syntax > Open All with current...」から「Babel > JavaScript(Babel)」を選択

Cmd+bでブラウザで確認できるようにする(view in browser)

「Preferences > Keybinds」を選択
Defaultの内容をUserにペースト

Userの方に以下を追加

 { "keys": [ "super+b" ], "command": "view_in_browser" },

ショーットカットキーのコンクリフト調整。「"super+b"」で検索して対象を削除

 「"super+b"」だけ削除
 { "keys": ["super+k", "super+b"], "command": "toggle_side_bar" },
 一行削除(もしくはコメントアウト)
 //{ "keys": ["super+b"], "command": "build" },

さらに、起動ブラウザをChromeにする場合は

「Preferences > Package Settings > View in browser > Settings - Default」を選択
内容をコピー
「Preferences > Package Settings > View in browser > Settings - User」を選択
内容をペースト
一番下の「"browser": "firefox"」を以下に変更
```
 "browser": "chrome"
```
cmd+bで挙動を確認

※「Settings - Default」が空の場合があったので、以下に残しておく(OSX)

{
  "posix": {
    "darwin": {
      "firefox": "open -a \"/Applications/Firefox.app\"",
      "safari": "open -a \"/Applications/Safari.app\"",
      "chrome": "open -a \"/Applications/Google Chrome.app\"",
      "chrome64": "open -a \"/Applications/Google Chrome.app\""
    }
  },
  "browser": "chrome"
}

Linterの設定

Packageをインストール後、ターミナルを開き以下を実行

sudo npm install -g jshint
sudo gem install scss_lint
sudo npm install -g jsxhint

sublコマンドのインストール

ターミナルを開き以下を実行

sudo ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl

カレントディレクトリをsublimeで開く

subl .

emmetの設定

「Preferences > Package Settings > Emmet > Settings - User」を選択

以下のコードをペーストして保存

{
    "snippets": {
        "variables": {
            "lang": "ja",
            "locale": "ja-JP",
            "charset": "UTF-8",
            "indentation": "\t",
            "newline": "\n"
        }
    }
}

作業がはかどるショートカット

2分割

cmd+option+2

ブラウザで開く(view-in-browser)

※上記が設定されていることが前提

cmd+b

指定した行に飛ぶ

Ctrl+g

ファイルを追加する(AdvancedNewFile)

cmd+alt+n

JavaScript & NodeJS Snippetsチート

JavaScript & NodeJS Snippets - Packages - Package Control

[cl] console.log
[gi] getElementById
[ih] innerHTML

Snippet

保存場所

~/Library/Application Support/Sublime Text 3/Packages/User

作り方

「Tools > Developer > New Snippet...」を選択

以下「CDATA」で囲んである箇所を調整する

  <content><![CDATA[
 Hello, ${1:this} is a ${2:snippet}.
 ]]></content>

保存。ファイル名が呼び出しキーワードになるので呼び出しやすいファイル名(英語)で保存の事

備考

呼び出し方はshift+cmd+pでパレットを呼び出し、保存したファイル名を入力
拡張子は「sublime-snippet」
tabで飛び先を指定したい場合は「${1:this}」のように指定する。「this」はデフォルトで入る値