clicktx::Tech::Memo

コード書く時に画面分割して作業する時は多いと思います。SublimeTextでも画面分割を使う事ができますが、別ファイルをそれぞれのウィンドウに表示するのは簡単にできるのだけど、同じファイルを複数のウィンドウに表示する方法が分かりませんでした。

やり方は、Sublime Text2 で 1 つのファイルを分割表示する | DeVlog – 銀の翼で翔べ – このエントリーが全てです（ｗ

で、このエントリーの中で「SimpleClone」というプラグインが紹介されていますが、これが超便利！

• コマンド+Shift+P で Install Package
• Simple Cloneインストール

ViewメニューにSimple Cloneが追加されて、縦分割、横分割、新規ウィンドウで開くメニューが追加されます。

• github mikefowler/simple-clone

キーボードショートカットを変更

defaultの ⌘+shift+(→ or ↓)だと行選択等とカブるので変更する。⌘+controlあたりに割り当ててみると使いやすいかな？

Preferences > Key Bindings – User に下記のように追加。

[
  {
    "keys": [
      "super+ctrl+right"
    ],
    "command": "simple_clone",
    "args": {
      "location": "right"
    },
    "context": [
      {
        "key": "simpleclone_keymap_enabled.right"
      }
    ]
  },
  {
    "keys": [
      "super+ctrl+down"
    ],
    "command": "simple_clone",
    "args": {
      "location": "down"
    },
    "context": [
      {
        "key": "simpleclone_keymap_enabled.down"
      }
    ]
  },
  {
    "keys": [
      "super+ctrl+alt+n"
    ],
    "command": "simple_clone",
    "args": {
      "location": "new_window"
    },
    "context": [
      {
        "key": "simpleclone_keymap_enabled.new_window"
      }
    ]
  }
]

最近の勉強会でMarkdownで書け！って教わったのでブログもテキストもMarkdownで書くように試しているのだけれど、愛用しているSublime Text2でプラグイン探したら便利なのがあった。

Markdown Preview plugin

Sublime Text2で編集すれば保存しなくてもリアルタイムでプレビュー出来るすぐれもの。こんな風にエディタとブラウザを並べて表示しておけばとても便利。

素晴らしいプラグインです。

インストール

コマンドパレットから簡単にインストール出来ます。

1. ⌘ + P で install を入力して選択。
2. Markdown Preview を入力して選択。

これだけ。

プレビューのショートカット

⌘ + option + O（オー）でブラウザが開いてプレビューできる

Build Systemの新規作成

Sublime Text 2のBuild Systemにはデフォルトだとperlの設定が無いので新たに設定ファイルを作成する必要がある。

Tools > Build System > New Build System… を選択

untitled.sublime-build が開かれるので編集する。

{
    "cmd": ["perl", "-w", "$file"],
    "file_regex": ".* at (.*) line ([0-9]*)",
    "selector": "source.perl"
}

-w を -c にすると実行しないで文法チェックだけ行える。

ファイル名を Perl.sublime-build に変更して Packages/Perl に保存する。

コードの実行

⌘+Bで実行可能です。

参考

Sublime Text 2をMacで使う | Kitchen Garden Blog
Perl Build System File for sublime text editor

2013/3/14追記：

PATHが通っていない問題を解消する

perlのbuildシステムが使えるようになったけど、macだとpathが通っていないのでモジュールを使ったりする時にエラーになる。

Sublime Text 2 と環境変数 を見ると環境変数を設定できるみたい。

{
    ...
    "build_env":
    {
        "PATH": "/usr/local/bin:/usr/bin"
    },
    ...
}

のように build_env という項目を追加すればいいみたい。pathの確認はmacの環境ならターミナルで、

$ echo $PATH
/Developer/usr/bin:/opt/local/bin:/opt/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin

表示されたpathを “PATH”: に設定すればおｋ。設定ファイルは Preference > Settings – Userで表示されます。

スライド（ロングバージョン）

アップしたスライドは気に入っている機能の紹介部分を足したものになっています。

当日話した内容はSublime Text 2の機能や魅力にはひとつも触れずに惚れた腫れたのお話しか出来ませんでしたが、すごく使いやすいので気になった方は是非お試しを。

