Titel umgeschrieben als: Verbesserung der Schönheit von ESLint-Schleifenfehlern
<p>Ich erstelle eine Vue-Komponente</p>
<p>Aber ich erhalte die folgende Fehlermeldung</p>
<pre class="brush:php;toolbar:false;">Typanmerkungen können nur in TypeScript-Dateien verwendet werden.</pre>
<p>Wenn ich die Typklausel entferne, erhalte ich </p>
<pre class="brush:php;toolbar:false;">Fehlender Rückgabetyp für Funktion.</pre>
<p>Die Komponente sieht so aus: </p>
<pre class="brush:php;toolbar:false;"><template>
<pre>Market:{{ market }}</pre>
</template>
<script>
Importieren Sie den Markt aus „./Market“;
Standard exportieren {
Name: Markt,
Komponenten: {},
data() { //<--- Problem wird hier gemeldet
zurückkehren {
Markt: neuer Markt(),
};
},
};
</script></pre>
<p>Ich schätze, ich habe einen Konflikt in den Prettier- und Eslints-Konfigurationen, also sieht der eine Vue als TS-kompatibel an und der andere nicht</p>
<p>Ich habe verschiedene Optimierungen und Änderungen ausprobiert, aber bisher keinen Unterschied. Kann mir also jemand die richtige Konfiguration nennen, um das Problem zu beheben?</p>
<p>tsconfig.json</p>
<pre class="brush:php;toolbar:false;">{
„compilerOptions“: {
„target“: „esnext“,
„module“: „esnext“,
„streng“: wahr,
„jsx“: „bewahren“,
„importHelpers“: wahr,
„moduleResolution“: „node“,
„experimentalDecorators“: wahr,
„skipLibCheck“: wahr,
„esModuleInterop“: true,
„allowSyntheticDefaultImports“: true,
„sourceMap“: wahr,
„baseUrl“: „.“,
"Typen": [
„webpack-env“
],
"Pfade": {
"@/*": [
„src/*“
]
},
"lib": [
„esnext“,
„dom“,
„dom.iterable“,
"Script host"
]
},
"enthalten": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
„ausschließen“: [
„node_modules“
]
}</pre>
<p>babel.config.js</p>
<pre class="brush:php;toolbar:false;">module.exports = {
Voreinstellungen: ["@vue/cli-plugin-babel/preset"],
};</pre>
<p>设置,json</p>
<pre class="brush:php;toolbar:false;">{
„editor.insertSpaces“: false,
„editor.minimap.enabled“: false,
„files.eol“: „n“,
„workbench.sideBar.location“: „rechts“,
„php-cs-fixer.executablePath“: „${extensionPath}php-cs-fixer.phar“,
"Start": {
"Konfigurationen": [],
„Verbindungen“: []
},
„debug.javascript.usePreview“: false,
"window.zoomLevel": 3,
„eslint.format.enable“: wahr
}</pre>
<p>package.json</p>
<pre class="brush:php;toolbar:false;">{
"Abhängigkeiten": {
„core-js“: „^3.6.5“,
"vue": "^3.0.0",
„vue-class-component“: „^8.0.0-0“
},
„devDependencies“: {
„@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“,
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
„eslint-plugin-vue“: „^7.0.0“,
"prettier": "^2.2.1",
„typescript“: „~4.1.5“
},
"eslintConfig": {
„root“: wahr,
„env“: {
„Knoten“: wahr
},
"erweitert": [
„plugin:vue/vue3-essential“,
„eslint:empfohlen“,
„@vue/typescript/recommended“,
„@vue/prettier“,
„@vue/prettier/@typescript-eslint“
],
"parserOptions": {
„ecmaVersion“: 2020
},
"Regeln": {}
},
"Browserliste": [
„> 1 %“,
„letzte 2 Versionen“,
"nicht tot"
]
}</pre>
<p><br /></p>