如何配置ESLint使多行条件的运算符位于行首？

你需要让多行if条件的逻辑运算符（如&&）放在行首而非行尾，方便单独注释某条条件。

期望格式：

if (
   …
   && … 
   && …
)

不期望的格式：

if (
   …
   … &&
   … &&
)

解决方案 #

通过ESLint的operator-linebreak规则可以实现这个格式要求，修改你的ESLint配置文件如下：

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
    plugins: ['svelte3', '@typescript-eslint'],
    ignorePatterns: ['*.cjs'],
    overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
    settings: {
        'svelte3/typescript': () => require('typescript')
    },
    parserOptions: {
        sourceType: 'module',
        ecmaVersion: 2020
    },
    env: {
        browser: true,
        es2017: true,
        node: true
    },
    rules: {
        'operator-linebreak': ['error', 'before', {
            overrides: {
                '=': 'none' // 可选配置，避免赋值运算符强制换行，可根据需求调整
            }
        }]
    }
};

规则说明 #

• 'operator-linebreak': ['error', 'before'：强制所有运算符放在行首，违反时触发ESLint错误提示
• overrides字段可针对特定运算符设置例外，比如示例中对赋值运算符=设置none，表示不强制其换行位置，保留原有书写习惯

如果你的项目同时使用Prettier，需要确保Prettier的配置与该ESLint规则兼容，避免格式冲突。

内容的提问来源于stack exchange，提问作者David Wolf