あまり知られていない、効率化パッケージ4点とテーマ1点

150629_001

Will Bond 氏が運営している Package Control では、Sublime Textの様々なパッケージ(プラグイン)を探すことができます。そこで見つけた、作業効率を上げるパッケージ4点と、テーマを1点紹介します。

目次

 

Animate.css Snippets

150629_002

「Animate.css」の中から、任意のセレクタを選択できる。元のCSSファイルには、3,200行以上のコードが記述されいるため、一部のみをピックアップできて便利。

使い方

まず、Package Control(Ctrl + Shift + P)からインストール。

続いて、Animate.css 公式サイト からCSSファイルをダウンロードして、ライセンス情報をコピペする。

トリガーとなる基本セレクタもコピペ。

CSS上で animate と入力すると、Animate.cssの補完ウィンドウが出現するので、使用したいセレクタ名を入力して選択。画像は「bounce」を選択した場合。

150629_003

150629_004

 

Can I Use

150629_005

有名どころだが、デフォルトのキーバインドが Ctrl + Alt + F と使い難いため、Ctrl + F12 に変更している。デフォルトのまま使っている人が多いようなので、参考までに。

150629_006

他のキーバインドと衝突しないよう、先にキーバインド一覧で確認してから変更する。

150629_007

 

CSS Comments

150629_008

CSS用コメントを5つの定型文から選択する、シンプルなパッケージ。毎回コピペしたり、スニペットを作る必要がなくなる。

使い方

Package Controlからインストール。

CSS上で c- と入力すると補完ウィンドウが出現するので、その中から選択。

150629_009

150629_010

 

FTPSync

150629_011

ファイルを保存すると同時に、サーバーへ自動アップロードしてくれる。SFTP機能と、画像ファイルなどの自動アップロード機能はない。

使い方

まず、Package Controlからインストール。

続いて、ルートディレクトリのindex.htmlをSublime Textで開き、Package Controlに「ftpset」と入力。すると、「FTPSync: Setup FTPSync in this folder」と表示されるので選択。

150629_012

ローカルのルートディレクトリに「ftpsync.settings」というセッティングファイルが生成されるので、FTP情報を記述する。

8行目の “overwrite_newer_prevention”: false は、保存する度に「アップロードしますか?」とダイアログで確認してくるのを防ぐコード。

ちなみに、SFTPパッケージは「Sublime SFTP」が有名。

 

Preap

150629_013

使用しているテーマとカラースキームは「Preap」。原色から少し彩度を低くした、昭和レトロのようなコードカラー。サイドバーのファイルアイコンが変化するのもいい感じ。

HTML

150629_014

PHP

150629_015

CSS

150629_016

SCSS

150629_017

JavaScript

150629_019

セッティングファイル

150629_020

サイドバー

150629_021

気まぐれで、有名な「Flatland」に切り替えたりしている。

 

自分好みにカスタマイズ

150629_022

Package Control は英語サイトですが、洗練されたデザインでとても見やすいです。トレンド、新作、人気ランキング、タグ別、検索フォームと、いろんな探し方ができます。

カラースキームからテーマを探すなら、「Colorsublime」が良いですよ。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。