Settings (Config)

概要

  • Settings(File> Preferences> Settings) > Relative Path> Format

    • ここで、挿入する相対パスのフォーマットを設定します

  • フォーマットを増やしたい場合は Add Item ボタンを押し、項目を追加します

    • Item 列には好きな名称を設定してください (フォーマットの内容を表すものなど)

    • Value 列に、フォーマットを書きます

    • 一番先頭のItem名は、 format01 で固定されています

    • 最低でも一つ以上のアイテムが必要です

    relpath_doc_006

書式

プレースホルダ

  • 一番簡潔なフォーマットは {RELPATH} です

    • {RELPATH} の部分に、実際の相対パスの文字列が挿入されます

    • {RELPATH} の場合は、HTMLなどで採用されている、 HMTLファイルが存在しているディレクトリ から 対象のファイル までの相対パスになります(css/default.css のような表記)

    • {RELPATH} 以外にもプレースホルダが用意されています。詳しくは プレースホルダの種類 を参照してください

パスの区切り文字

  • デフォルトでは、 / が使用されます

    • {RELPATH} と指定すると、 css/default.css のように、スラッシュで区切られます

  • 区切り文字を変更したい場合は、フォーマットの先頭に [/], [\], [OS] のいずれかを指定します

  • 例えば、 [\]{RELPATH} と指定すると、区切り文字が \ になります

    • [/] …区切り文字を / にします (デフォルト)

    • [\] …区切り文字を \ にします

    • [OS] …使用しているOSによって区切り文字が変わります。Windowsの場合は \ 、Linux/Macの場合は / になります

Snippet

  • Snippet の書式を使うことができます

  • 例えば、 <img src="{RELPATH}" alt="${1:alt}"> のようにフォーマットを定義しておくと、下図のようにSnippetが挿入されます(フォーマットの ${1:alt} の部分が選択されている状態になります)

    relpath_doc_007

プレースホルダの種類

  • {RELPATH} などのキーワードの部分に、実際の相対パスが挿入されます。

プレースホルダ

結果

備考

{RELPATH}

img/pic.png

HTMLなどで使われる、相対パスの表記です
{RELPATH_ROOT}
/img/pic.png
Rootからの相対パスになります。
ルートはVSCodeで開いているワークフォルダになります

{RELPATH_CURDIR}

./img/pic.png

カレントディレクトリを表す ./ が先頭に 入ります
{RELPATH_FROMFILE}
../img/pic.png
ファイル名からの相対パスになり、 /root/index.html から
/root/img/pic.png への相対パスは、 ../img/pic.png になります

{RELPATH_NOEXT}

img/pic

{RELPATH} の結果から、拡張子を取り除いたもの

{RELPATH_ROOT_NOEXT}

/img/pic

{RELPATH_ROOT} の結果から、拡張子を取り除いたもの

{RELPATH_CURDIR_NOEXT}

./img/pic

{RELPATH_CURDIR} の結果から、拡張子を取り除いたもの

{RELPATH_FROMFILE_NOEXT}

../img/pic

{RELPATH_FROMFILE} の結果から、拡張子を取り除いたもの

{FILENAME}

pic.png

ファイル名のみ

{FILENAME_SEP}

/pic.png

ファイル名の先頭に区切り文字が入ります

{FILENAME_NOEXT}

pic

{FILENAME} の結果から、拡張子を取り除いたもの

{FILENAME_SEP_NOEXT}

/pic

{FILENAME_SEP} の結果から、拡張子を取り除いたもの

Note

もし、何か不具合があった場合は、 Issues に報告してください。 バグなどの報告はこのページからのみ受け付けています。