Eslint 规则在导入中放置新行

Question

我正在寻找的规则在这种情况下应该显示错误：

import {MY_CONSTANT1, MY_CONSTANT2, MY_CONSTANT3}

在这种情况下被认为是好的：

import {
   MY_CONSTANT1, 
   MY_CONSTANT2, 
   MY_CONSTANT3
}

有这样的eslint规则吗？

Answer 1

我正在寻找这样的进出口申报规则。 结果我制作了一个具有自动修复功能的插件。

所以插件转换了代码

import { k1, k2 } from 'something'

进入

import {
  k1,
  k2
} from 'something'

和代码

export { name1, name2, nameN }

进入

export {
  name1,
  name2,
  nameN
}

Answer 2

编辑：

Anton Antonov 制作了一个比 object-curly-newline 更好地执行此规则的插件：https://stackoverflow.com/a/60477269/6179417

---

旧答案

将 object-curly-newline 规则添加到您的

.eslintrc.json

，其中至少

ImportDeclaration

设置为始终（其他设置对于在导入声明中强制换行没有影响）。

示例：

"object-curly-newline": ["error", {
   "ObjectExpression": "always",
   "ObjectPattern": { "multiline": true },
   "ImportDeclaration": "always",
   "ExportDeclaration": { "multiline": true, "minProperties": 3 }
}]

此模式现在将导致错误：

虽然这是有效的：

但是，有一个问题 - 该规则只要求在左大括号之后和右大括号之前有换行符，因此只要大括号之间有换行符，您仍然可以在导入上加倍：

Answer 3

更新 Anton Antonov 对 eslint 8 的回答

因为 Anton Antonovs 存储库已存档，并在 eslint 8 中给出了 meta.fixable 错误。我建议使用 ruudandriessen 项目的 fork .

如何使用叉子：

1. 安装前叉

npm install eslint-plugin-modules-newlines --save-dev

2. 更改 module-newline -> module-newlines 的 eslint 配置文件中的所有引用

错误：

ESLint: Fixable rules must set the `meta.fixable` property to "code" or "whitespace".
Occurred while linting ... Rule: "modules-newline/import-declaration-newline".
Please see the 'ESLint' output channel for details.

Answer 4

我一直在寻找解决方案，但不幸的是只找到了您的问题。我决定学习一些关于 eslint 的工作原理以及如何编写自己的插件并创建我的插件。如果您知道解析后的 AST 节点结构，那么使用起来非常容易。这是插件的主文件。不过，自动修复比较棘手，所以我不包含它，因为它偏向我的格式标准。

module.exports = {
  rules: {
    'single-import-per-line': {
      create (context) {
        return {
          ImportDeclaration(node) {
            if (node.specifiers.length < 2) {
              return;
            }

            let previousImport = node.specifiers[0];
            for (let i = 1; i < node.specifiers.length; i++) {
              const currentImport = node.specifiers[i];

              // Omit the first condition if you want to put default imports on a new line as well
              if (previousImport.type !== 'ImportDefaultSpecifier'
                && currentImport.loc.start.line === previousImport.loc.end.line
              ) {
                context.report({ node, message: 'Your message' });
                return;
              }

              previousImport = currentImport;
            }
          },
        };
      },
    },
  },
};

Answer 5

Anton 的插件不适用于 ESLint 9，所以我制作了一个可以的插件。它还带有 TypeScript 类型：

https://www.npmjs.com/package/eslint-plugin-module-bindings-newline

安装

您可以使用

pnpm

、

npm

或

yarn

安装此插件。

pnpm install eslint-plugin-module-bindings-newline --save-dev

或

npm install eslint-plugin-module-bindings-newline --save-dev

或

yarn add eslint-plugin-module-bindings-newline --dev

使用方法

基本设置

在您的 ESLint 配置文件（例如，

eslint.config.js

）中，导入插件并配置它：

import eslint from '@eslint/js';
import moduleBindingsNewline from 'eslint-plugin-module-bindings-newline';

export default [
  eslint.configs.recommended,
  {
    plugins: {
      'module-bindings-newline': moduleBindingsNewline,
    },
    files: ['**/*.{js,ts,jsx,tsx}'],
    rules: {
      'module-bindings-newline/export-newline': 'error',
      'module-bindings-newline/import-newline': 'error',
    },
  },
];

Answer 6

你可以试试这个

"semicolon": [true, "always"]