Svelte+TS+Eslint 项目，eslint 抛出错误：'console' is not defined答案

【问题标题】：Svelte+TS+Eslint project, eslint throws error: 'console' is not definedSvelte+TS+Eslint 项目，eslint 抛出错误：'console' is not defined
【发布时间】：2022-01-11 13:10:15
【问题描述】：

我正在使用 svelte-ts 的 vite 模板，并进行了一些更改。当我使用 console.log 时，Eslint 抛出错误：'console' is not defined。 Typescript 并没有抱怨这一点，它甚至可以选择正确的类型

我该如何解决这个问题？

代码文件： App.svelte

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

这些是我的配置文件：

.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(),
  ],
});

【问题讨论】：

标签： typescript eslint svelte vite

【解决方案1】：

将此设置添加到您的 .eslintrc.yml：

env:
  shared-node-browser: true

关键在于，原生 JavaScript 对名为 console 的内置全局对象一无所知，该对象存在于浏览器和 Node.js 中。 ESLint 文档还列出了other options。

【讨论】：