Vue 组件在 VsCodium 上没有显示错误或警告

Question

我的组件有无效/未定义的道具“selectedColumns”，我的 Vscodium 没有显示错误。如果我在那里输入任何垃圾，它仍然没有显示错误或警告。看起来 linting 问题或 vscodium 工作区缺少一些设置。 但我不确定真正的原因。

注意：我确信 Prettier 和 eslintvue/no-parsing-error 可以正常工作。

Vue 组件：

<template>
  <div class="w-full">
    <div>
      <h1>Header</h1>

      <!-- ColToggle -->
      <div v-if="colToggle">
        <MultiSelect
          :modelValue="selectedColumns"
          :options="columns"
          optionLabel="header"
          @update:modelValue="onToggle"
          placeholder="Select Columns"
        />
      </div>
    </div>

    <DataTable
      :value="customers.data"
      responsiveLayout="scroll"
      showGridlines
      :paginator="pagination"
      :rows="rows"
      :rowsPerPageOptions="[10, 20, 50]"
    >
      <Column
        v-for="col of columns"
        :field="col.field"
        :header="col.header"
        :key="col.field"
        :sortable="col.sortable"
      ></Column>
    </DataTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue"
import DataTable from "primevue/datatable"
import Column from "primevue/column"
import ColumnGroup from "primevue/columngroup"

// TestData
import customers from "@/assets/json/data.json"

interface ColumnField {
  /**
   * Set the field/value for the column
   */
  field: string
  /**
   * Set the header for the column
   */
  header: string
  /**
   * If columns is sortable
   */
  sortable?: string
}

export default defineComponent({
  name: "GridTable",
  component: { DataTable, Column, ColumnGroup },
  data() {
    return {
      customers,
    }
  },
  props: {
    colToggle: {
      type: Boolean,
      required: false,
      default: true,
    },
    pagination: {
      type: Boolean,
      required: false,
      default: true,
    },
    rows: {
      type: Number,
      required: false,
      default: 10,
    },
    rowsPerPageOptions: {
      type: Array,
      required: false,
      default() {
        return [10, 20, 50]
      },
    },
    columns: {
      type: Array as PropType<ColumnField[]>,
      required: true,
    },
    filter: {
      type: Object,
      required: false,
    },
  },
})
</script>

json 包：

{
  "name": "Basic Project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest",
    "test:verbose": "jest --verbose",
    "test:unit": "vue-cli-service test:unit",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "axios": "^0.21.4",
    "core-js": "^3.6.5",
    "primeflex": "^3.0.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.7.1",
    "vue": "^3.0.0",
    "vue-i18n": "^9.1.7",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0",
    "vuex-persistedstate": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@storybook/addon-a11y": "^6.3.1",
    "@storybook/addon-actions": "^6.3.1",
    "@storybook/addon-essentials": "^6.3.1",
    "@storybook/addon-links": "^6.3.1",
    "@storybook/vue3": "^6.3.1",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "babel-loader": "^8.2.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.14.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "ts-jest": "^26.5.4",
    "typescript": "~4.1.5",
    "vue-jest": "^5.0.0-0",
    "vue-loader": "^16.2.0"
  }
}

.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    semi: ["error", "never"],
    quotes: ["error", "double"],
    "no-unused-vars": "off",
    "no-undef-init": "off",
    "no-use-before-define": "off",
    "no-undef": ["off"],
    "no-nested-ternary": ["warn"],
    "no-shadow": ["warn"],
    "implicit-arrow-linebreak": 0,
    "import/no-unresolved": 0,
    "import/extensions": 0,
    "@typescript-eslint/no-unused-vars": ["error"],
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
        "**/src/**/*.spec.[jt]s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
}

EDIT-1

即使在创建一个普通/基本的 Vue3 打字稿项目之后，当我传递一个未定义的道具时，VsCodium 中也没有显示错误。

Answer 1

这些改变应该是-

Settings.json

"i18n-ally.keystyle": "nested",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "vetur.validation.templateProps": true,
  "vetur.experimental.templateInterpolationService": true

这两个包都必须有这些版本。

"eslint": "^6.8.0",
"eslint-plugin-vue": "^7.18.0",

我无法定义它突然发生的真正原因，但这就是我现在的解决方案。