Sublime Textで画像パスを補完してくれるプラグイン「AutoFileName」

2015.11.21

2015.11.21

sublime

今回はSublime textの便利機能を紹介したいと思います。
web制作の際、HTML,CSSコーディングする時には画像のパスは必ずといっていいほど入力します。
その際に、画像のパスをサジェストしてくれる機能です。
Sublime textでは、この機能がデフォルトでは無いので、プラグインをインストールする必要があります。

まずは、AutoFileNameをインストール

1.shift + command + pで「Command Palette」を開きます。

1

2.「install」と入力。「Package Control: Install Package」を選択。

2

3.「autof」と入力すると、AutoFileNameが出てくるので、選択。
3

インストールが完了したら、再起動。

実際にAutoFileNameを使ってみる

「img → tabキー」で、「src=””」を出すと、フォルダやファイルの読み込みの候補で出てきますので、どんどん選択していきます。

4

5

画像を選択すると、widthとheightが自動で補完されます。
6

widthとheightの順番を入れ替える

デフォルトでは、heightが先に挿入されるので、widthが先のほうがいいという方は、
「preference → Settings – User」を選択。

w

開いたファイルに、下記の記述をすると、widthが先に挿入されるようになります。

 
"afn_insert_width_first": true
 

KEiSoN★

デジタルハリウッドオンラインスクールで、webデザインの基本を学ぶ。
2007年よりECカート開発会社にてwebディレクター/webデザイナーとして従事。マネージャー職も務める。
2009年1月よりフリーランスのwebディレクター/Webデザイナーとして独立。2015年11月にスカイゴールド株式会社として法人化。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発が得意。
国内外の様々な価値観・クリエイティブに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。