我是第一次接触Svelte，但到目前为止我很喜欢它。我已经用Svelte和TypeScript编写了一个简单的井字游戏应用程序来练习，现在我正在添加我喜欢的工具。我通常使用一个组合的eslint/prettier设置，依靠eslint-plugin-prettier将两者结合在一起。然而，对于Svelte来说，这并不起作用。
澄清一下，eslint本身工作得很好。pretier本身工作得很好。然而，当我把它们结合起来的时候，问题就出现了。

• • 类型脚本**

所有这些方案都使用此TypeScript配置：

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

• • 独立ESLint**

下面是运行eslint单机版的.eslintrc.js：

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组件和其中的import语句。下面是Svelte组件中的几行代码。你会注意到上面的第4行代码实际上并不存在于我的源代码中。

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

• • 结论**

据我所知，当pretetier解析出的内容是pretetier无法识别的形式时，有什么办法可以解决这个问题吗？