あまり知られていない効率化パッケージ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ファイルをダウンロードして、ライセンス情報をコピペする。

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/

/*!

Animate.css - http://daneden.me/animate

Licensed under the MIT license - http://opensource.org/licenses/MIT

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

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated {

-webkit-animation-duration: 1s;

animation-duration: 1s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.animated.infinite {

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

}

.animated.hinge {

-webkit-animation-duration: 2s;

animation-duration: 2s;

}

.animated.bounceIn,

.animated.bounceOut {

-webkit-animation-duration: .75s;

animation-duration: .75s;

}

.animated.flipOutX,

.animated.flipOutY {

-webkit-animation-duration: .75s;

animation-duration: .75s;

}

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

150629_003

150629_004

Can I Use

150629_005

有名どころだが、デフォルトのキーバインドが Ctrl + Alt + F と使い難いため Ctrl + F12 に変更している。

{ "keys": ["ctrl+f12"], "command": "use_it" }

1	{ "keys": ["ctrl+f12"], "command": "use_it" }

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情報を記述する。

{
	"default": {
		"host": "ホスト名",
		"username": "ユーザー名",
		"password": "パスワード",
		"path": "サーバーのルートディレクトリ",
		"upload_on_save": true,
		"overwrite_newer_prevention": false
	}
}

{

"default": {

"host": "ホスト名",

"username": "ユーザー名",

"password": "パスワード",

"path": "サーバーのルートディレクトリ",

"upload_on_save": true,

"overwrite_newer_prevention": false

}

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 は洗練されたデザインでとても見やすい。
トレンド・新作・人気ランキング・タグ別・検索フォームといろんな探し方ができて嬉しい。

鼻ちょうちん

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

目次

Animate.css Snippets

使い方

Can I Use

CSS Comments

使い方

FTPSync

使い方

Preap

HTML

PHP

CSS

SCSS

JavaScript

セッティングファイル

サイドバー

自分好みにカスタマイズ

コメントを投稿する返信をキャンセル

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

目次

Animate.css Snippets

使い方

Can I Use

CSS Comments

使い方

FTPSync

使い方

Preap

HTML

PHP

CSS

SCSS

JavaScript

セッティングファイル

サイドバー

自分好みにカスタマイズ

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル