search

HAKASHUN / manabi

manabi
14 stars 1 forks source link

WebStromからSublimeTextに移行する #63

Closed HAKASHUN closed 10 years ago

HAKASHUN commented 10 years ago

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

HAKASHUN commented 10 years ago

Sublime Textのバージョン

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

http://www.sublimetext.com/3

HAKASHUN commented 10 years ago

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

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 commented 10 years ago

Package Controlのインストール

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

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

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

SublimeLinter-jscs

npm install -g jscs

Sublime-fixmyjs

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

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 commented 10 years ago

Packageを手動で入れる方法

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

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

preview

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

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

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

Sublime Text 3 を再起動

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

HAKASHUN commented 10 years ago

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を再起動すると、反映された！ preview

HAKASHUN commented 10 years ago

js開発のワークフロー

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