当 eslint 指责 max-length 并且 .prettierignore 不起作用时，Prettier 不适用

如何解决当 eslint 指责 max-length 并且 .prettierignore 不起作用时，Prettier 不适用

案例 1 (PrintWidth)：

在这种情况下会发生以下情况，我在 .prettierrc 文件、vscode settigns.json 和 .eslintrc.js 中配置了 printWidth。但是，当到达 max-length（在本例中为 120）时，prettier 不会应用其样式。

案例 2 (.prettierignore)

prettier 只是忽略这个文件，不应用它包含的规则。

案例 1 所需的解决方案：

当 eslint 验证代码处于行大小的限制（在本例中为 120 且大于限制）时，它会“破坏”代码，例如降低属性JSX components 等

案例 2 所需的解决方案：

prettier 可以使用 .prettierignore 文件

我的 VSCODE 设置：

"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true,"editor.rulers": [120,120]

我更漂亮的配置：

{
    "printWidth": 120,"tabWidth": 2,"useTabs": true,"semi": true,"singleQuote": true,"jsxSingleQuote": true,"jsxBracketSameLine": false,"bracketSpacing": true,"arrowParens": "always","endOfLine": "lf","quoteProps": "as-needed","trailingComma": "none"
}

我的 ESlintrC 配置：

module.exports = {
    env: {
        browser: true,es2021: true
    },extends: [
        'plugin:react/recommended','plugin:react-hooks/recommended','plugin:prettier/recommended','plugin:import/errors','plugin:import/warnings','react-app','react-app/jest','airbnb'
    ],parser: '@typescript-eslint/parser',parserOptions: {
        ecmaFeatures: {
            jsx: true
        },ecmaVersion: 5,sourceType: 'module'
    },plugins: ['react','react-hooks','prefer-arrow','prettier','@typescript-eslint'],settings: {
        react: {
            version: 'detect'
        },'import/resolver': {
            node: {
                paths: ['src'],moduleDirectory: ['node_modules','src/'],extensions: ['.js','.jsx','.ts','.tsx']
            }
        }
    },overrides: [
        {
            files: ['**/*.js','**/*.jsx','**/*.ts','**/*.tsx'],plugins: ['@typescript-eslint'],rules: {
                'no-use-before-define': 'off','@typescript-eslint/no-use-before-define': ['error']
            }
        }
    ],ignorePatterns: ['src/assets/images/*','src/assets/fonts/*'],rules: {
        '@typescript-eslint/no-unused-vars': ['error'],'prettier/prettier': 'error','arrow-body-style': 'off','arrow-parens': ['error','always'],'object-curly-newline': 'off','no-tabs': 0,indent: [2,'tab',{ SwitchCase: 1 }],'comma-dangle': ['error','never'],'max-len': ['error',{ code: 120 }],'jsx-quotes': ['error','prefer-single'],'implicit-arrow-linebreak': 'off','operator-linebreak': [
            'error','after',{
                overrides: {
                    ':': 'before'
                }
            }
        ],'react-hooks/rules-of-hooks': 'error',// Checks rules of Hooks
        'react-hooks/exhaustive-deps': 'warn',// Checks effect,'react/jsx-indent-props': 'off','react/react-in-jsx-scope': 'off','react/jsx-props-no-spreading': 'off','react/jsx-boolean-value': 'off','react/jsx-indent': ['error',{ checkAttributes: true,indentLogicalExpressions: true }],'react/jsx-filename-extension': [1,{ extensions: ['.js','.tsx'] }],'react/jsx-wrap-multilines': [
            'error',{
                declaration: 'parens-new-line',assignment: 'parens-new-line',return: 'parens-new-line',arrow: 'parens-new-line',condition: 'parens-new-line',logical: 'parens-new-line',prop: 'parens-new-line'
            }
        ],'prefer-arrow-callback': 'off','prefer-arrow/prefer-arrow-functions': [
            'error',{
                disallowPrototype: true,singleReturnOnly: false,classpropertiesAllowed: false
            }
        ],'import/prefer-default-export': 'off','import/extensions': [
            'error','ignorePackages',{
                js: 'never',jsx: 'never',ts: 'never',tsx: 'never'
            }
        ]
    }
};