読者です 読者をやめる 読者になる 読者になる

Macセットアップ その3 xcodeとsublimeのインストールと設定

気ままな雑記 プログラミング

スポンサーリンク


では,今日はまずXcodeを入れてから,エディタを入れてみようと思います.

Xcodeのインストール
AppStoreからXcodeをインストールしていきます.
f:id:McG:20151213175222p:plain

結構重いので,時間かかりますが少々お待ちください.

でインストールが完了したら,このような画面になります.
f:id:McG:20151213175253p:plain

まぁテストとして,"Get Started with a playground"
を押して,いろいろと遊んでみましょう.
足し算とか書いたら結果が右のほうに出ます.
f:id:McG:20151213175303p:plain


Sublime text 3のインストール
http://www.sublimetext.com/3

このページに行って,sublime text 3をダウンロードしていきます.

f:id:McG:20151122094419p:plain


こういうエディタです.補完機能すごいでしょ.
f:id:McG:20151213175344g:plain


他にも,カスタマイズ性がとてもよかったり,補完機能とかも優れています.

置換機能も...
f:id:McG:20151213175430g:plain

一斉置換もお手の物!!さぁ使いたくなったでしょう.

とりあえず初期設定していきます.
f:id:McG:20151122100650p:plain
Sumlime Text → Preferences → Setting - Userをクリックしたら設定をいじれるのでいじっていきます.

僕の設定はこんな感じ

{

    //フォントサイズの変更
    "font_size": 11,

    //タブやスペースを表示してくれる
    "draw_white_space": "all",

    //ブラケットに合わせて自動インデント
    "indent_to_bracket": true,

    //現在行をハイライト
    "highlight_line": true,

    //処理速度を遅くするプラグインは自動で解除
    "detect_slow_plugins": false,
    
    //無視するパッケージ
    "ignored_packages":
    [
        "Vintage"
    ]

    //タブサイズ変更
    "tab_size": 2,

    //Rubyの慣習でTabはスペース2個
    "translate_tabs_to_spaces": true,
}

まぁ設定はお好みで.


ではカスタマイズをしていきます.


Installation - Package Control このページに行って,
f:id:McG:20151122094419p:plain

このようになっているところの文字列をコピーしてきます.

Sublime上で「View→Show Colsole」を押して,コンソールを開いて,先ほどの文字列を貼り付けます.
f:id:McG:20151213175512p:plain

そして, ENTERキー!!

f:id:McG:20151213175555p:plain

このように出れば成功です.


Command + Shift + p でCommand Palette 開き「install」と入力します.

「Package Control: Install Package」を選択してENTERキーを押します.

そして出てくるバーに「Install」と入力して,「Package Control: Install Package」を入力します.

そして欲しいプラグインを入れてどんどんカスタマイズしていきましょう.
f:id:McG:20151213175619p:plain

僕が入れているプラグインを紹介していきます.

HTMLを書くなら入れておきましょう.

このように強力な補完機能があります.

CSSの補完機能が付いたプラグインです.

  • Emmet

HTML, CSSを書くときに補完してくれます.<>って結構打つのめんどくさいんですが,p と打ってからtabを押したりすると,

と変換してくれたりします.
便利です.

  • SublimeCodeIntel

Rubyコーディングに必須な,定義ジャンプとかしてくれるようになるプラグイン
Alt + クリックでその場所の定義に移動してくれます.
f:id:McG:20151213175634g:plain

  • Abacus

= の位置とか,変数名の長さによって変わってくると思うんですが,それを直してくれたりする機能があるプラグイン
f:id:McG:20151213175659g:plain

  • AlignTab

コンマの位置とかを綺麗に揃えてくれるプラグイン

  • Smart Delete

行末で消したときに,その次の行のインデントを調整してくれるプラグイン
f:id:McG:20151213175810g:plain
このプラグインがないとこうなりますが,あったら下のような感じに.
f:id:McG:20151213175842g:plain

  • View in Browser

ブラウザでHTMLをレビューできます.
control+option+function+cでChromeが起動します.

  • Live Style

リアルタイムでCSSの更新をブラウザで確認できます.
上と同じ要領でsublimeプラグインとして入れます.

そして,Chromeストアに行って,LiveStyleを落としてきます.

chrome.google.com

デベロッパツールを確認すると,実際にliveStypeが追加されていると思います.

CSSの更新がリアルタイムで反映されます.
liginc.co.jp
こちらを参考にさせていただきました.

  • Terminal

これを入れておくと,右クリックから「OpenTerminalHere」を押せばこのファイルが置かれている場所がカレントディレクトリとなった状態でターミナルが開けます.

Ruby on Railsスニペットが使えるようになります.


と,どうですか,sublimeが使いたくなったのではないでしょうか.
他にも面白いプラグインとかあったら是非教えてください.

どんどんカスタマイズして,自分だけの快適な開発環境を!!


© 2016 Yuki Sako.