カテゴリー別アーカイブ: Sublime Text

コマンドラインでSublime Textを起動する

コマンドラインからテキストを編集する場合、いっつもvimでやっていたのですが(だいたい調べるとvim hogeとか出てくるから)
Sublime Textを起動することもできるみたい。

コマンドラインから下記を入力

ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin

これで

subl hoge

で、hogeをSublime Text で開くことができる。

何をしているのか?

自分でも正確に理解はしてないのですが。

ターミナルでコマンドを打つと、シェルがそのコマンドを受け取ってOSがプログラムを実行する。
そのコマンド群を /usr/local/bin に保存してる。
Sublime Text を /usr/local/bin にシンボリックリンクしたので、コマンドラインから実行できるようになった。

という感じだと思います。

Sublime Text 3 で “shift + enter” で
をショートカット入力

Dreamweaver時代に一番使っていたショートカット。

1 メニューバーのSublime Text > Prefernce > Key Bindings - User をひらく
2 以下を追加

{ "keys": ["shift+enter"], "command": "insert", "args": {"characters": "<br />" } }

参考サイト

SublimeText 3 にインストールしたPackage一覧

Syntax Highlighting for Sass

.scssのシンタックスハイライトを追加。無いと困る。
いままで使ってた”Sass”よりも頻繁に更新されてるっぽかったので。
Syntax Highlighting for Sass – Packages – Package Control

SFTPSync

“SFTP”が使えなかったので。
(まだ使ってないので使用感分からないけど)
FTPSync – Packages – Package Control

Sidebar Enhancements

サイドバーの右クリックがすごく便利になる。必須。
SideBarEnhancements – Packages – Package Control

Emmet

Emmetです。
Emmet – Packages – Package Control

AutoFileName

<img /><a>でファイル名を自動で探してくれる。便利。
AutoFileName – Packages – Package Control

Packageを探すの楽しい。
他にもちょこちょこ追加していこう。

Sublime Text 2 から3に乗り換えたときの設定まとめ

Sublime Text 2 を長らく使ってたのですが、プラグインがうまく動かなくなったりしたので、Sublime Text 3に移行しました。
初期設定やプラグインなどのまとめです。

ダウンロードとインストール

ダウンロードはこちらから。
Sublime Text – Download

ふつうにドラッグ&ドロップでインストールすればOK。
ぼくはST2と間違えるのを防ぐために、アプリ名を『Sublime Text 3』とバージョン名を入れておきました。

ライセンス入力

Sublime Text 3 はβ版で、ライセンスの値段は$70だけど、正式リリースまではSublime Text 2 のライセンスでunlicenseできる。(というかライセンス買わなくても試用できるけど)
メニューバーのHelp > Enter LicenseからST2のライセンスを入力すれば完了。
正式リリース後はアップグレードラインセンスを購入する必要あり。

環境設定

cmd + ,で環境設定を開く。オレオレ設定は下記

{
  "detect_indentation": true,  // ファイルのインデントに合わせる
  "draw_white_space": "all”,   // スペースを分かりやすく表示
  "fade_fold_buttons": true,  // 折りたたみボタンを隠す
  "fold_buttons": true,          // 折りたたみボタンを使う (この辺正しいか怪しい)
  "font_size": 11.0,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "word_wrap": false
}

Package Controll の初期設定

console(ctrl + Shift + @)から、下記のコードを入力

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

cmd + Shift + Pで、Package Control installなどができることを確認する。

インストールするパッケージはまたじっくり選ぼう。
とりあえず.scssのカラーリングが無いとツライので、”SASS”だけは入れた。

参考サイト

Dropboxを活用して複数のmacでSublimeTextの設定を共有する

家ではiMac、外ではMacBookという方もいるかと思いますが、同じ環境で作業したい!
そんなときのための方法です。

手順

基本的には

  1. 対象ファイルをDropboxに移動
  2. 必要な場所にシンボリックリンクを貼る

という方法で対応します。実態ファイルはDropboxフォルダに置くことになります。
SublimeTextに関わらず、「Dropboxフォルダ外のものもバックアップ/同期したい」という場合はこのようにします

具体的な方法

設定ファイルをDropbox内へ

Sublime Text 2 の設定ファイルをDropbox内へ移動します。
Users/USERNAME/Library/Application Supportにある

  • Installed Packages
  • Packages
  • Pristine Packages

    をDropboxへ移動しましょう。(Sublime Textは終了しておくこと)

僕は/Dropbox/utilities/Sublime Text 2というフォルダを作ってその中に突っ込んでいます。

シンボリックリンクを作成

ターミナルからコマンドを入力し、シンボリックリンクを作成します。
シンボリックリンクが何かわからない人は
シンボリックリンクとは : IT用語辞典
などを参照してください。

$ ln -s (リンク元) (リンク先)

で、シンボリックリンクを作成します。

コピーした3フォルダそれぞれシンボリックリンクを作成しましょう。

$ ln -s ~/Dropbox/utilities/Sublime\ Text\ 2/Installed\ Packages ~/Users/USERNAME/Library/Application Support/Sublime\ Text\ 2/Installed\ Packages
$ ln -s ~/Dropbox/utilities/Sublime\ Text\ 2/Packages ~/Users/USERNAME/Library/Application Support/Sublime\ Text\ 2/Packages
$ ln -s ~/Dropbox/utilities/Sublime\ Text\ 2/Pristine\ Packages ~/Users/USERNAME/Library/Application Support/Sublime\ Text\ 2/Pristine\ Packages

上記のコマンドを一つづつ実行します。もちろんパスはそれぞれの環境で違うので、適宜変えてください。
ターミナルにファイルをドラッグすれば、パスが入力されるので便利!
もしDropboxへ移動ではなくコピーしてた人は、元のフォルダをリネームして逃しておきましょう

きちんとシンボリックリンクが貼れてるか確認してみましょう。ls -lコマンドを使います。

$ ls -l ~/Users/USERNAME/Library/Application Support/Sublime\ Text\ 2

Dropboxを参照していれば大丈夫です。(たぶん表記は見たらわかる)

Sublime Text 2 を立ち上げて、設定とパッケージが共有されていることを確認しましょう。
以上で完了です!

参考サイト

はじめての sublime text 初期設定・ショートカット・Packageについて

130522_01

最近流行のsublime text 2 というエディタ。
キャッチコピーは “The text editor you’ll fall in love with” 「恋に落ちるエディタ」
方々で流行ってますが、まずは基本的な使い方をまとめます。

購入とインストール

公式サイトからダウンロードとライセンスキーの購入ができます。
Sublime Text: The text editor you’ll fall in love with
ライセンスの価格は今日(2013/05/22)の時点で$70でした。

初期設定

cmd + , で設定ファイルが開きます。(json形式らしいです)
Siblime Text 2 > Preferences > Settings - Default で設定項目が見れるので(英語だけど)そこから変えたい部分を自分の好みで選びましょう。

スクリーンショット 2013-05-22 22.34.34

僕の設定は以下

{
     "fold_buttons": false,  // 折りたたむボタンを消す(たまに間違って押してウザイ)
     "word_wrap": false, // 折り返しをオフに
     "draw_white_space": "all"  // タブ・スペースなどを常に表示
}

他にもフォントサイズやら文字コードやら幅広く変更できます。

操作とショートカット

保存、コピペ、やり直しなどは普通のエディタと同じ。
Sublime Text ならではのショートカットをまとめます。

ショートカットキー 操作
cmd + 1, 2, … タブの分割
cmd + / コメントアウト
cmd + L 行を選択
cmd + D 選択中の単語を検索し、次に出てくる同一の単語を選択した状態にする
cmd + shift + D 現在の行を直下に複製
cmd + F 検索
cmd + alt + F 置換
cmd + shift + A タグ内を選択
cmd + ctrl + ↑, ↓ 現在の行を上下と入れ替え
cmd + J 現在の行の改行をトル
cmd + alt + . タグを閉じる(閉じタグを挿入)
cmd + K → cmd + U,L 大文字(U)、小文字(L)へ変換 (cmd + K を押したあとに次のコマンドを押します)

ちょっと言葉では説明しづらいのですが、cmd + Dがとても便利です。
適当なソース開いてよく出てくるタグでも選んで試してもらえると分かるかと。
同時に複数箇所編集できるのが強みです。
あとalt押しながらドラッグすれば、矩形選択ができます。こいつもむっちゃ便利。

Package

アドオンというかプラグインというか、便利ツールが沢山あり、それをPackageと呼びます。
まずはそれらを簡単にインストールできるようにする。

コンソールを開いて(ctrl + shift + @)下記のコマンドを入力

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation' 

その後再起動。

パッケージのインストール

スクリーンショット 2013-05-22 22.55.07

コマンドパレットを cmd + shift + P で開き、Package Control: install Packageを選択します(installって入れれば出てきます)

とりあえず入れたもの

  • HTML5(HTML5のコードヒント)
  • CSS Snippets(CSSのコードヒント)
  • Bracket Highlighter(タグ・カッコなどの開始、終了をハイライトでお知らせ)
  • AutoFileName(画像までのパスがコードヒントで出てくる。高さ、幅も自動で入れてくれる。べんり!)

いやー、便利な世の中ですな。