CODEWITHSUNDEEP
typescripteslintsveltevite
Sri
Sri

Reputation: 271

Svelte+TS+Eslint project, eslint throws error: 'console' is not defined

I'm using the vite template for svelte-ts, with a few changes. Eslint is throwing an error: 'console' is not defined when I use console.log. Typescript does not complain about this though, it even picks up the correct types

How can I fix this?

code file: App.svelte

<div on:click={e => console.log(e)} />
<!--                   ^ -- error: 'console' is not defined. -->
<style>
    div {
        width: 50px;
        height: 50px;
    }
</style>

These are my config files:

.eslintrc.yml

extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - prettier
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaFeatures:
    impliedStrict: true
  sourceType: module
plugins:
  - svelte3
  - '@typescript-eslint'
overrides:
  - files:
      - '*.svelte'
    processor: 'svelte3/svelte3'
settings:
  svelte3/typescript: true
rules:
  '@typescript-eslint/explicit-module-boundary-types': 'off'
  '@typescript-eslint/no-non-null-assertion': 'off'
  '@typescript-eslint/no-explicit-any': 'off'
  no-void: 'off'

tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    /* Language and Environment */
    "target": "esnext",
    "lib": ["DOM", "DOM.Iterable", "esnext"],
    "jsx": "react-jsx",

    /* Modules */
    "module": "esnext",
    "moduleResolution": "node",

    /* JavaScript Support */
    "allowJs": true,
    "checkJs": true,

    /* Emit */
    "noEmit": true,

    /* Interop Constraints */
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    /* Type Checking */
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "allowUnusedLabels": true,
    "allowUnreachableCode": true,
    "exactOptionalPropertyTypes": false,
    "noFallthroughCasesInSwitch": false,
    "importsNotUsedAsValues": "error",

    /* Completeness */
    "skipLibCheck": false
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

svelte.config.js

import sveltePreprocess from 'svelte-preprocess';
export default {
  preprocess: sveltePreprocess(),
};

vite.config.ts

import { defineConfig } from 'vite';
import eslint from '@rollup/plugin-eslint';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  build: {
    rollupOptions: {
      input: process.cwd(),
    },
  },
  plugins: [
    {
      ...eslint({ throwOnError: true, include: ['src/**/*.{js,ts,svelte}'] }),
      enforce: 'pre',
    },
    svelte(),
  ],
});

Upvotes: 2

Views: 1638

Answers (1)

GOTO 0
GOTO 0

Reputation: 47741

Add this setting to your .eslintrc.yml:

env:
  shared-node-browser: true

The point is that vanilla JavaScript knows nothing about a built-in global object called console, which exists in browsers and in Node.js. The ESLint documentation also lists other options.

Upvotes: 3

Related Questions