Sublime Textの環境構築(随時更新予定)


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


## Sublime Textについて

- [Sublime Text - Download](https://www.sublimetext.com/3)
- 開発者に特化したテキストエディタ
- 有料
- [Atom](https://atom.io/)に比べ軽い
- 日本語が弱い


## Package

### Package Controlのインストール

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

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

### インストール方法

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


### インストール済

- ConvertToUTF8：shift_jisのファイルを開いた際の文字化けを防ぐ
- Codecs33：同様に文字化けを防ぐ
- emmet：HTML、CSSの記述・編集を効率的に
- All Autocomplete：入力補完
- AutoFileName：ファイル参照強化
- SublimeCodeIntel：JavaScript、HTML等の入力補完
- BracketHighlighter：タグの開始・終了をハイライト
- Syntax-highlighting-for-Sass：sassのハイライト
- Alignment：コードの位置調整
- HTML5：htmlの入力補完
- Java​Script & Node​JS 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を設定したブラウザで開く
- Advanced​New​File：ファイル制作を瞬時に行う
- SublimeCodeIntel：目的のfunctionが定義されているjsファイルにジャンプ
- React Snippets：Reactのスニペット
- Babel Snippets：Babelのスニペット

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

- [language syntax - Labels - Package Control](https://packagecontrol.io/browse/labels/language%20syntax)

現状以下を追加している

- 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の合成フォント](http://mix-mplus-ipa.osdn.jp/migu/)

## 他の設定

### JSX/Babel のハイライト

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

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

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

1. 「Preferences > Keybinds」を選択
2. Defaultの内容をUserにペースト
3. Userの方に以下を追加

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

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

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

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

1. 「Preferences > Package Settings > View in browser > Settings - Default」を選択
2. 内容をコピー
3. 「Preferences > Package Settings > View in browser > Settings - User」を選択
4. 内容をペースト
5. 一番下の「"browser": "firefox"」を以下に変更

		"browser": "chrome"

6. 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の設定

1. 「Preferences > Package Settings > Emmet > Settings - User」を選択
2.  以下のコードをペーストして保存

		{
		    "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


### ファイルを追加する(Advanced​New​File)

- cmd+alt+n


## Java​Script & Node​JS Snippetsチート

[JavaScript & NodeJS Snippets \- Packages \- Package Control](https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets)

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


## Snippet

### 保存場所

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


### 作り方

1. 「Tools > Developer > New Snippet...」を選択
2. 以下「CDATA」で囲んである箇所を調整する

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

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

### 備考

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