SFC ブロックの構成

<template>、<script>、<style> の配置やスタイルの範囲を確認し、SFC の構成をそろえるためのルールをまとめています。ブロックを追加したときや、外部ファイルの src、lang、カスタムブロックを見直すときに使います。

ブロック順の既定値では script と template のどちらを先にしてもよく、style はその後に置きます。lang に関する 3 件は規約の説明で、現在の SFC lint では固有の診断を出しません。各ルールの対応範囲を確認し、プロジェクトに必要なものを選んでください。

まずは SFC ブロックの並び順の例で違いを確かめてください。Vue ルールで設定方針を確認し、採用するルールを設定して vp run lint を実行します。

このページに、各ルールの目的・前提・設定と、省略のない悪い例・良い例をまとめています。変更箇所は行の色で示します。コードをコピーすると、ソースコード全体を取得できます。各例に現在の対応範囲も明記しています。

全ルール · ルールのオプション · ESLint 移行対応表 · プロジェクトの検査 · 子への属性の継承

vue/no-preprocessor-lang

CSS プリプロセッサーより標準の CSS を使う方針を示します。

悪い例 · 良い例

既定の重大度: warning
プリセット: nuxt, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-preprocessor-lang": "warn"
      }
    },
  },
});

vp run lint

悪い

style の lang に SCSS を指定しているため、プリプロセッサーを禁止するルールが記述されたブロックを報告します。

<template><p>Notice</p></template>
<style lang="scss">
.notice { color: red; }
</style>

良い

同じ宣言を、プリプロセッサーの lang を指定せずに通常の CSS で記述します。

<template><p>Notice</p></template>
<style>
.notice { color: red; }
</style>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vue/no-script-non-standard-lang

script の非標準の lang 指定を避ける方針を示します。

悪い例 · 良い例

既定の重大度: warning
プリセット: nuxt, opinionated
自動修正: SFC lint では未対応
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

現在の対応: no-sfc-finding

このカタログ項目は現在の SFC lint では固有の診断を出しません。悪い例・良い例は意図した規約の説明であり、実行時にこのルールの診断が出る例ではありません。ID を設定しても未対応の SFC 検査は追加されません。

設定できる ID（現在の SFC lint では診断されません）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-script-non-standard-lang": "warn"
      }
    },
  },
});

vp run lint

悪い

lang=coffee で CoffeeScript の構文を使っています。現在の SFC 検査では、この言語に対してこのルール固有の診断は出ません。

<script lang="coffee">
count = 0
</script>
<template><p>Notice</p></template>

良い

lang=ts と通常の TypeScript の宣言を使い、意図した言語の方針を示します。

<script lang="ts">
const count = 0;
</script>
<template><p>Notice</p></template>

良い例は意図する規約を示します。現在の SFC lint では、悪い例・良い例のどちらからもこのルール固有の診断は出ません。

実装 · 全ルール

vue/no-src-attribute

SFC ブロックの外部 src 指定を検出します。

悪い例 · 良い例

既定の重大度: warning
プリセット: nuxt, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-src-attribute": "warn"
      }
    },
  },
});

vp run lint

悪い

SFC の template、script、style を src の外部ファイルに分けています。

<template src="./template.html"></template>
<script src="./script.ts"></script>
<style src="./style.css"></style>

良い

各ブロックに内容を記述し、外部の src 属性を使いません。

<template>
  <p>Hello</p>
</template>

<script setup lang="ts">
const label = "Hello";
</script>

<style scoped>
p {
  color: red;
}
</style>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vue/no-template-lang

template の lang 指定を避ける方針を示します。

悪い例 · 良い例

既定の重大度: warning
プリセット: nuxt, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-template-lang": "warn"
      }
    },
  },
});

vp run lint

悪い

template の lang に Pug を指定しているため、HTML のみを許可するルールが記述されたブロックを報告します。

<template lang="pug">
p Notice
</template>

良い

lang を指定せず、通常の HTML の p を直接記述します。

<template>
<p>Notice</p>
</template>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vue/require-scoped-style

style に scoped を指定する方針を適用します。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/require-scoped-style": "warn"
      }
    },
  },
});

vp run lint

悪い

.button の style にスコープがなく、他のコンポーネントの一致する要素にも作用します。

<style>
.button {
  color: red;
}
</style>

良い

scoped を style に付け、同じセレクタと宣言に Vue のコンポーネントスコープを適用します。

<style scoped>
.button {
  color: red;
}
</style>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vue/sfc-element-order

SFC のトップレベルブロックを設定した順に並べます。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: 型付きオプションと既定値を参照してください。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/sfc-element-order": "warn"
      }
    },
  },
});

vp run lint

悪い

style が script より前にあり、設定した SFC ブロック順に合いません。

<style scoped>
.panel {
  color: red;
}
</style>
<script setup lang="ts">
const label = "Save";
</script>

良い

script → template → style の順に並べます。型付きオプションで別の順序を選べます。

<script setup lang="ts">
const label = "Save";
</script>

<template>
  <p>{{ label }}</p>
</template>

<style scoped>
p {
  color: red;
}
</style>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vue/single-style-block

SFC の style を一つのブロックにまとめます。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/single-style-block": "warn"
      }
    },
  },
});

vp run lint

悪い

panel と title の scoped スタイルを二つの style ブロックに分けています。

<style scoped>
.panel {
  color: red;
}
</style>

<style scoped>
.title {
  color: blue;
}
</style>

良い

両方のセレクタを一つの scoped style にまとめ、どちらのスタイルも残します。

<style scoped>
.panel {
  color: red;
}
.title {
  color: blue;
}
</style>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vue/warn-custom-block

SFC のカスタムブロックを検出します。

悪い例 · 良い例

既定の重大度: warning
プリセット: nuxt, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/warn-custom-block": "warn"
      }
    },
  },
});

vp run lint

悪い

SFC に <i18n> のカスタムブロックがあり、通常の template / script / style 処理とは別の連携が必要です。

<i18n>
{ "en": { "hello": "Hello" } }
</i18n>

<template>
  <p>{{ hello }}</p>
</template>

良い

標準の template と script setup を使います。移植性に関するこの任意の警告は、カスタムブロック全般が Vue で無効という意味ではありません。

<template>
  <p>{{ hello }}</p>
</template>

<script setup lang="ts">
const hello = "Hello";
</script>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール