Sublime TextでJavaScriptを書くための環境設定メモです。
以下はwindowsを想定していますが、Macなどでも基本は同じです。
1.Sublime Textをインストール
以下からダウンロードしてインストールします。
http://www.sublimetext.com/
2.Package Controlをインストール
以下のURLを開いて、SUBLIME
TEXT 2枠内のPythonコードをコピーします。
https://sublime.wbond.net/installation#st2
sublimeエディターのメニューからView→Show Consoleを選択し、入力欄に上記をペーストし、Enterします。
sublimeエディターを再起動します。
3.Node.jsのインストール（JSHintを動かすため）
以下のURLの「INSTALL」ボタンをクリックし、インストーラをダウンロード、実行します。
4.JSHint（規約チェックツール）のインストール
コマンドプロンプトで以下のコマンドを実行します。
npm install jshint -g
5.JSHintの動作確認
JavaScriptファイル「ｓample.js」を次のとおり作成します。
name = 'test';
console.log(name)
window.open()
|
コマンドプロンプトで、以下のコマンドを実行します。
jshint sample.js
出力結果：
sample.js: line 2, col 18, Missing
semicolon.
sample.js: line 3, col 14, Missing
semicolon.
6.SublimeへのJSHint Packageのインストール
- Preferences→Package
Controlを選択し、メニューからInstall Packageを選択します。
- 入力欄にjs gutter と入力し、JSHint Gutterを選択します。
※エディタの一番下をみておくと、インストール中であることがわかります。
- Tools →JSHint→Set node pathを選択します。
- ファイルが開くので、次のように編集して保存します（node.exeのパスは環境に合わせてください。）。
"node_path": "C:/Program
Files/nodejs/node.exe"
- Sublimeを再起動します。
- sample.jsファイルを開いて、Tools→JSHint→Lint Codeを実行します。
- 構文エラーが表示されることを確認します。
7.JS Prettify（整形ツール）のインストール
6と同様に、Package Control で HTML-CSS-JS Prettify をインストールします。エディター画面上で右クリックして、HTML/CSS/JS Prettify → Prettify Codeをクリックすると自動で整形されます。
8.Sublimeのカスタマイズ
基本的なものだけ記載します。
後は、自分で色々いじってみてください。
カラーテーマの変更
Preferences→Color Schemeで色のテーマを変えられます。
ちなみに、私は、Solarized(Light)が目にやさしくてお気に入りです。
（黒バックの方がプロっぽいけど、どうもあわない。）
サイドバー
View→Side Barでサイドバーを表示します。
sublimeエディターにフォルダーごとドラッグ&ドロップします。
そうすると、サイドバーにエクスプローラー的なものが表示されます。
たくさんのファイルをいじるときは便利です。
ジャンプと検索
Ctr-p + : + n でn行目にジャンプできます。
Ctr-p + @ でメソッド名などで検索できます。
もちろん、Ctr-fで普通の検索もできます。
画面分割
View→Layoutで画面分割できます。
ファイル比較などするときに便利です。
Vim化
私には完全に不要なのですが、お好きな方もいらっしゃるようなので。。。
Preferences→Settings - Userを開きます。
以下を追加します。
(Defaultでは"ignored_packages": ["Vintage"]でVim化を無視するようになっています。)
"ignored_packages": []
その他
Preferences→Settings - Defaultを開きます。
気になる部分をコピーします。
Preferences→Settings - Userを開き、ペーストします。
なんとなく、いじってみます。
で、どうなるか試してみます。
こんな感じで設定を変えます。
