WebStromからSublimeTextに移行する

[HAKASHUN]

チーム開発では、WebStromよりも、Sublime Textの方が導入コスト(経済的に)が低いのでSublime Textに移行してみます。

[HAKASHUN]

Sublime Textのバージョン

3はまだbeta版ですが、いずれ2から3になることは確実なので、3を使うようにします。

http://www.sublimetext.com/3

[HAKASHUN]

ショートカットコマンドまとめ

Sublime Text 3 (OSX) Cheat Sheet
http://www.jackiejohnston.us/cheatsheet
http://www.cheatography.com/martinprins/cheat-sheets/sublime-text-3-osx/

⌘ + Shift + P

package controlを検索

⌘ + P

ファイルをファイル名で検索

Control + G

ファイルのライン番号に検索移動

⌘ + R

シンボル名で検索移動

⌘ + Control + N

ファイル検索

⌘ + T

ファイル検索

Ctrl + H

選択箇所をDashで検索

⌘ + Shift + F

フォルダ内検索

[HAKASHUN]

Package Controlのインストール

手順
https://sublime.wbond.net/installation

• [View] > [Show Console]で、コマンドラインを出す
• 上記URLに貼付けられているスクリプトを実行する

[HAKASHUN]

Packageのインストール

ConvertToUTF8

Shift-JIS等の日本語のファイルを開いても文字化けしまいようにする。

EditorConfig

プロジェクト内に.editorconfig設定があればその定義をエディタが認識してくれる。

Sublime-JSHint Gutter

https://github.com/victorporof/Sublime-JSHint
jsHintのエディタレイヤーでのチェック

nodeのpathがデフォルトだとうまく行かないことに気づく

which node

して、nodeの場所をセッティングに追記

jsHint set plugin options

• 色々とtrueにすると、jshintをコードに即時反映できる

SublimeLinter-jscs

• jscsを有効にする
• 先にnpmでjscsをインストールする必要あり

npm install -g jscs

Sublime-fixmyjs

https://github.com/addyosmani/sublime-fixmyjs

• nodeが正しく認識されない問題があるので、packageがとりにいくパスにsymlinkをセット

ln -s /Users/{{ユーザ名}}/.nvm/v0.10.21/bin/node /usr/local/bin/node

AngularJS-sublime-package

AngularJSの補完をしてくれるpackage

DocBlockr

コメント入力の補完機能

SidebarEnhancements

WebStromのように、サイドバーでファイルを扱えるようにするpackage

SyncedSideBar

今編集しているファイルの位置をサイドバーに反映させてくれる

GitGutter

gitのプロジェクトだと、変更箇所がエディタ上で反映される

Sublime Files

ファイル検索が快適になるpackage

TrailingSpaces

空白スペースを保存時に削除してくれるpackage

Theme - itg.flat

フラットデザインのテーマpackage

Terminal

⌘ + Shift + Tでプロジェクトを起点にターミナルを開く

DashDoc

DashとSublimeText3を連携する

Jade

Jadeをシンタックスハイライトしてくれる

[HAKASHUN]

Packageを手動で入れる方法

packageを検索してもリストにでてこない場合は、手動でpackageをSublimeText3に導入します。

対象のpackageをzipでインストールする

解答したファイルをPackagesフォルダに入れる

Macだと以下に配置する感じでした

/Users/{{ユーザ名}}/Library/Application Support/Sublime Text 3/Packages

Sublime Text 3 を再起動

再起動すればpackageのinstallは完了です。

[HAKASHUN]

SublimeLinter-jscsがうまく入らない

下記エラーが発生していたため、正常に動作していなかった。

SublimeLinter: WARNING: jscs deactivated, cannot locate 'jscs' 

jscs自体の場所を検索して

which jscs
/Users/{{ユーザ名}}/.nvm/v0.10.21/bin/jscs

出力された/Users/{{ユーザ名}}/.nvm/v0.10.21/bin/をSublimeLinter User Settingsのpathsにセットする

{
    "user": {
        "debug": true,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            "htmltidy": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
            "jscs": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "paths": {
            "linux": [],
            "osx": [
                "/Users/{{ユーザ名}}/.nvm/v0.10.21/bin/"
            ],
            "windows": []
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "php": "html",
            "python django": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

上記を設定した上で、SublimeTextを再起動すると、反映された！

[HAKASHUN]

js開発のワークフロー

1. 各種設定ファイルの準備
2. .jshintrc
3. .jscsrc
4. jsHintとjscsエラーが出ないように記述する
5. 既存のコードを直すときは、fixmyjsをしてもよい