[英]Errors with Svelte, TypeScript, ESLint, & Prettier Together
I'm new to Svelte, but I'm liking it so far.我是 Svelte 的新手,但到目前为止我很喜欢它。 I've written a simple tic-tac-toe app using Svelte & TypeScript to practice with it, and now I'm adding the tooling that I prefer.
我已经使用 Svelte & TypeScript 编写了一个简单的井字游戏应用程序来练习它,现在我正在添加我喜欢的工具。 I normally use a combined eslint/prettier setup, relying on the eslint-plugin-prettier to marry the two together.
我通常使用组合的 eslint/prettier 设置,依靠 eslint-plugin-prettier 将两者结合在一起。 However, for Svelte, this is not working.
但是,对于 Svelte,这是行不通的。
To clarify, ESLint works fine on its own.需要澄清的是,ESLint 本身就可以正常工作。 Prettier works fine on its own.
Prettier 本身就可以很好地工作。 However, when I combine them is when the problem arrises.
但是,当我将它们结合起来时,问题就来了。
TypeScript TypeScript
All of these scenarios use this TypeScript config:所有这些场景都使用这个 TypeScript 配置:
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"strict": true
},
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}
Standalone ESLint独立的 ESLint
Here is my .eslintrc.js
for running eslint standalone:这是我的
.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']
};
I run it with eslint --fix './src/**/*.{js,ts,svelte}'
and it works perfectly.我用
eslint --fix './src/**/*.{js,ts,svelte}'
运行它,它运行良好。
Standalone Prettier独立更漂亮
Here is my .prettierrc.js
for running Prettier standalone:这是我的
.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'
}
I run it with prettier --write./src
and it works perfectly.我用
prettier --write./src
运行它,它运行得很好。
Combined ESLint & Prettier结合 ESLint 和 Prettier
My Prettier config remains the same, here is the modified ESLint config:我的 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 }],
}
};
I run it with eslint --fix './src/**/*.{js,ts,svelte}'
and it fails with this error:我用
eslint --fix './src/**/*.{js,ts,svelte}'
运行它,它失败并出现此错误:
2 | import Stats from "./components/Stats.svelte";
3 |
> 4 | {Board,Stats;}
| ^
The error is coming from a Svelte component and the import statements in it.该错误来自 Svelte 组件及其中的导入语句。 Here is what those few lines in the Svelte component looks like.
下面是 Svelte 组件中的那几行代码。 You'll notice that line 4 above doesn't actually exist in my source code:
您会注意到上面的第 4 行实际上并不存在于我的源代码中:
<script lang="ts">
import Board from "./components/Board.svelte";
import Stats from "./components/Stats.svelte";
</script>
Conclusion结论
As best I can tell, by the time prettier parses the content it's in a form prettier cannot recognize.据我所知,当 prettier 解析内容时,它的形式是 prettier 无法识别的。 Is there a way to resolve this issue?
有没有办法解决这个问题?
Yeah, I encounter the same problem, and after a long time I finally make it out.是的,我也遇到了同样的问题,折腾了好久终于搞定了。 if you want to integrate
prettier
into eslint
, just install package eslint-plugin-prettier
, and make it a plugin in eslint config file.如果你想将
prettier
集成到eslint
中,只需安装 package eslint-plugin-prettier
,并使其成为 eslint 配置文件中的插件。
module.exports = {
plugins: [ 'prettier'],
}
And you must have svelte-for-vscode
installed, then prettier/prettier
in rules
filed is no longer required.并且您必须安装
svelte-for-vscode
,然后不再需要 prettier prettier/prettier
prettier in rules
filed。
Besides, after runing eslint --fix
, you can also continue to run prettier --write
to format the code using prettier
.此外,在运行
eslint --fix
之后,您还可以继续运行prettier --write
--write 来使用prettier
格式化代码。
Hope this answer will make some help to you and others.希望这个回答能对您和其他人有所帮助。
I know the answer is late, but here it is for others that are still stuck on this problem like me:我知道答案来晚了,但这里是为像我这样仍然困在这个问题上的其他人准备的:
The problem is that the eslint-plugin-svelte3 and prettier seem to be incompatible.问题是 eslint-plugin-svelte3 和 prettier 似乎不兼容。 Ditching eslint-plugin-svelte3 for the svelte-eslint-parser and following the recommended typescript setup from the readme is what did the trick for me.
为svelte-eslint-parser放弃 eslint-plugin-svelte3 并遵循自述文件中推荐的 typescript 设置对我来说是个窍门。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.