Vize

タイプとスクリプトのルール

型ルールは、セマンティック情報が必要な場合に TypeScript チェッカーを使用します。ヴィゼも同じだ TypeScript が tsconfig.json から読み取るプロジェクト形状なので、共有アンビエント名はそこから取得する必要があります compilerOptions.types、プロジェクト参照、または宣言ファイル。

スクリプト ルールは、Composition API および Vapor 指向のコードの Patina ルールです。彼らはパターンに焦点を当てています 効率的にコンパイルするのが難しい、または Vapor モードで推論するのが難しいものです。

型を認識したリンティングはオプトインです。 linter.typeAware: truevize lint --type-aware、または type/* ルールを明示的に有効にすることによって。 type/no-reactivity-loss は次のコマンドで直接有効にできます vize lint --strict-reactivity。 Corsa を起動できない場合、Patina は type/corsa-runtime を報告し、 構成されたルールをサイレントに削除するのではなく、チェッカーによってバックアップされたルール パスをスキップします。

--type-aware は、vize check と同じ Corsa 実行可能解像度を使用します。構成する プロジェクトで明示的な tsgo または Corsa バイナリが必要な場合は、typeChecker.corsaPath。デフォルトのまま ゼロコスト: Patina は、フラグが設定されていない限り、チェッカーに裏付けられた lint について SFC を解析したり、Corsa を開始したりしません。 linter.typeAware、または明示的に有効化された type/* ルールがオプトインされます。

export default defineConfig({
  linter: { typeAware: true },
});

type/require-typed-props

ランタイム配列宣言を使用する代わりに、defineProps を入力する必要があります。

デフォルトの重大度: warning プリセット: happy-pathnuxtopinionated

悪い:

<script setup lang="ts">
const props = defineProps(["label", "count"]);
</script>

良い:

<script setup lang="ts">
const props = defineProps<{
  label: string;
  count: number;
}>();
</script>

type/require-typed-emits

発行されたイベント ペイロードを記述するには、defineEmits が必要です。

デフォルトの重大度: warning プリセット: happy-pathnuxtopinionated

悪い:

<script setup lang="ts">
const emit = defineEmits(["save"]);

emit("save", form.value);
</script>

良い:

<script setup lang="ts">
const emit = defineEmits<{
  save: [payload: FormValue];
}>();

emit("save", form.value);
</script>

type/no-unsafe-template-binding

any などの安全でない値に解決されるテンプレート バインディングを報告します。ルールはチェッカーバックされており、 したがって、インポートされたタイプとプロジェクト構成に従います。

デフォルトの重大度: warning プリセット: nuxtopinionated

悪い:

<script setup lang="ts">
const payload: any = await loadPayload();
</script>

<template>
  <p>{{ payload.title }}</p>
</template>

良い:

<script setup lang="ts">
type Payload = { title: string };

const payload = await loadPayload<Payload>();
</script>

<template>
  <p>{{ payload.title }}</p>
</template>

type/no-floating-promises

作成されたものの、待機、返され、または意図的に処理されていない Promise をレポートします。 このチェックは、<script> とテンプレート式の両方を対象としています。

デフォルトの重大度: warning プリセット: nuxtopinionated

悪い:

<script setup lang="ts">
function submit() {
  saveForm(form.value);
}
</script>

<template>
  <button @click="saveForm(form)">Save</button>
  <p>{{ loadPreview() }}</p>
</template>

良い:

<script setup lang="ts">
type Preview = { title: string };

async function submit() {
  await saveForm(form.value);
}

const preview = ref<Preview | null>(null);

async function loadPreviewIntoState() {
  preview.value = await loadPreview();
}
</script>

<template>
  <button @click="void submit()">Save</button>
  <button @click="void loadPreviewIntoState()">Preview</button>
  <PreviewPanel v-if="preview" :preview="preview" />
</template>

type/no-reactivity-loss

フロー全体で使用されるリアクティブ値のプレーンなスナップショットをレポートします。このルールは次の場合にも実行されます。 vize lint --strict-reactivity が有効になります。

デフォルトの重大度: warning プリセット: nuxtopinionated

悪い:

<script setup lang="ts">
const props = defineProps<{ item: { name: string } }>();
const item = props.item;
</script>

良い:

<script setup lang="ts">
const props = defineProps<{ item: { name: string } }>();
const item = toRef(props, "item");
</script>

チェッカーの構成

タイプ認識ルールでは、TypeScript 名用の別個の Vize globals フィールドは必要ありません。好む TypeScript ネイティブの構成:

悪い:

export default {
  globals: ["definePageMeta", "process"],
};

良い:

{
  "compilerOptions": {
    "types": ["node", "nuxt/app"]
  }
}

script/no-options-api

Vapor 指向のプリセットのレポート オプション API コンポーネント定義。

デフォルトの重大度: error プリセット: nuxtopinionated

悪い:

<script lang="ts">
export default {
  data() {
    return { count: 0 };
  },
};
</script>

良い:

<script setup lang="ts" vapor>
const count = ref(0);
</script>

script/no-next-tick

Vapor 指向のコンポーネントで nextTick() を報告します。直接参照、ライフサイクルフック、または状態を優先します 次の DOM フラッシュに依存しないフロー。

デフォルトの重大度: error プリセット: nuxtopinionated

悪い:

<script setup lang="ts" vapor>
await nextTick();
input.value?.focus();
</script>

良い:

<script setup lang="ts" vapor>
const input = useTemplateRef<HTMLInputElement>("input");

onMounted(() => {
  input.value?.focus();
});
</script>

script/no-get-current-instance

Vapor 指向のコンポーネントで getCurrentInstance() を報告します。実行時の内部構造にまで影響を及ぼします。 Vapor を安全に最適化することはできません。

デフォルトの重大度: error プリセット: nuxtopinionated

悪い:

<script setup lang="ts" vapor>
const instance = getCurrentInstance();
const app = instance?.appContext.app;
</script>

良い:

<script setup lang="ts" vapor>
const appConfig = useAppConfig();
</script>