Title rewritten as: Improving the beauty of ESLint loop errors
<p>I am creating a vue component</p>
<p>But I get the following error</p>
<pre class="brush:php;toolbar:false;">Type annotations can only be used in TypeScript files.</pre>
<p>If I remove the type clause, I get </p>
<pre class="brush:php;toolbar:false;">Missing return type on function.</pre>
<p>The component looks like: </p>
<pre class="brush:php;toolbar:false;"><template>
<pre>Market:{{ market }}</pre>
</template>
<script>
import Market from "./Market";
export default {
name: Market,
components: {},
data() { //<--- issue is reported here
return {
market: new Market(),
};
},
};
</script></pre>
<p>I guess I have a conflict in the prettier and eslints configurations, so one sees vue as TS compatible and the other doesn't</p>
<p>I've tried various tweaks and changes but so far no difference, so can someone point me to the correct configuration to fix this?</p>
<p>tsconfig.json</p>
<pre class="brush:php;toolbar:false;">{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}</pre>
<p>babel.config.js</p>
<pre class="brush:php;toolbar:false;">module.exports = {
presets: ["@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": "right",
"php-cs-fixer.executablePath": "${extensionPath}\php-cs-fixer.phar",
"launch": {
"configurations": [],
"compounds": []
},
"debug.javascript.usePreview": false,
"window.zoomLevel": 3,
"eslint.format.enable": true
}</pre>
<p>package.json</p>
<pre class="brush:php;toolbar:false;">{
"dependencies": {
"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": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}</pre>
<p><br /></p>
