1π
β
For the meanwhile, Iβve removed lang="ts"
from my <script>
tag in the .vue component file
1π
I think the issue is on the line :
const canvas = <HTMLCanvasElement> document.getElementById('myChart');
because of the case, you can use the as syntax to avoid the lint issue
const canvas = document.getElementById('myChart') as HTMLCanvasElement;
If you still have an issue check you .eslint.*, mine is like this:
module.exports = {
root: true,
env: {
node: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
},
plugins: ['vue','typescript'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:vue/essential',
'@vue/typescript',
],
}
-1π
eslintrc:
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'prettier/prettier': [
'warn',
{
printWidth: 140,
jsxBracketSameLine: true,
singleQuote: true,
'no-multiple-empty-lines': ['error', { max: 2 }]
}
]
},
parserOptions: {
parser: 'typescript-eslint-parser'
}
};
-1π
tsconfig:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jquery"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Source:stackexchange.com