My External Storage

ソフトウェアエンジニア向けTips。Qiitaにもメモ

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

html5 Mac Tips 作業メモ

動機

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

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

インストール

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

パッケージ管理ソフトの導入

プラグインとでもいう拡張機能Packageを導入する。
View - Show Consoleを選択。

SublimeText2の場合は以下を記載。

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の場合は以下を記載。

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 + ,)

{
    //フォントサイズ
    "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/
会社で食わされるスパゲティのために構築するんだったら、ゆたぽんのほうが優しい気持ちでコーディングできるからいい。

Emmetが展開するHTML5を変更する。

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

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

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

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

Node.jsと連携する

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

Airlocal:git budougumi0617$ node -v
v0.10.25

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

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"が追加されているので指定。

{
    "cmd": ["node","$file","file_base_name"],
    "working_dir":"${project_path:${folder}}",
    "selector":"*.js"
}

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

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 でどちらか好きな色設定にに変更。

最後

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

※この記事は2014年02月08日に作成されました。
参考：東京に大雪警報　23区で13年ぶり

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

参考サイト

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

Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ
Sublime Text 2でフォントを設定する方法
Sublime Text 2 ： Emmet プラグインが出力する HTML の言語を修正する
Sublime Textで新規ファイルをスムーズに作る方法
Sublime TextでJavaScriptを実行する
Macでgithub markdownのpreviewはsublime text 3がよさそう