I've encountered a linting issue and I need some guidance on how to resolve it. Here's the scenario - when running
$ yarn lint -v
yarn run v1.22.4
$ eslint . -v
v6.8.0
With plugins vue and @typescript-eslint, I have the following code in a .ts file :
import Vue, { VNode } from 'vue';
export default Vue.extend ({
render(createElement): VNode {
return createElement('div',
{},
'Simple reproducible example'
);
}
});
The error message reads :
error in ./src/components/Demo.ts
Module Error (from ./node_modules/eslint-loader/index.js):
/full/path/to/src/components/Demo.ts
1:15 error 'VNode' is defined but never used no-unused-vars
Additionally, while serving the web app using yarn serve (vue-cli), the same error is displayed making it impossible to ignore. Removing the import statement for typehint does not solve the problem as evident by this new error :
ERROR in /full/path/to/src/components/Demo.ts(302,26):
4:26 Cannot find name 'VNode'.
2 |
3 | export default Vue.extend ({
> 4 | render(createElement): VNode {
| ^
5 | return createElement('div',
6 | {},
7 | 'Simple reproducible example'
In order to avoid the previous issue, I removed the import which allows me to navigate the web app served by yarn serve. Any suggestions on how to properly address this error?
EDIT : .eslintrc.js file content
module.exports = {
'env': {
'browser': true,
'es6': true,
'node': true
},
'extends': [
'eslint:recommended',
'plugin:vue/essential',
'plugin:@typescript-eslint/eslint-recommended'
],
'globals': {
'Atomics': 'readonly',
'SharedArrayBuffer': 'readonly'
},
'parserOptions': {
'ecmaVersion': 2018,
'parser': '@typescript-eslint/parser',
'sourceType': 'module'
},
'plugins': [
'vue',
'@typescript-eslint'
],
'rules': {
'indent': [
'error',
2
],
'linebreak-style': [
'error',
'unix'
],
'quotes': [
'error',
'single'
],
'semi': [
'error',
'always'
]
}
};