I have a global extension that defines a method called 'is'. The issue that I'm having is ESLink flags it as "no-undef"; despite the fact that it is available at run-time.
Disabling the rule is not an option for me. I'd rather define it so that ESLint can see it.
My project is using NodeJS, Vue, TypeScript, Babel and WebPack. Not that it matters, but the typescript JavaScript version is set to esnext.
The following are my goals that I ask you to keep in mind:
// This is my 'is.ts' file; THIS IS NOT THE SAME AS A d.ts FILE
...
function is() { ... }
declare global {
function is(): boolean { ... }
}
// physically define on window giving my method global scope
const _LocalWindow: any = window;
_LocalWindow.is = _LocalWindow.is || is;
Elsewhere in my app
declare function is(): boolean; // <== ONLY WAY TO PREVENT ESLINT ERROR 'no-undef'
if (is()) { // <== I DON'T WANT TO USE 'window.is'
...
}
For reference, below are my package.json and jsconfig.json configuration files
// package.json
{
"name": "vuedatagriddemo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-class-component": "^7.2.2",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.5",
"vuetify": "^2.2.17",
"vuex": "^3.1.2"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.18.0",
"@typescript-eslint/parser": "^2.18.0",
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-plugin-router": "~4.2.0",
"@vue/cli-plugin-typescript": "~4.2.0",
"@vue/cli-plugin-vuex": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"@vue/eslint-config-typescript": "^5.0.1",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-vue": "^6.1.2",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"typescript": "~3.7.5",
"vue-template-compiler": "^2.6.11"
}
}
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": 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"
]
}
I couldn't get https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals working in my TypeScript project either, then disabled it after coming across recommended solution:
We strongly recommend that you do not use the no-undef lint rule on TypeScript projects. The checks it provides are already provided by TypeScript without the need for configuration - TypeScript just does this significantly better.
Source: https://github.com/typescript-eslint/typescript-eslint/blob/main/docs/linting/TROUBLESHOOTING.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With