我是第一次接触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无法识别的形式时,有什么办法可以解决这个问题吗?
2条答案
按热度按时间3pvhb19x1#
是的,我遇到了同样的问题,过了很长时间我终于解决了。如果你想把
prettier
集成到eslint
中,只需安装eslint-plugin-prettier
包,并在eslint配置文件中将其作为一个插件。并且必须安装
svelte-for-vscode
,则不再需要rules
文件中的prettier/prettier
。此外,在运行
eslint --fix
之后,您还可以继续运行prettier --write
以使用prettier
化代码。希望这个答案能对你和其他人有所帮助。
hk8txs482#
我知道答案已经很晚了,但这里是给其他像我一样仍然困在这个问题上的人的:
问题是eslint-plugin-svelte 3和prettier看起来不兼容,把eslint-plugin-svelte 3换成svelte-eslint-parser,按照自述文件中推荐的 typescript 设置,这对我来说很管用。