シンプルで見やすく、Web制作時などのコーディング作業が捗る使いやすいSublime Text 2や3のテーマを紹介します。使い慣れたエディタもテーマを変えると新鮮な気持ちになりますよね。 まずは、最近リリースされたSublime Text 2/3のテーマから。 テーマファイルをインストールする方法や日本語化は、一番下にまとめました。
基本的には今使ってるもの中心ですが、僕のメインエディタであるSublime Text 2のプラグインをまとめてみました。 ※細かい設定は省いています。 コーディング関連 Emmet Zen Codingの次期バージョン。主にHTMLを書く際に Hayaku Emmet(Zen-Coding)を上回るCSSの展開 例)bdrds→border-radiusなど Dummy Image Generator Dynamic Dummy Image Generatorで使えるダミー画像の埋め込み BracketHighlighter タグやクォーテーションマークなどのハイライト表示 SCSS SCSSの補完 Compass Compassの補完 jQuery jQueryの補完 CSScomb CSSのプロパティの自動整列 WordPress WordPressの補完 SublimeLinter
週末にSublimeText2を起動したらパッケージからテーマからおかしなことになってました。 どうやらPackageControlが2.0にアップデートされたのでその影響だと思います。 Twitterを見ていたら、お友達のフォロワーさんもなっていたので、Twitter検索したら私だけではない症状だったので直し方を共有します。 再インストールやパッケージを入れ直したりしなくても直せますので焦らずにー。 エラー画面 ちなみに画面がこんな感じになった。 ブフォォwww 終わったンゴwwwwwww 見た目でおかしくなったのがすぐ分かりましたが、その他のパッケージも色々使えなくなってました。 テーマのパッケージがPackageControlのアップデートで更新されたみたいです。 Packageフォルダ見ると、アルファベット順にどんどん更新されている。 直し方 前置きはどうでもいいとして、直し方です
ことば 「1番の下手くそでいよう」 ・・・こうして僕は、人はどんな仲間と一緒にやるかで腕を上げることもあれば落とすこともあると学んだ。 チームで1番下手くそでいるのは、バンドで一番下手くそでいるのと同じ効果がある。どういうわけか自分自身が賢くなるんだ。話し方や書き方さえ以前より知的になる。自分の生み出すコードや設計が以前よりエレガントになり、難しい問題をますます創造的なソリューションで解決できるようになる。 情熱プログラマー ソフトウェア開発者の幸せな生き方 Sublime Text上でJavaのコンパイルや実行を行う。 1.Sublime TextとJDKはインストール済みとする。 2.Sublime TextのPreferences > Browse Packagesを選択 3.エクスプローラが開かれるので「Java」フォルダの中へ。 4.JavaC.sublime-buildというフ
これまでかたくなに Dreamweaver を利用していたのですが、CS6 にアップデートしたあたりから動作が重くなり、直近ではもーやってられんとなりましたので重い腰をあげて Sublime Text 2 デビューをはたしました。 これでやっと僕にも春が来るのかなとワクワクしております。 参考にした記事 以下あたりを読みました。 基本 Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog Sublime Text2の複数カーソルの使い方 #SublimeText2 – Qiita [キータ] SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ | 濃紺ピッチャー Emmet系 Sublime Text 2のEmmetでdivの閉じタグにコ
JSHint JSHintとは、Javascript用構文チェッカーです。 構文チェッカーとしては、かなり厳しめのチェックをしてくれるJSLintがありますが、 これをforkして融通効くようにしたものがJSHintです。 詳しい経緯はここに。 とりあえずどんなチェックをしてくれるか知りたい場合、 このサイトでJavascriptのコード入力すれば、 どのようなチェックをしてくれるかわかります。 今回はコマンドラインからJSHintを使ってみたり、Sublime Text2から使ってみましょう。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.10.0 npm : 1.2.14 Grunt : 0.4 npmを使用してJSHintをインストールします。 このモジュールはグローバルオプションをつけてインストールしましょ
最近、JavaScriptの新刊が本当に増えててうれしいなーと思うtanakaです。Web+DB PRESS vol.73 の連載で、JavaScriptのユニットテストについて書かれていたのを読みました。主に3つのツール・ライブラリが紹介されていましたが、中でも複数のブラウザに対して一斉にテスト実行させるtestemがすごい便利そうです。以前、同様のツールであるjsTestDriverをバシャログで紹介しましたが、testemはnpmコマンドでインストールしたらすぐテストを書き始められるし、設定を書けば、自動でブラウザを起動してくれるので楽でした。(Windows,Macともに導入できました)テスト書きたいと思っている方がいましたら是非読んでみてください。 さて、testemはまだあんまりいじってないので、今日は JavaScript のコードをjshintというツールでチェックする方法
ダミーテキストの挿入 loremを記載して、展開するとダミーのテキストを挿入してくれます。 //展開前 p*3>lorem //展開後 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil laborum vero possimus. Nobis velit iste eveniet atque aspernatur! Repellendus illum nulla similique quia.</p> <p>Magni sapiente dolorum dolorem expedita natus eaque aut nesciunt modi libero aspernatur omn
こんにちは、ちょっと年末前くらいから、「Emmet」というキーワードを聞くようになり、 日頃お世話になっている、sublme text 2でも使えるということで今回、上下巻に分けてご紹介したいと思います。 アジェンダ Emmetとは? 誰が開発してるの? Emmetプラグインのインストール! インストール後の設定 どんな感じがさわってみる。 おまけ Emmetとは? はじめて「Emmet」を聞いた方は「Emmetってなに?」となるかと思いますので、簡単にご説明をできればと思います。 それでは、「Zen Coding」はどこかでお聞きしたことがあるのではないでしょうか? 「Zen Coding」は、コード(スニペット)とショートカットを組み合わせて、効率的にHTMLやCSSのマークアップ手助けしてくれる、すごいツールで認知度も高いと思います。 その「Zen Coding」が名前を変えて&進化
この記事ではDefault設定ファイルにどのような記述がされているか、その記述にどんな意味があるかを一つ一つ見ていきます。実際に設定をカスタマイズしてみたい方は、メニューのPreferencesタブの"Settings - User"からUser設定ファイルを開いてそこでいろいろ試してみましょう。 Sublime Text 2 のDefault設定ファイル 本文 Default設定ファイルとは、Sublime Text のデフォルトの動作の設定が記されたファイルのことです。Default設定ファイルはメニューのPreferencesタブの"Settings - Default"から開けます。 早速設定ファイルを眺めていきましょう。 設定ファイルは1個のJSONオブジェクトからなっています。このJSONオブジェクトに色々なプロパティを設定して、ひとつの設定ファイルとしているようですね。 その
このエントリは Sublime Text 2 Advent Calendar 2012 用です。 --- TypeScript については公式サイトなどを見てください。 Sublime Text 2 で TypeScript を開発するためのこまごましたチップスをブログに書いてきたので、一旦まとめたいと思います。 1. TypeScript ファイル(.ts)をシンタックスハイライトするようにする 「Y.A.M の雑記帳 - Sublime Text 2 に TypeScript の syntax highlighting を入れる」 を見よう! 2. TypeScript の補完がでるようにする 「Y.A.M の雑記料 - Sublime Text 2 で TypeScript の補完を出すプラグイン作った」 を見よう! 補完は以下のコマンドで出ます(標準機能)。 Linux : alt
Sublime Text 2 自体の設定(例えばテキストサイズとかフォントとか)は、[Preferences] - [Settings -User] に書きます。 デフォルトだと { "ignored_packages": [ "Vintage" ] } なので、何を書けばいいかよくわからん!と思いますが。 [Preferences] - [Settings - Default] にデフォルトの設定があるので、これを参考にして上書きしたい設定を [Settings - User] の方に書きます。[Settings - Default] の方は変更しません。 いくつか紹介します。 "font_face" 文字のフォント システムフォントとして設定されている必要があります。 私のオススメは monaco (ver 2.0) と Source Code Pro です。 Mac はフォントファイ
Sublime text 2で使ってみる 最近、注目されているSublime text 2にお世話になっているので、今回はSublime text 2の手順で作業してみようと思います。 それでは早速CSScombのプラグイン(パッケージ)をインストールしてみましょう。 Sublime text 2の詳しい説明は下記をご参照ください。 【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】 CSScombプラグインのインストール Sublime Text 2を立ち上げたら、プラグインをインストールするべく、お約束のコマンドパレットを開きます ショートカットは「Ctrl+Shift+p」です。 次に、「Pakege Control: Install Pakage」を実行し、インスールしたいプラグインを探します。 CSScombと入力すると該当
Sublime Text 2 には、デフォルトで html の入力補完機能が用意されています。 例えば、html まで打って Tab キーを押すと、 <html> <head> <title></title> </head> <body> </body> </html> に変換されます。 link まで打って Tab キーを押すと、 <link rel="stylesheet" type="text/css" href=""> に変換されます。 script まで打って Tab キーを押すと、 <script type="text/javascript"></script> に変換されます。 ここで、例えば script と打ってタブを押したときに <script type="text/javascript" src=""></script> と src 属性も入れてほしいなと思った場合、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く