SublimeTextのプラグイン「AutoFileName」は、ファイルの一覧や画像サイズを自動的に取得してくれるので、とても便利です。

HTMLコーディングをしてる時は手放せないプラグインです。

このプラグインですが、デフォルトの状態ではHTMLファイルからの「相対パス」でファイルを指定することになります。

しかし制作現場では、/（スラッシュ）からはじまる「ルートパス」で記述したいことが多々有ります。

そこで、「AutoFileName」をルートパスで使用する方法です。

---

1. プロジェクトを設定する

「AutoFileName」をルートパスで使うにはSublimeTextのプロジェクトを設定することが必要です。

プロジェクトの設定方法はいくつかありますが、ここでは僕がよく使う方法を紹介します。

 

まずはSublimeTextのサイドバーにプロジェクトに設定したいファイルをフォルダごとドラッグ&ドロップします。

サイドバーが表示されていない時には、「View > Side bar」を選択してください。

 

次にそのまま「Project > Save Project As…」を選択します。

 

プロジェクトの設定ファイルを保存します。保存する場所はどこでも問題ありません。

 

２．プロジェクト設定ファイルを編集する

プロジェクトを開いた状態で「Project > Edit Project」を選択します。

すると次のような設定ファイルが開きます。これの「”path”: “.”」の箇所に、使っているPC上でのプロジェクトまでのパスを入力します。

{
	"folders":
	[
		{
			"follow_symlinks": true,
			"path": "."
		}
	]
}

 

PC上でのプロジェクトの位置ですが、

Macの場合は、ターミナルにプロジェクトフォルダをドロップするとパスが表示されます。

ここでは「/Users/kanakogi/works/web/html」というパスが取得できたことにします。

Windowsの場合は適宜しらべてください。

 

先程のプロジェクト設定ファイルを次のように修正します。

{
	"folders":
	[
		{
			"follow_symlinks": true,
			"path": "/Users/kanakogi/works/web/html"
		}
	]
}

 

3. AutoFileName用の設定を記述する

最後にAutoFileName用の設定も記述します。

「afn_proj_root」のパスは、先程の「path」と同じします。

次のように追記したら保存します。

{
    "folders":
    [
        {
            "follow_symlinks": true,
            "path": "/Users/kanakogi/works/web/html"
        }
    ],
  "settings": {
      "afn_use_project_root": true,
      "afn_proj_root": "/Users/kanakogi/works/web/html"
  }
}

 

---

プロジェクト設定ファイルを保存をしたら早速、確認してみましょう。

「src=”/〜”」のように、/（スラッシュ）から書きはじめて、AutoFileNameが参照ファイルを表示すれば完了です。

 <img src="/" >