다음과 같이 재작성된 제목: ESLint 루프 오류의 아름다움 개선

Question

vue 컴포넌트를 생성 중입니다

하지만 다음과 같은 오류가 발생합니다

유형 주석은 TypeScript 파일에서만 사용할 수 있습니다.

type 절을 제거하면

함수에 반환 유형이 누락되었습니다.

구성요소는 다음과 같습니다.

<템플릿>
    <사전>시장:{{ 시장 }}

<스크립트> "./Market"에서 시장을 가져옵니다. 기본값 내보내기 { 이름: 시장, 구성 요소: {}, data() { //<--- 문제가 여기에 보고됩니다. 반품 { 시장: 새로운 시장(), }; }, };

prettier와 eslints 구성에 충돌이 있는 것 같아서 한 쪽은 vue를 TS 호환으로 보고 다른 쪽은 그렇지 않다고 봅니다

다양한 조정과 변경을 시도했지만 지금까지 아무런 차이가 없습니다. 누구든지 이 문제를 해결하기 위해 올바른 구성을 알려줄 수 있습니까?

tsconfig.json

{
  "컴파일러 옵션": {
    "대상": "esnext",
    "모듈": "esnext",
    "엄격한": 사실,
    "jsx": "보존",
    "importHelpers": 사실,
    "moduleResolution": "노드",
    "experimentalDecorators": 사실,
    "skipLibCheck": 사실,
    "esModuleInterop": 사실,
    "allowSyntheticDefaultImports": 사실,
    "sourceMap": 사실,
    "baseUrl": ".",
    "유형": [
      "웹팩 환경"
    ],
    "경로": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "다음",
      "돔",
      "dom.iterable",
      "스크립트 호스트"
    ]
  },
  "포함하다": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "테스트/**/*.ts",
    "테스트/**/*.tsx"
  ],
  "제외": [
    "노드_모듈"
  ]
}

babel.config.js

module.exports = {
  사전 설정: ["@vue/cli-plugin-babel/preset"],
};

设置，json

{
    "editor.insertSpaces": 거짓,
    "editor.minimap.enabled": 거짓,
    "files.eol": "n",
    "workbench.sideBar.location": "오른쪽",
    "php-cs-fixer.executablePath": "${extensionPath}php-cs-fixer.phar",
    "시작하다": {
        "구성": [],
        "화합물": []
    },
    "debug.javascript.usePreview": 거짓,
    "window.zoom레벨": 3,
    "eslint.format.enable": 사실
}

package.json

{
  "종속성": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-class-컴포넌트": "^8.0.0-0"
  },
  "devDependency": {
    "@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-typescript": "~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",
    "에슬린트": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "더 예뻐요": "^2.2.1",
    "typescript": "~4.1.5"
  },
  "eslintConfig": {
    "루트": 사실,
    "환경": {
      "노드": 참
    },
    "확장": [
      "플러그인:vue/vue3-필수",
      "eslint:권장",
      "@vue/typescript/권장",
      "@vue/예뻐요",
      "@vue/prettier/@typescript-eslint"
    ],
    "파서 옵션": {
      "ecma버전": 2020
    },
    "규칙": {}
  },
  "브라우저 목록": [
    "> 1%",
    "최근 2개 버전",
    "죽지 않았다"
  ]
}

Answer 1

이전에 같은 문제가 발생하여 다음 코드로 해결했습니다.

으아악

이 방법이 효과가 있다면 알려주세요.