Svelte、TypeScript、ESLint 和 Prettier 一起出现的错误答案

【问题标题】：Errors with Svelte, TypeScript, ESLint, & Prettier TogetherSvelte、TypeScript、ESLint 和 Prettier 一起出现的错误
【发布时间】：2021-10-08 21:30:07
【问题描述】：

我是 Svelte 的新手，但到目前为止我很喜欢它。我已经使用 Svelte 和 TypeScript 编写了一个简单的井字游戏应用程序来练习它，现在我正在添加我喜欢的工具。我通常使用组合的 eslint/prettier 设置，依靠 eslint-plugin-prettier 将两者结合在一起。但是，对于 Svelte，这行不通。

澄清一下，ESLint 本身就可以正常工作。 Prettier 本身就可以正常工作。但是，当我将它们结合起来时，问题就出现了。

TypeScript

所有这些场景都使用这个 TypeScript 配置：

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

独立 ESLint

这是我的.eslintrc.js，用于独立运行 eslint：

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking'
    ],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
        tsconfigRootDir: __dirname,
        project: ['./tsconfig.json'],
        extraFileExtensions: ['.svelte']
    },
    env: {
        es6: true,
        browser: true
    },
    overrides: [
        {
            files: ['*.svelte'],
            processor: 'svelte3/svelte3'
        }
    ],
    settings: {
        'svelte3/typescript': require('typescript'),
        // ignore style tags in Svelte because of Tailwind CSS
        // See https://github.com/sveltejs/eslint-plugin-svelte3/issues/70
        'svelte3/ignore-styles': () => true
    },
    plugins: ['svelte3', '@typescript-eslint'],
    ignorePatterns: ['node_modules']
};

我用eslint --fix './src/**/*.{js,ts,svelte}' 运行它，它运行良好。

独立更漂亮

这是我的.prettierrc.js，用于独立运行 Prettier：

module.exports = {
    arrowParens: 'always',
    singleQuote: true,
    printWidth: 90,
    plugins: ['prettier-plugin-svelte'],
    semi: true,
    svelteSortOrder: 'options-styles-scripts-markup',
    svelteStrictMode: false,
    svelteBracketNewLine: true,
    svelteIndentScriptAndStyle: true,
    trailingComma: 'none',
    tabWidth: 4,
    useTabs: true,
    jsxBracketSameLine: false,
    quoteProps: 'as-needed',
    bracketSpacing: true,
    endOfLine: 'lf'
}

我用prettier --write ./src 运行它，它运行良好。

结合了 ESLint 和 Prettier

我的 Prettier 配置保持不变，这里是修改后的 ESLint 配置：

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking',
        'plugin:prettier/recommended'
    ],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
        tsconfigRootDir: __dirname,
        project: ['./tsconfig.json'],
        extraFileExtensions: ['.svelte']
    },
    env: {
        es6: true,
        browser: true
    },
    overrides: [
        {
            files: ['*.svelte'],
            processor: 'svelte3/svelte3'
        }
    ],
    settings: {
        'svelte3/typescript': require('typescript'),
        // ignore style tags in Svelte because of Tailwind CSS
        // See https://github.com/sveltejs/eslint-plugin-svelte3/issues/70
        'svelte3/ignore-styles': () => true
    },
    plugins: ['svelte3', '@typescript-eslint'],
    ignorePatterns: ['node_modules'],
    rules: {
        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
    }
};

我使用eslint --fix './src/**/*.{js,ts,svelte}' 运行它，但它失败并出现以下错误：

  2 | import Stats from "./components/Stats.svelte";
  3 |
> 4 | {Board,Stats;}
    |            ^

错误来自 Svelte 组件及其中的导入语句。下面是 Svelte 组件中那几行的样子。您会注意到上面的第 4 行实际上并不存在于我的源代码中：

<script lang="ts">
    import Board from "./components/Board.svelte";
    import Stats from "./components/Stats.svelte";
</script>

结论

据我所知，当 prettier 解析出 prettier 无法识别的形式的内容时。我想知道有没有办法解决这个问题？

非常感谢您。

【问题讨论】：

没有帮助评论：我只是放弃 eslint。我总觉得 ts 和 prettier 之间不协调。请问，你喜欢 eslint 的哪些特殊功能，但 ts/prettier 没有涵盖？

标签： typescript eslint svelte prettier

【解决方案1】：

是的，我遇到了同样的问题，经过很长时间我终于解决了。如果你想将prettier 集成到eslint 中，只需安装包eslint-plugin-prettier，并在 eslint 配置文件中将其作为插件。

module.exports = {
   plugins: [ 'prettier'],
}

你必须安装svelte-for-vscode，然后prettier/prettier 不再需要rules 归档。

另外，运行eslint --fix后，还可以继续运行prettier --write，使用prettier格式化代码。

希望这个答案能给你和其他人一些帮助。

【讨论】：

【解决方案2】：

我知道答案已经晚了，但这里是为像我这样仍然被困在这个问题上的其他人：

问题是 eslint-plugin-svelte3 和 prettier 似乎不兼容。为svelte-eslint-parser 放弃 eslint-plugin-svelte3 并遵循自述文件中推荐的 typescript 设置对我来说是诀窍。

【讨论】：