Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

動機

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

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

インストール

まずは本体のインストール。今回は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 + pCommand 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 + ,)

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


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

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

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

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

Cmd+Opt+Ntest.jsファイル作成。

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

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


Markdownにも対応する。

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


操作方法

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

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

最後

これでドヤリングできる準備はできました。雪が降っていようが今すぐスタバへ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がよさそう

budougumi0617
業務ではGo/Ruby。以前はC/C++/C#。 最近はgithub.ioに書いてます。
https://budougumi0617.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした