Sublime Text 2 で画像のプレビューを簡単にするパッケージ「Sublime-Text-2-Image-Viewer」
「Sublime-Text-2-Image-Viewer」というパッケージを入れると、たとえば以下のようなHTMLやCSSの画像ファイル名をプレビューしたい場合、 <img src="img/image.png"> background: url(../img/image.png); 画像ファイル名の上にカーソルを置いて、 command + i ショートカットキーを押せばプレビューできるようになりますヽ(*´ω｀*)ノ このパッケージはパッケージコントロールからインストールできないので、Zipファイルを落としてきて手動でパッケージのディレクトリに入れるか、git clone する必要があります。 rmaksim/Sublime-Text-2-Image-Viewer · GitHub Zipファイルをダウンロードしてインストールする場合 上記のGitHubページからZipファイルをダウン
SublimeText3用、マルチカーソルに連番の数字を入力するプラグイン - Qiita
SublimeTextをバージョン3にアップデートしたところ、「Sublime Text 2でマルチカーソルに連番の数字を入力するプラグイン」が動作しなくなったため、ST3対応版を作ってみました。 プラグインの入力欄に「1」を入力しEnterすると、上のカーソルから順に1, 2, 3, 4,...と入力し、 「2 5 3」と入力すると00002, 00005, 00008, 00011,...と入力されます。 import sublime, sublime_plugin class MultiNumberInputCommand(sublime_plugin.TextCommand): def on_done(self, arg): paramsArray = arg.split(" ") paramsArray.extend(['', '']) #minimum length is 3
Sublime Text 2 のプラグインを作る
開発部 川野です。最近、Sublime Text が流行っていますよね。私の周りでも、Sublime Text を使っている、というエンジニアが増えてきたように思います。 パワフルでモダンなエディタを探している方は、ぜひ一度試してみてはいかがでしょうか。 そんな Sublime Text ですが、魅力のひとつに便利なプラグインの存在があります。本記事では、Sublime Text のプラグイン開発について取り上げてみようと思います。 Hello, World! Sublime Text のプラグイン開発を始めるのは、とっても簡単です。メニューバーの Tools > New Plugin.. を選択して下さい。雛形となるプラグインのコードが記述されたバッファを作ってくれます。Sublime Text のプラグインは、Python を使って書いていきます。 このプラグインは、バッファの一番最初
Sublime Textのプラグイン「Goto CSS Declaration」が素晴らしく便利で泣けてきた
今日も今日とてSublime Text 2にてコーディングをしているわけなんですが、@kojika17 先生（通称：まぼろしの神）からGoto CSS declarationと言うプラグインを教わって導入したところ、これが素晴らしく素晴らしいので素晴らしさをお伝えしようと思います。 rmaksim/Sublime-Text-2-Goto-CSS-Declaration どんなプラグインか こちらのGoto CSS declaration、どういったものかと言いますとhtmlのID、クラスにカーソルを合わせてキーを押すと該当のcssの編集箇所にカーソルが飛ぶと言うもの。嗚呼説明しづらい。 まぁプラグインのgithubに行ってもらえばそこにあるgif動画でどんなものか一目瞭然なのですが、私もgif作ってみました。 プラグインはPackage Control から「gotocssdeclarat
「Sublime Text 2で全角スペースをハイライト表示するプラグインを作る」で、ハイライトとアウトラインできるようにしてみた - Qiita
全角スペースをハイライト表示するプラグインを弄らせて頂きました。 変更点 参考サイトでは、パターンにマッチしている部分をアウトラインする だけだったので、ちょっと改造して、アウトラインとハイライト両方できるようにしました。 ソース #!/usr/bin/python # -*- coding: utf8 -*- import sublime import sublime_plugin class AlwaysHihghlight(sublime_plugin.EventListener): # highlight def highlight(self, view): pattern = view.settings().get('alwayshighlight_pattern') if pattern: view.add_regions('AlwaysHighlight_Highlight'
Sublime Text2で言語別にインデント幅を設定する | blog.nomnel.net
正確にはシンタックス定義別に, だけれども. 設定したい言語のファイルを開く(シンタックスを対象の言語に設定する) Preferences > Settings – More > Syntax Specific – User として言語別の設定ファイル(.sublime-settings)を開く インデントの設定を記述して保存 インデントの設定は { "tab_size": 4, "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": true } みたいな感じになる. (参考: Indentation Settings – Sublime Text 2 Documentation)
Sublime Text: InputSequence でキャレット位置に連番 :: log.chocolateboard
Sublime Text: InputSequence でキャレット位置に連番 Sublime Text の機能である複数キャレット。キャレット位置に連番入れたい！と思っていたときに出会ったプラグイン。 しばらく使ってみた結果、これは使いつづけるなぁって思ったプラグインのひとつです。作ってくれている人に感謝 XD kope88/InputSequence ←なくなっちゃったぽい？kazu1107/InputSequence ←新しいぽいこの記事は「kope88/InputSequence」のリポジトリがあった頃に書かれたものです。「kazu1107/InputSequence」の詳しい使い方は README をご確認ください ;D 1. 複数箇所にキャレットを置く複数箇所にキャレットを置くときは、ctrl + shift + ↑ か ctrl + shift + ↓ か *cmd 押しなが
Sublime Text：サイドバーのProjectの名前を変更する方法 - フロントエンドとかPCとかスマホとか
Sublime Text 便利ですよね。 フォルダをドラッグして、プロジェクトとして管理できたり。。。 でも、いくつものプロジェクトを同時に開いているとき、 フォルダの名前がプロジェクト名になるのって困りませんか？ 同じような名前のフォルダを使いますよね。 ということで、プロジェクトにちゃんと名前をつける方法です。 まず、現在の状態を保存します。 開いているファイルも一緒に保存されるので、閉じておくとか開いておくとかは判断してください。 Project > Save Project as.. 保存場所はどこでもいいです。あとから切り替えるときは、 Project > Switch Project in Windows で簡単に切り替えられますので。。 保存した、＜名前＞.sublime-project ファイルを編集します。 { "folders": [ { "path": "projec
Sublime Text 2にSmarty用シンタックスハイライトを追加 - Qiita
Sublime Text 2はデフォルトの状態では、Smarty用のシンタックスハイライトを持っていないので、追加する方法。 Sublime Forum • View topic - Is there a Smarty plugin for Sublime Text?でtitoさんが書いている内容そのまま。 HTML.tmLanguageからsmarty部分をアンコメントする '%APPDATA%\Sublime Text 2\Packages\HTML\HTML.tmLanguage'( <- WIndowsの場合)を開き、'smarty'で検索すると、以下の様な感じでコメントアウトされているので、これをアンコメントする。 textmateのsmarty用シンタックスファイルをダウンロードして配置 textmateのsmarty用シンタックスファイル http://svn.textmat
Sublime Text 2 で 全角スペースをハイライトする方法 - ひよっこPGのブログ
今回は、エラーの原因となる全角スペースを発見しやすくする方法をメモします。 きっかけは PHPのプログラムを書く時に $str = "あああ" . "いいい" . "ううう"; // . は 他の言語での文字列結合 + と同じ意味です。 自分の好みで、 . と文字列の間にスペースをいれていたのですが 文字列が全角文字なんでスペースも全角スペースを入力してしまいエラーが起きてしまいました。 ぱっと見ても全角スペースとは、分からないため エラーであることが、気付きにくく 時間がかかってしまったことがきっかけです。 それでは、このようなエラーを未然に防ぐために全角スペースを分かりやすくハイライトする方法を書きます。 まず、標準の Setting Userから JSON形式で指定するプロパティでは、 全角スペースや全角英数字をハイライト出来ない。 上記のような設定ファイルですね。 なので、プラグイ
mixinが3文字で！Emmetオリジナルスニペットの登録方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのサリーです。 LIGにSassがもたらされて1年… たまにあるCSSで書かなきゃいけない機会にネストして書いてハッとしてキーーッてなったりしますよね（Sassあるある）。 私はDreamweaverを使いつつたまーにSublimeText2を使っているのですが、DreamweaverはSassのコードヒントが出ないので、Compassのmixinを呼び出すのがかなり面倒です。 簡単に呼び出せるようにスニペット機能を使おうと思ったのですが、Emmetのスニペットを使う方が簡単そうだったので、やり方に慣れていることもありEmmetを使うことにしました。 今回はDreamweaverまたはSublimeText2で、Emmetにオリジナルスニペットを登録する方法を紹介します。 Emmetをインストールする すでにEmmetをインストール済の方はこの項目は飛ばしてくださ
SublimeTextの教科書で紹介されてるプラグインまとめ - Qiita
via Impress Japan: Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ サンプルPDF4章の目次より ※説明は私の調べたものなのでかなり適当です。 SideBarEnhancements サイドバー右クリックのメニューを拡張 titoBouzout/SideBarEnhancements LineEndings 改行コードの変更。 SublimeText/LineEndings ※現状、SublimeText3で動かないです。143Pのコラムで動かし方について言及がある模様。 TrailingSpaces 行末の半角スペースを削除。 SublimeText/TrailingSpaces Focus Last Tab Sublime Text 2 では、Chrome などのタブブラウザーと同じように command + 1
Sublime Text2の作業効率を加速させるパッケージ11個
こんにちは。 湿度で髪が跳ねまくっています。れこです。 今日は、何を思ったのか、 Sublime Text2でインストール可能なパッケージを全部見てみよう と思ってa~zまで全部のパッケージを見てみました。 その中で、 パッケージ名から「おっ」と思ったライブラリをインストールして、 独断と偏見で使えると思ったパッケージだけご紹介致します。 あまりに有名なEmmetやPackage Controlなどは除外して、 マイナー路線を集めたつもりですが、 全然マイナーじゃなかったらすみません。 では行きます。 Japanize まずは、パッケージと言って良いのか謎ですが、 Sublime Textのメニューを日本語化するパッケージです。 Sublime Textの日本語化に必要なファイルが揃っています。 READMEから少し引用すると、 同梱されている_.jpファイルを、 _ C:Usersユーザ
これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
Sublime Text 2の基本とカスタマイズ【Vim風】
2012年12月4日：Vim化について指摘と参考になる情報をいただいたので追記しました。 こんにちは、僕はVimユーザーです（ちなみにVimを完璧に使いこなしているわけではありません）。 今更ながら「Sublime Text 2」というナウでヤングなエディタも使いこなせるようになりたいと思い、Sublime Textの基本設定からプラグインやスニペットの作り方まで調べた内容をこの記事にまとめることにしました。 細かい情報までまとめることはできなかったので、より詳しい内容を紹介してくださっているブログやサイトへのリンクを設けています。 この情報以外にもSublime Text 2をVimに近づけるプラグインやカスタマイズ方法があればコメントいただけるとうれしいです。 また、間違いがあればコメントいただければすぐに直します。よろしくお願いします！ Sublime Text 2は有料（$59）の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sublime Text 2 Plugin Tips
Sublime Textで覚えといたら良さそうな操作 - なんかできたよー。
sleepingcatsyndrome.com
Chrome Developer ToolsやSublime Text 2のテーマをギャラリーにしている・「devthemez」
[Sublime Text 2] 今編集しているファイルがサイドバーのどの位置にあるかすぐわかるパッケージ「SyncedSideBar」![[Sublime Text 2] 今編集しているファイルがサイドバーのどの位置にあるかすぐわかるパッケージ「SyncedSideBar」](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c2fb9776cef7ec075e8e64ec8ff69856aca5341/height=288;version=1;width=512/https%3A%2F%2Fm.designbits.jp%2Fmedia%2Fskitched-20130524-110304.png)
