MacでSublime Textを導入してみた[HTML5+JavaScript+Node.js+Markdown]



#動機
MacVim、Mou、Kobitoなどいろいろ使っているが、イマイチぴんと来ない…
//Vim派閥だけど.vimrcを公私で共有している縛りがあるので、思ったカスタマイズができない。


なので今回はSublimeTextを導入してみました。
Node.js、Emmet利用できる点にちょっと興味しんしん。
会社の先輩、NetBeansでやるって言ってごめんなさいｗ
ファイル構成はちゃんとNetBeans用でプロジェクト作りますｗｗｗ
だってやっぱりスタバ()でドヤリングできないですやん。。。

#インストール
まずは本体のインストール。今回は2.0.2
[http://www.sublimetext.com/](http://www.sublimetext.com/)

---

#パッケージ管理ソフトの導入
プラグインとでもいう拡張機能Packageを導入する。
`View - Show Console`を選択。

SublimeText2の場合は以下を記載。

```bsh
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

```

SublimeText3の場合は以下を記載。

```bsh
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

```
---

#Packageのインストール
ここから本格的なカスタマイズ。
`Command + Shift + p`で`Command Palette`が開く。
MacOSXの`Alfread`みたいなもん。`install`と入力すると`Install Package`が選択されるので、`Enter`。ひとつひとつ以下をインストールしていく。


| プラグイン名 | 内容 |
|--------|--------|
| HTML5  | 左記の自動補完|
| CSS    | 左記の自動補完|
| jQuery | 左記の自動補完|
| Bracket Highlighter| 対応する括弧をハイライト|
| Browser Refresh| `Opt+Ctrl+r`でブラウザ更新|
| SublimeLinter| HTML,CSS,JSのリアルタイムエラー解析|
| Goto-CSS-Declaration| `Cmd+→`でCSSの同じ単語にジャンプ|
| AdvancedNewFile | `Cmd+Opt+N`でパス指定して新規ファイル作成|
| Emmet | 略語書くとHTMLタグを展開してくれる。すげえ|
| Markdown Preview  | プレビュー用 |
| Markdown Extended | シンタックスハイライト用 |

---

##設定ファイルの変更
アプリを立ち上げて設定ファイルを開く。#vimみたいに設定「ファイル」です。
`Sublime text2 > Preference > Settings User (もしくはcommand + ,)`

```javascript:Preferences.sublime_settings
{
	//フォントサイズ
	"font_size": 13,
    //フォントタイプ
    "font-face": "Ricty",
	//行間
	"line_padding_top": 5,
	//タブサイズ
	"tab_size": 4,
	//空白の削除
	"trim_trailing_white_space_on_save": true,
	//タブやスペースなどの不過視文字を表示(お好みで)
	"draw_white_space": "all",
	//現在の選択行をハイライト表示(お好みで)
	"highlight_line":true,
	//自動改行
	"word_wrap": true
　　//[Emmet]Tabキー展開の停止
　　"disable_tab_abbreviations": true
   //[Emmet]日本語変換確定の文字消えを防ぐ
   "disable_formatted_linebreak": true
}

```
フォントタイプはお好きなように。
ちなみにMacでRicty使いたいならこのHomebrewが楽ちん。
[http://sanematsu.wordpress.com/2013/05/11/brew-install-ricty/](http://sanematsu.wordpress.com/2013/05/11/brew-install-ricty/)
会社で食わされるスパゲティのために構築するんだったら、ゆたぽんのほうが優しい気持ちでコーディングできるからいい。

---

#Emmetが展開するHTML5を変更する。
再起動後、`Preferences → Package Settings → Emmet → Settings - User`と行ってファイルを開く。
以下のように変更

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

新規ファイルで`html:5`と入力後、`Ctrl+e`を入力
自動展開された`html`タグに`lang="ja"`があってたら成功（設定ファイル更新後は再起動が必要かも）

```html
<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
```

---
#Node.jsと連携する
まずはNode.jsのインストール。
[http://nodejs.org/](http://nodejs.org/)
MacbookAir(mid13)なら.pkgファイル展開するだけでいけるはず。
Terminalを叩いて以下が出ればOK

```bsh
Airlocal:git budougumi0617$ node -v
v0.10.25
```

デフォルトの格納先はこの辺。

```bsh
Airlocal:git budougumi0617$ ls /usr/local/bin/node
/usr/local/bin/node
Airlocal:git budougumi0617$ ls /usr/local/bin/npm
/usr/local/bin/npm
```

あとはsublimeTextがビルドするさいにNode.jsを使うようにするだけ。
`Tools＞Build System＞New Build System`で新しいビルド用設定ファイルを開く。
C/C++っぽい設定が書いてあるので、以下に変更。
node.sublime-buildなんて名前にすれば、`Build System`に"node"が追加されているので指定。

```json:node.sublime-build
{
    "cmd": ["node","$file","file_base_name"],
    "working_dir":"${project_path:${folder}}",
    "selector":"*.js"
}
```

`Cmd+Opt+N`で`test.js`ファイル作成。

```javascript
console.log("Run JavaScript in Sublime Text!");
```

`Cmd+B`でコンソールが開いて出力されれば成功。

------


#Markdownにも対応する。
ついでにMarkdownも。
`.md`ファイルを開きながら、`View＞Syntax＞Open all with current extension as `で `Markdown Extended`を対応付ける。
`Preferences＞Color Scheme＞Monokai Extended` でどちらか好きな色設定にに変更。


---

#操作方法
基本的な設定や操作についてはドットインストールにあるので、
さらっと見ておきましょう。

ドットインストール：Sublime Text 2入門
[http://dotinstall.com/lessons/basic_sublimetext](http://dotinstall.com/lessons/basic_sublimetext)

#最後


これでドヤリングできる準備はできました。雪が降っていようが今すぐスタバへGO!
ただし、ハローワールドなんかかいていたら失笑されるかもね。。。

※この記事は2014年02月08日に作成されました。
参考：[東京に大雪警報　23区で13年ぶり](http://www.tenki.jp/forecaster/diary/aihara_eriko/2014/02/08/7471.html)

あ、vim化はしないです。バインディングは結構追加しているので。。。




#参考サイト
今回は以下のサイトを参考に導入させて頂きました！！

[Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ](http://mnemoniqs.com/web/sublimetext2/)
[Sublime Text 2でフォントを設定する方法](http://succi.jp/blog/?p=263)
[Sublime Text 2 ： Emmet プラグインが出力する HTML の言語を修正する](http://128txt.blogspot.jp/2012/12/sublime-text-2-emmet-html.html)
[Sublime Textで新規ファイルをスムーズに作る方法](http://log.deconcepter.jp/2013/10/sublime_advanced_newfile/)
[Sublime TextでJavaScriptを実行する](http://www.monster-dive.com/blog/tools_software/20130912_001073.php)
[Macでgithub markdownのpreviewはsublime text 3がよさそう](http://d.hatena.ne.jp/gfx/20131202/1385964780)