質問コーナーでSublimeTextT3に関して聞かれましたが、ST3に関して知ったのがごく最近でまともに回答できなくて申し訳なかったです。あと、@ivoryworksさんネタパクりました。ごめんなさい。

また、懇談の席で聞いた日本語の検索に難があるというお話。個人的に日本語で検索したことが無かったので気が付かなかったのですが、確かに検索パレットを開いたあとに日本語で入力すると文字確定（enterキー）時点で検索が実行されてしまいます。検索文字列をコピペで貼り付ければ問題なく検索はできるのですが…。

ネタLTしか思いつかなかったのに何エントリーしてるんだよ！的な感じなのですが、そこを寛大に許してくれるのがGunma.webのいいところ。

他の方のLTでも言われていましたが、気軽に喋れる機会ってなかなか無いので感謝しています。

https://twitter.com/#!/javascript_j/status/197743453881380865
ココらへんのツイートからふとやってみようかと。
もともとのツイートはこのあたり

SublimeLinter

Kronuz/SublimeLinter – github
リアルタイムで構文チェックを行なってくれる。
JavaScriptの他にも下記の言語に対応している（みたい）

• CoffeeScript
• CSS
• java
• Javascript
• Objective-J
• perl
• php
• python
• ruby

Sublime Package Controlをインストール

SublimeLinterをインストールするには Sublime Package Control をインストール必要がある。
Sublime Package Control – a Sublime Text 2 Package Manager by wbond

SublimeLinterのインストール

Sublime Package Control をインストールすると メニューに preference> Package Control が追加されるので選択する。

Install Package を選択。

テキストボックスに「SublimeLinter」を入力する。一部でも可。
選択すれば自動でインストール開始する。

Node.jsとnpmをインストール

node.js site
JavaScriptでJSHintやJSLintを使うにはNode.jsが必要。
普通にmac用のインストーラー（node-v0.6.16.pkg ）をダウンロードしてインストール。

Node was installed at

   /usr/local/bin/node

npm was installed at

   /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.

JSHintのインストール

uipoet/sublime-jshint

• JSHintはJSLintのフォーク。
• JSLintを作った人はJavaScript Good Partsの著者らしい
• JSLintはC言語並みにチェックが厳しいみたいなのでJSHintを使う

macbook:~ clicktx$ sudo npm install -g jshint
Password:
npm http GET https://registry.npmjs.org/jshint
npm http 304 https://registry.npmjs.org/jshint
npm http GET https://registry.npmjs.org/argsparser
npm http GET https://registry.npmjs.org/minimatch
npm http 200 https://registry.npmjs.org/argsparser
npm http GET https://registry.npmjs.org/argsparser/-/argsparser-0.0.6.tgz
npm http 200 https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/minimatch/-/minimatch-0.0.5.tgz
npm http 200 https://registry.npmjs.org/argsparser/-/argsparser-0.0.6.tgz
npm http 200 https://registry.npmjs.org/minimatch/-/minimatch-0.0.5.tgz
npm http GET https://registry.npmjs.org/lru-cache
npm http 200 https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/lru-cache/-/lru-cache-1.0.6.tgz
npm http 200 https://registry.npmjs.org/lru-cache/-/lru-cache-1.0.6.tgz
/usr/local/bin/jshint -> /usr/local/lib/node_modules/jshint/bin/hint
jshint@0.6.3 /usr/local/lib/node_modules/jshint
├── argsparser@0.0.6
└── minimatch@0.0.5 (lru-cache@1.0.6)

動作確認

Preferences->Package Settings->SublimeLinter->Settings – Default から下記の場所を false->trueに変えるとより強調される。

    // If true, lines with errors or warnings will have a gutter mark.
    "sublimelinter_gutter_marks": false,

    // If true, the find next/previous error commands will wrap.
    "sublimelinter_wrap_find": false,

エラーがあるところは強調や下線等してくれる。
ただ、jQueryのコードとかになるとエラーばっかりになってしまうのが…。
手動モードにしたほうがいいのかも。

ちなみにちょっと頑張ったんだけど、Perlの構文チェックを有効にする方法が分かりませんでした…。

書籍

SublimeTextの本出たみたいですね！