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

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が先に挿入されるようになります。

    WEB制作についてのご相談はお気軽にどうぞ。

    WEBデザイン制作、ブランディング、Wordpress構築・カスタマイズ、
    WEBサイトに関するお見積もり・不明点やご相談等、お気軽にお問い合わせください。

    この記事を書いた人
    KEiSoN★
    スカイゴールド株式会社 代表取締役 / クリエイティブディレクター/webデザイナー

    2009年1月よりフリーランスのディレクター/Webデザイナーとして活動しながら、ノマドな働き方を試み始める。
    過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
    現在は主に東京を中心にしながら、 タイ・バンコクを年間4,5回ほど往復しながら活動中。
    Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。
    国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。
    最近は、Shopify制作の勉強も行なっている。

    アーカイブ