被 Prettier 格式化的代码被标记为不合规。

huangapple
go评论84阅读模式
英文:

The code formatted by Prettier is being flagged as non-compliant

问题

我使用 ESLint 和 Prettier 自动格式化 TypeScript 代码，但格式化后的代码仍然被标记为不符合 Prettier 的规则。

我的 eslint 配置：

  1. module.exports = {
  2.   root: true,
  3.   env: { browser: true, es2020: true },
  4.   settings: {
  5.     'import/resolver': {
  6.       'typescript': {}
  7.     }
  8.   },
  9.   extends: [
  10.     'prettier',
  11.   ],
  12.   parser: '@typescript-eslint/parser',
  13.   parserOptions: {
  14.     ecmaVersion: 'latest',
  15.     sourceType: 'module',
  16.     project: true,
  17.     tsconfigRootDir: __dirname,
  18.   },
  19.   plugins: ['react-refresh', 'prettier'],
  20.   rules: {
  21.     'max-len': ['error', { code: 120 }],
  22.     'prettier/prettier': [
  23.       'error',
  24.       {
  25.         printWidth: 120,
  26.         tabWidth: 2,
  27.         useTabs: false,
  28.         semi: false,
  29.         singleQuote: true,
  30.         quoteProps: 'as-needed',
  31.         jsxSingleQuote: false,
  32.         trailingComma: 'all',
  33.         bracketSpacing: true,
  34.         bracketSameLine: false,
  35.         jsxBracketSameLine: false,
  36.         arrowParens: 'avoid',
  37.         requirePragma: false,
  38.         insertPragma: false,
  39.         proseWrap: 'preserve',
  40.         htmlWhitespaceSensitivity: 'ignore',
  41.         endOfLine: 'lf',
  42.         singleAttributePerLine: true,
  43.       }
  44.     ],
  45.     'no-confusing-arrow': 'off',
  46.     'arrow-body-style': 'off',
  47.     'prefer-arrow-callback': 'off',
  48.   },
  49. }

我的一个代码示例是：

  1. type BasicDataStructureType = 'Integer' | 'Float' | 'Double' | 'Enumeration' | 'Boolean' | 'Array' | 'Struct'

Prettier 将其格式化为：

  1. type BasicDataStructureType =
  2.   | 'Integer'
  3.   | 'Float'
  4.   | 'Double'
  5.   | 'Enumeration'
  6.   | 'Boolean'
  7.   | 'Array'
  8.   | 'Struct'

格式化后的代码被标记为：将 ⏎ | 'Integer'⏎ | 'Float'⏎ | 'Double'⏎ | 'Enumeration'⏎ | 'Boolean'⏎ | 'Array'⏎ 替换为 | 'Integer' | 'Float' | 'Double' | 'Enumeration' | 'Boolean' | 'Array'

另一个格式化后不符合规则的代码是：

  1. const Api = {
  2.   getDataStructureVersions: (param: { name: string; namespaceId: number }) =>
  3.     request({ url: `/struct/version/list?${queryString.stringify(param)}`, method: 'GET' }),
  4. }

它被标记为：删除 ⏎

我的 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:

  1. module.exports = {
  2.   root: true,
  3.   env: { browser: true, es2020: true },
  4.   settings: {
  5.     'import/resolver': {
  6.       'typescript': {}
  7.     }
  8.   },
  9.   extends: [
  10.     'prettier',
  11.   ],
  12.   parser: '@typescript-eslint/parser',
  13.   parserOptions: {
  14.     ecmaVersion: 'latest',
  15.     sourceType: 'module',
  16.     project: true,
  17.     tsconfigRootDir: __dirname,
  18.   },
  19.   plugins: ['react-refresh', 'prettier'],
  20.   rules: {
  21.     'max-len': ['error', { code: 120 }],
  22.     'prettier/prettier': [
  23.       'error',
  24.       {
  25.         printWidth: 120,
  26.         tabWidth: 2,
  27.         useTabs: false,
  28.         semi: false,
  29.         singleQuote: true,
  30.         quoteProps: 'as-needed',
  31.         jsxSingleQuote: false,
  32.         trailingComma: 'all',
  33.         bracketSpacing: true,
  34.         bracketSameLine: false,
  35.         jsxBracketSameLine: false,
  36.         arrowParens: 'avoid',
  37.         requirePragma: false,
  38.         insertPragma: false,
  39.         proseWrap: 'preserve',
  40.         htmlWhitespaceSensitivity: 'ignore',
  41.         endOfLine: 'lf',
  42.         singleAttributePerLine: true,
  43.       }
  44.     ],
  45.     'no-confusing-arrow': 'off',
  46.     'arrow-body-style': 'off',
  47.     'prefer-arrow-callback': 'off',
  48.   },
  49. }

One of my code is like:

  1. type BasicDataStructureType = 'Integer' | 'Float' | 'Double' | 'Enumeration' | 'Boolean' | 'Array' | 'Struct'

Prettier format it into:

  1. type BasicDataStructureType =
  2.   | 'Integer'
  3.   | 'Float'
  4.   | 'Double'
  5.   | 'Enumeration'
  6.   | 'Boolean'
  7.   | 'Array'
  8.   | '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:

  1. const Api = {
  2.   getDataStructureVersions: (param: { name: string; namespaceId: number }) =>
  3.     request({ url: `/struct/version/list?${queryString.stringify(param)}`, method: 'GET' }),
  4. }

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.

huangapple
  • 本文由 发表于 2023年8月10日 20:18:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76875678.html
  • eslint
  • prettier
  • typescript-eslint
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定