英文:
The code formatted by Prettier is being flagged as non-compliant
问题
我使用 ESLint 和 Prettier 自动格式化 TypeScript 代码，但格式化后的代码仍然被标记为不符合 Prettier 的规则。
我的 eslint 配置：
module.exports = {
root: true,
env: { browser: true, es2020: true },
settings: {
'import/resolver': {
'typescript': {}
}
},
extends: [
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: true,
tsconfigRootDir: __dirname,
},
plugins: ['react-refresh', 'prettier'],
rules: {
'max-len': ['error', { code: 120 }],
'prettier/prettier': [
'error',
{
printWidth: 120,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true,
quoteProps: 'as-needed',
jsxSingleQuote: false,
trailingComma: 'all',
bracketSpacing: true,
bracketSameLine: false,
jsxBracketSameLine: false,
arrowParens: 'avoid',
requirePragma: false,
insertPragma: false,
proseWrap: 'preserve',
htmlWhitespaceSensitivity: 'ignore',
endOfLine: 'lf',
singleAttributePerLine: true,
}
],
'no-confusing-arrow': 'off',
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off',
},
}
我的一个代码示例是：
type BasicDataStructureType = 'Integer' | 'Float' | 'Double' | 'Enumeration' | 'Boolean' | 'Array' | 'Struct'
Prettier 将其格式化为：
type BasicDataStructureType =
| 'Integer'
| 'Float'
| 'Double'
| 'Enumeration'
| 'Boolean'
| 'Array'
| 'Struct'
格式化后的代码被标记为：将 ⏎ | 'Integer'⏎ | 'Float'⏎ | 'Double'⏎ | 'Enumeration'⏎ | 'Boolean'⏎ | 'Array'⏎ 替换为 | 'Integer' | 'Float' | 'Double' | 'Enumeration' | 'Boolean' | 'Array'
另一个格式化后不符合规则的代码是：
const Api = {
getDataStructureVersions: (param: { name: string; namespaceId: number }) =>
request({ url: `/struct/version/list?${queryString.stringify(param)}`, method: 'GET' }),
}
它被标记为：删除 ⏎
我的 eslint 或 prettier 配置是否正确？有人可以帮助我解决这个问题吗？否则，我将不得不移除 Prettier。
英文:
I use ESLint and Prettier to automatically format TypeScript code, but the formatted code is still being flagged as not compliant with Prettier's rules.
My eslint config:
module.exports = {
root: true,
env: { browser: true, es2020: true },
settings: {
'import/resolver': {
'typescript': {}
}
},
extends: [
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: true,
tsconfigRootDir: __dirname,
},
plugins: ['react-refresh', 'prettier'],
rules: {
'max-len': ['error', { code: 120 }],
'prettier/prettier': [
'error',
{
printWidth: 120,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true,
quoteProps: 'as-needed',
jsxSingleQuote: false,
trailingComma: 'all',
bracketSpacing: true,
bracketSameLine: false,
jsxBracketSameLine: false,
arrowParens: 'avoid',
requirePragma: false,
insertPragma: false,
proseWrap: 'preserve',
htmlWhitespaceSensitivity: 'ignore',
endOfLine: 'lf',
singleAttributePerLine: true,
}
],
'no-confusing-arrow': 'off',
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off',
},
}
One of my code is like:
type BasicDataStructureType = 'Integer' | 'Float' | 'Double' | 'Enumeration' | 'Boolean' | 'Array' | 'Struct'
Prettier format it into:
type BasicDataStructureType =
| 'Integer'
| 'Float'
| 'Double'
| 'Enumeration'
| 'Boolean'
| 'Array'
| 'Struct'
The formated code is flagged: Replace ⏎··|·'Integer'⏎··|·'Float'⏎··|·'Double'⏎··|·'Enumeration'⏎··|·'Boolean'⏎··|·'Array'⏎· with ·'Integer'·|·'Float'·|·'Double'·|·'Enumeration'·|·'Boolean'·|·'Array'
Another formatted non-compliant code is:
const Api = {
getDataStructureVersions: (param: { name: string; namespaceId: number }) =>
request({ url: `/struct/version/list?${queryString.stringify(param)}`, method: 'GET' }),
}
It is flagged as: Delete ⏎···
Is my eslint or prettier not configured properly? Can someone help me solve this issue? Otherwise, I'll have to remove Prettier.
答案1
得分: 1
OK，我自己解决了。
我使用了 Prettier 的 VSCode 插件，而不是 eslint-plugin-prettier。
但我仍然不知道为什么 eslint-plugin-prettier 不适用于我的 prettier 配置。只要我将 printWidth 设置为 105 或将 singleAttributePerLine 设置为 true，我的代码就会被标记为不合规。
英文:
OK，I solved myself.
I use Prettier vscode plugin instead of eslint-plugin-prettier.
But I still don't know why eslint-plugin-prettier doesn't work around with my prettier config. As long as I set printWidth to 105 or set singleAttributePerLine to true, my code was flagged as not compliant.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论