将Svelte、TypeScrip、ESLint、&amp；更漂亮地放在一起时出错 [英] Errors with Svelte, TypeScript, ESLint, & Prettier Together

问题描述

我是Svelte的新手，但到目前为止我还很喜欢它。我已经用Svelte&；TypeScrip编写了一个简单的tic-tac-toe应用程序来练习它，现在我正在添加我喜欢的工具。我通常使用eslint/更漂亮的组合设置，依靠eslint-plugin-更漂亮的将两者结合在一起。然而，对于Svelte来说，这是行不通的。

澄清一下，ESLint本身工作得很好。更漂亮的产品本身就很好用。然而，当我将它们结合在一起时，问题就出现了。

打字稿

所有这些方案都使用此类型脚本配置：

{
  "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运行更漂亮单机版的方法：

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和amp；更漂亮

我更漂亮的配置保持不变，以下是修改后的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>

结论

据我所知，当SPECTER解析内容时，它的格式是SPEYER无法识别的。我想知道是否有办法解决这个问题？

提前谢谢您。

推荐答案

我知道答案晚了，但这里是针对像我这样仍然被这个问题困住的其他人：

问题是eslint-plugin-svelte3和更美似乎不兼容。 放弃eslint-plugin-svelte3而使用svelte-eslint-parser，并遵循自述文件中推荐的打字脚本设置，这对我来说是成功的方法。

这篇关于将Svelte、TypeScrip、ESLint、&amp；更漂亮地放在一起时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！