ESLint 错误地缩进多行参数 JavaScript 函数的单返回语句答案

【问题标题】：ESLint wrongly indents single-return statement of multiline param JavaScript functionESLint 错误地缩进多行参数 JavaScript 函数的单返回语句
【发布时间】：2020-11-29 22:56:50
【问题描述】：

我有这个带有多行参数和单体返回的函数（因为它们很长）。这是一个普通的 JS 文件：

const myFunction = (
    looooooooongParam1,
    looooooooongParam2,
    looooooooongParam3,
    looooooooongParam4,
) => (
    looooooooongParam1
    + looooooooongParam2
    + looooooooongParam3
    + looooooooongParam4
    + looooooooongParam4
);

ESLint 格式错误地将返回的行向右移动。然后它抱怨缩进是错误的（当然是！）：

我的 ESLint 规则是：

module.exports = {
    env: {
        browser: true,
        es2020: true,
    },

    extends: [
        'plugin:react/recommended',
        'airbnb',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
    ],

    parser: '@typescript-eslint/parser',

    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 11,
        sourceType: 'module',
    },

    plugins: [
        'react',
        '@typescript-eslint',
    ],

    rules: {
        'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
        'react/jsx-indent': ['error', 4],
        indent: ['error', 4],
        'import/extensions': [
            'error',
            'ignorePackages',
            {
                js: 'never',
                jsx: 'never',
                ts: 'never',
                tsx: 'never',
                mjs: 'never',
            },
        ],

        'no-unused-vars': 'off',
        '@typescript-eslint/no-unused-vars': 'error',
    },

    settings: {
        'import/resolver': {
            node: {
                extensions: [
                    '.js',
                    '.jsx',
                    '.ts',
                    '.tsx',
                ],
            },
        },
    },
};

我使用 VSCode 并在保存时使用 eslint 格式化。 VSCode 相关设置：

有什么想法可以让 ESLint 将返回线保持在左侧吗？

编辑 1： 在 VSCode 中保存文件时，我看到代码正确缩进了大约 0.2 秒，然后缩进不正确。

编辑 2：如果我的参数较少，在一行上，缩进可以正常工作，所以 只有在有多行参数时才会发生这种情况；。。 em>

【问题讨论】：

看起来您对 jsx-indent 和 indent 都有规则。也许他们互相干扰？
@Bergi 我不这么认为，因为我的函数在一个普通的 JS 文件中并且不包含 JSX（我编辑包含它是一个 JS 文件）
你用的是prettier吗？如果然后禁用它并重试。
@PramodMali 不，根本没有安装更漂亮的。当函数参数放置在多行时会发生这种情况。不知何故，这迫使函数体向右移动。
你能尝试用“function-paren-newline”覆盖这条规则eslint.org/docs/rules/function-paren-newline：[“error”，“never”]。也许一个或多个“推荐的扩展”导致这种情况发生。

标签： javascript return eslint multiline

【解决方案1】：

在我手动对文件运行 eslint --fix 后，我发现它运行良好，所以我发现 VSCode 有它自己的格式化程序，并且与 ESLint 正在做的事情重叠。

解决方案：我必须使用"javascript.format.enable": false 来禁用 VSCode 的 JS 格式化程序来格式化我的 JS 文件，让只有 ESLint 来做。

注意：同样的故事也适用于 TSX 文件，我必须这样做 "typescript.format.enable": false 才能让 ESLint 格式化 TSX 代码。

【讨论】：