ESLint 排序导入多行换行答案

【问题标题】：ESLint sort imports multiline wrapESLint 排序导入多行换行
【发布时间】：2020-12-09 14:17:45
【问题描述】：

我想使用 sort-imports eslint 规则对导入语句进行排序，但是当我进行多行导入时，它会将每个导入的内容都分成一个新行。

我的问题是我想让导入多行，但在指定宽度后换行。

//My use case
import { a, b, c, z, x, h } from x;

//How is linting
import {
  a
  , b
  , c
  , h
  , x
  , z
} from x;

//How I want to works
import {
  a, b, c
  , h, x, z
} from x;

在这种只有 3 个导入的情况下，我不介意导入的东西是否只在一行中，但我的问题是当我有很多东西时（比如我要导入 20 个 ramda 函数）并且我不想将每个导入的函数拆分为新行。

这是我目前的 eslint + 更漂亮的配置：

.eslintrc.json

{
  "root": true,
  "extends": [
    "plugin:vue/essential",
    "plugin:prettier/recommended",
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "env": {
    "es6": true
  },
  "rules": {
    "indent": ["error", 2],
    "arrow-parens": ["error", "always"],
    "sort-imports": [
      "error",
      {
        "ignoreDeclarationSort": true
      }
    ],
    "comma-style": ["error", "first"],
    "comma-spacing" :["error", {
      "after": true
    }]
  }
}

.prettierrc.json

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": true,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

【问题讨论】：

一般来说，您应该每行只有一个导入，以便您可以轻松跟踪版本控制系统（即 Git）中的更改。

标签： javascript eslint prettier

【解决方案1】：

你应该在 eslint:recommended 之后加载 plugin:prettier/recommended 以阻止 eslint 重新格式化更漂亮的东西

【讨论】：