2014年2月17日月曜日

Sublime TextでJavaScriptを書くための環境設定

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エディターのメニューからViewShow Consoleを選択し、入力欄に上記をペーストし、Enterします
sublimeエディターを再起動します。

3.Node.jsのインストール(JSHintを動かすため)

以下のURLの「INSTALL」ボタンをクリックし、インストーラをダウンロード、実行します。


4.JSHint(規約チェックツール)のインストール

コマンドプロンプトで以下のコマンドを実行します。

npm install jshint -g

5.JSHintの動作確認

JavaScriptファイル「sample.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のインストール

  1. PreferencesPackage Controlを選択し、メニューからInstall Packageを選択します。
  2. 入力欄にjs gutter と入力し、JSHint Gutterを選択します。
    ※エディタの一番下をみておくと、インストール中であることがわかります。
  3. Tools JSHintSet node pathを選択します。
  4. ファイルが開くので、次のように編集して保存します(node.exeのパスは環境に合わせてください。)。

    "node_path": "C:/Program Files/nodejs/node.exe"
  5. Sublimeを再起動します。
  6. sample.jsファイルを開いて、ToolsJSHintLint Codeを実行します。
  7. 構文エラーが表示されることを確認します。


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を開き、ペーストします。
    なんとなく、いじってみます。
    で、どうなるか試してみます。
    こんな感じで設定を変えます。


    0 件のコメント:

    コメントを投稿