position: absolute;

選択されているタグ : sublimetext

タグを絞り込む : book

2015年のSublime Textの開発状況


とりあえず3のBetaも更新されたりとあれこれやっているようなので一旦メモ程度にまとめておきました。詳細はそれぞれリンク先を参照して下さい。

去年のうちにリリースされるはずだった最終的な3の製品版はいつになるのかなどは今のところ明確な情報は知りません。いつになるんでしょうね。まあ、当たり前のように3Beta使っているのであまり待っている感がないのですけども。


コマンドによるファイル操作を行うSublime Textパッケージ「Sublime Files」


Sublime Textを導入した時に、SideBarEnhancementsは、まず必須パッケージ的に入れますが、ディレクトリやファイルの操作が基本サードバー内でのマウス操作になります。それはそれで構わないのですが、やはりキーボードの操作のみで行いたい場合もあります。今回はそれが行えるSublime Filesを紹介します。

詳しくは上記のパッケージのページを参照して貰えばなんとなく利用感はつかめるかと思いますが、私もデモの動画を作成しました。

Sublime Files デモ - YouTube

では、ざっくりとインストール後の利用法を紹介します。


Sublime TextとEmmetとeCSStractorでBEMもサクサクマークアップ


ちょっとあおり気味のタイトルです。すいません。

Sublime TextにはHTMLからCSSのクラス構成を変換してくれるeCSStractorというプラグインがあります。

どんな感じかといいますと

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <header class="siteheader">
        <h1 class="siteheader__title"><a href="#">siteTitle</a></h1>
        <p class="siteheader__subText">subtext</p>
    </header>
    <nav class="globalNav">
        <ul class="globalNav__list">
            <li class="globalNav__item globalNav__item_active">nav01</li>
            <li class="globalNav__item">nav02</li>
            <li class="globalNav__item">nav03</li>
        </ul>
    </nav>
<body>
</body>
</html>

という感じのHTMLから

.siteheader {
}
.siteheader__title {
}
.siteheader__subText {
}
.globalNav {
}
.globalNav__list {
}
.globalNav__item {
}
.globalNav__item_active {
}

こういう感じに変換してくれます。

さらにはwith BEM Nestingというのを利用すると

.siteheader {
    &__title {
    }
    &__subText {
    }
}
.globalNav {
    &__list {
    }
    &__item {
    }
    &__item_active {
    }
}

こうしてくれます。わおー。(Sass v3.3(のはず)以降で有効)

便利!便利!サクサク!という感じですが、何点か気になるところがあるのでもうちょっと詰めて見て行きましょう。


SideBarの機能を追加する[Sublime Text]


このエントリーはSublime Text Advent Calendar 2014の25日目です。おかげさまで全日エントリーが揃いました。ありがとうございました。で、言い出しっぺにして最終日の私が遅れてしまうという。すいません。すいません。

まあ、いいです。気を取り直して行きましょう!(自分で言うな)

今回はSublimeTextでは「必須」とまで言われているパッケージ、SideBarEnhancementsのお話です。

万人向けの機能はちゃんと揃っているSideBarEnhancementsですが、「俺はこれつかうのよ」って機能を追加したくなります。で、いろいろと調べたりするんでしょうが今回はお得意(?)のパッケージに手を入れる方式でやりたいと思います。