如何配置 Prettier 和 ESLint 将 TypeScript/JavaScript 导入格式化为多行？

Question

我正在开发一个 TypeScript 项目，我想配置 Prettier 和 ESLint，以便在行宽超过 Prettier 预定义的

printWidth

规则时自动格式化我的导入语句。具体来说，我想将长导入语句分成两行，如下所示：

当前格式：

import { 
 x,
 y, 
 z, 
 n, 
 h 
} from '@example/package';

所需格式：

import { x, y, z } from '@example/package';
import { n, h } from '@example/package';

我当前的配置：

更漂亮的配置（prettierrc）：

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120
}

ESLint 配置（.eslintrc.json）：

{
  "extends": ["next/core-web-vitals", "next/typescript", "eslint:recommended"],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "import/no-anonymous-default-export": "off"
  }
}

我尝试使用

import/order

中的

eslint-plugin-import

并配置了

prettier-plugin-import-sort

，但似乎它们没有实现所需的导入拆分。

有人对如何在 TypeScript 项目中正确设置它有建议吗？

附加信息：

• 我正在使用 Visual Studio Code，并希望在保存时进行格式化。
• 我已确保 Prettier 和 ESLint 均已安装并正常工作，但它们未按预期格式化导入。

提前感谢您的帮助！

Answer 1

为了在 TypeScript 项目中实现所需的导入拆分，您可以结合使用 ESLint 和 Prettier 以及特定的插件和配置。以下是设置此功能的分步指南：

第1步：安装必要的软件包

首先，确保您已安装所需的软件包。您可以使用npm或yarn安装它们：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-import prettier-plugin-import-sort @typescript-eslint/parser @typescript-eslint/eslint-plugin

或

yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-import prettier-plugin-import-sort @typescript-eslint/parser @typescript-eslint/eslint-plugin

第2步：配置ESLint

更新您的

.eslintrc.json

以包含必要的插件和规则：

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint", "import", "prettier"],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "import/no-anonymous-default-export": "off",
    "prettier/prettier": ["error", { "singleQuote": true, "trailingComma": "all", "printWidth": 120 }],
    "import/order": [
      "error",
      {
        "groups": [["builtin", "external", "internal"]],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }
    ]
  }
}

第3步：配置Prettier

更新您的

.prettierrc

以包含必要的设置：

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120,
  "plugins": ["prettier-plugin-import-sort"]
}

第 4 步：配置 VS Code 以进行自动格式化

确保 Visual Studio Code 设置为保存时格式化。将以下设置添加到您的

settings.json

：

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

我认为，通过执行这些步骤，当您在 Visual Studio Code 中保存文件时，您的 TypeScript 项目应该根据您指定的规则自动格式化导入语句。