CODEWITHSUNDEEP
eslintwebpack-dev-servertypescript-typingstypescript-eslint
RashadRivera
RashadRivera

Reputation: 843

ESLint: Defined global extensions still not defined (no-undef)

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:

  1. There are no other compilation or run-time errors besides this ESLint error
  2. If I declare my method at the top of each file using it, everything works fine
  3. I expect that there is a centralized, simple way of defining it for ESLint
  4. I'm not using a type definition file (AKA d.ts), because you cannot define it this way
// 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"
  ]
}

Upvotes: 10

Views: 12675

Answers (5)

lcsd
lcsd

Reputation: 11

Just as @Leo pointed out BUT the rules clause should be like:

rules: {
  'no-undef': 1, //>Severity: 0 = off, 1 = warn, 2 = error
  'no-unused-vars': 'error',
  'semi': 'error',
  },

Upvotes: 0

xxiaozhi
xxiaozhi

Reputation: 1

try globals in .eslintrc:

{
  //other settings...
  "globals":{
    "is": "readonly"
  }
}

Upvotes: 0

Leo
Leo

Reputation: 10833

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

Upvotes: 14

Pedro Silva
Pedro Silva

Reputation: 2815

Just like @Leo pointed out, you can simply remove the no-undef in your eslint file as suggested by eslint FAQ

-> eslintrc.js or eslintrc.json

{
  ... your configs
  overrides: [
        {
            files: ["*.ts"],
            rules: {
                "no-undef": "off"
            }
        }
    ]
}

Upvotes: 6

Snowden
Snowden

Reputation: 1

.eslintrc

{
  "rules": [
    ...,
    "react/jsx-no-undef": [2, { "typeof": true }],
    "no-undef": [2, { "typeof": true }],
    ...
  ]
}

Upvotes: -1

Related Questions