For those who are using Sublime Text as their primary text editor and migratred to Vim, you might found using Emmet on Vim is kind of hard. But, you can still set the <Tab> key when expanding abbreviation on your Vim using Emmet.vim by adding this line on your .vimrc: let g:user_emmet_expandabbr_key='<Tab>' But the problem with this is, it prevents you to use <Tab> key for indention. But of course
If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes. In short, BEM introduces three concept types for CSS classes: Block, Element and Modifier. Block is a some sort of a namespace for a semantic sections of HTML page, for example, search-fo
BEM Advent Calendar 2013の3日目です。 BEM、良さげだけどHTML書くのが面倒になるじゃん、class長いし、多いし。などと思ってBEMを敬遠されている方がいらっしゃったらEmmetのBEMフィルターを利用すれば良いと思います。 Emmetって？ Zen-Codingをさらにすごくしたやつです。以下あたりが分かりやすいと思います。 Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17 EmmetのBEMフィルターを使ってサクッとHTMLを書いてみる BEMろうかなと思ってはみたものの、いざやってみると毎回「ブロック名-エレメント名」なんてclassを書いてらんねーよとなって途中で投げ出してしまうということがあります。僕は結構あります。 まぁ、それでもBEM + 自分ルールの良い感じの HTML / CSS にはなるので
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
27 Nov 2012 Zen CodingもといEmmetを使いこなすとまでいかなくとも、それなりに使ってはいるが、実はCSSではあんまり活用していなかった。 というもCSSに関しては、多少Emmetや他のコード補完プラグイン（パッケージ）の支援はあるものの、HTMLよりも手グセというか、自然とプロパティなり値なりをさっさと書いてしまうし、それほどありがたい、と思えるほどでもない。 またZen Codingにせよ、Emmetにせよ、短縮形のルールが決まっているし、それらを覚えないといけないので少し大変だ。 そこでHayaku、らしい 二度見しそうな名前だが、これはHayakuというSublime Text2のパッケージ。Emmetと違い、対象になるのはCSS（とCSSプリプロセッサ）であり、前述の通りCSSの記述に関してはこれといったツールを使っていない自分でも感動した。 ちなみにHay
最近 zencoding.vim を大きく修正しました。とは言ってもこれまで単体テストを作ってきた事もあって、過去の動作を(なるべく)壊さずに大規模な修正が行えました。 これまでは一つのファイルに html, css, haml の処理が全て記述されていたのでとてもスパゲッティなコードになっていて、もう少し放っておくとカオスな状態になりかけていたので、ファイルを分割しインタフェースを揃える事にしました。 これにより、今後新しいフォーマットに対応する際にも、zencoding/lang にあるファイルの真似をして記述すれば実装出来る様になります。 haml に対応した 「えっ？前から対応してたんじゃないの？」と言われる方もいるかもしれませんが、これはあくまで expand abbreviation の haml フィルタとしてだけサポートしていました。 何が変わったかというと zen cod
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: <!doctype html> <html lang="en"> <head> <title>Demo</title> </head> <body> | </body> </html> @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML wait: 600 run: emmet.expand_abbreviation wait: 1000 tooltip: Trav
Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。 Zen-Codingから使える CSSの展開は、ほとんどのZen-Codingから使えます。 Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。 プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形
« 僕がboost::asioとboost::property_treeを使いHTTPプロキシ環境下で非同期にGoogle Search APIから検索するまでにやった、たった一つの事。 | Main | python 補完のVimプラグイン「jedi-vim」がスゲー » しばらく zencoding-vim の emmet ブランチで開発し、落ち着いたら master にマージします。 親参照 ^ で親へ移動出来る様になってます。 .header>.nav^.logo これが <div class="header"> <div class="nav"></div> </div> <div class="logo"></div> こう展開されます。^^ で複数階層登れます。 高度なCSS補完 おそらくこれが emmet の最大の武器と思う。 まず m0.1 は margin: 0.1em
Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。多くのアプリケーションで提供されており、3年前ほどから日本でも多くのサイトがZen-Codingを紹介しています。 そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。 Emmet(beta) Emmetは、開発中です。 正式リリースはまだですが、機能は試すことができます。 Emmetは、2013年2月24日に正式リリースされました。 基本的には、今までのZen-Codingと変わりません。 Zen-Codingを使っていた人は、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
