海外記事で紹介されていたSublime Textの便利なパッケージ

元記事を雑に翻訳しながら、紹介されていたSublime Textの便利なパッケージをインストールしてみました。

まずSublime Text と、それにPackage Controlを入れていることが前提となりますが、そのへんについては以前書いたこの記事などを参照ください。
ちなみに自分はSublime Text 3を使用してます。

シンタックスハイライター

JavaScript Next
CSS3
SCSS
Sass

CSS3を入れたところ、作者からの説明でパッケージコントロールからデフォルトCSSパッケージを消す用に言われました。
なので、下記の流れで消去。

Mac:
cmd+shift+p -> Package Control: Disable Package -> CSS

Linux/Windows:
ctrl+shift+p -> Package Control: Disable Package -> CSS

それと、もしCSS3_Syntaxか(パッケージ探したけど見当たらなかった)Emmetをインストールしているようなら、それも誤動作(?)を起こす可能性があるので消去するように言われました。Emmetはかなり必要なので、一応消しましたが使いにくくなるようなら戻そうかと。
(でも元記事ではEmmetも一緒に紹介している…?)

その他入れておくといいもの

Stylus
Less
Better-Coffeescript
Typescript Package
Haml
Ruby Slim(rubyの知識が必要そうだったので保留)
Jade

・Color Highlighter
CSSなどで色指定した際、その色を文字背景として表示してくれるのでわかりやすくなります。

・Emmet
上記のStylus導入時に消すように言われましたが、必要なので再導入。

・HTML
Disable Packageから確認するとすでに入っていました。

元記事にはEmmetのサンプル・チートシートへのリンクなどもありますので一度見てみるといいかと思います。
ちなみに.htmlで保存していればtabキーで変換されますが、保存していない場合でもCtrl + eで変換できるたりします。おおちゃくですが。
逆に言えばtabキーでも変換出来て便利ってとこです。

・CSS
これはStylusパッケージの兼ね合いもあり消したままにしました。ここでもCSSでのEmmet自動補完サンプルが載っています。

posrel    → position: relative;
c         → color: #
w100      → width: 100px;
w100p     → width: 100%;
bt1-s-red → border-top: 1px solid red;
tdn       → text-decoration: none;

など。

・Sublime Linter
プログラム言語の構文エラーチェックツール。これをインストールした後に、使用する言語それぞれのLinterを別でインストールする必要があります。

Better-CoffeeScriptとEmmetのコンフリクトについて

ちょっとしたことですが、スタイルシートでfllと入力してtabキーを押した場合、Emmetの補完でfloat: left;と自動挿入してくれますが、Better-CoffeeScriptを入れた場合、別の変数が補完候補となりバッティングを起こしていました。

自分としてはCSSの入力を優先したかったので、やむなくBetter-CoffeeScriptは削除しました。Ctrl + eすればバッティングは起きませんが、tabキー一発で変わってくれたほうが楽なもので。

テーマのカラースキームについても紹介されてるので、元記事も見てみてはいかがでしょうか。

参考

Sublime Text for Front End Developers | CSS-Tricks

Sublime Text3で構文エラーをチェックするプラグインが超絶便利 | 株式会社LIG

 

Sublime Linter入れてからphplintを入れようとしてハマったときに参考にしたサイト様↓

rvm で ruby 1.8.7 インストール時にエラーになったので gcc 4.9 を homebrew で入れた | EasyRamble

OSX 10.10 Yosemiteでhomebrewによるgccインストールのエラーを回避する方法 – memorandum

 


今日聞いた曲

顔 / 東京事変

トワイライト / GOING UNDER GROUND

シャララ / THE BLUE HEARTS

NO.1 / スネオヘアー

おふろのうた / ナイス橋本

 716 Views