苗条、TypeScript、ESLint和漂亮一起出现的错误

4nkexdtk  于 2023-01-10  发布在  TypeScript
关注(0)|答案(2)|浏览(157)

我是第一次接触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无法识别的形式时,有什么办法可以解决这个问题吗?

3pvhb19x

3pvhb19x1#

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

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

并且必须安装svelte-for-vscode,则不再需要rules文件中的prettier/prettier
此外,在运行eslint --fix之后,您还可以继续运行prettier --write以使用prettier化代码。
希望这个答案能对你和其他人有所帮助。

hk8txs48

hk8txs482#

我知道答案已经很晚了,但这里是给其他像我一样仍然困在这个问题上的人的:
问题是eslint-plugin-svelte 3和prettier看起来不兼容,把eslint-plugin-svelte 3换成svelte-eslint-parser,按照自述文件中推荐的 typescript 设置,这对我来说很管用。

相关问题