Go to Qiita Advent Calendar 2024 Top
LoginSignup
66
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@budougumi0617(Yoichiro Shimizu)

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

Last updated at Posted at 2014-02-08

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

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

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

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

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

ドットインストール：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がよさそう

66
67
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
66
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?