ESLint排序导入多行换行

问题描述

我想使用 sort-imports eslint规则对import语句进行排序，但是当我进行多行导入时，它将把所有导入的内容分解为新行。

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

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

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

//How I want to works
import {
  a,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
}

解决方法

您应该在plugin:prettier/recommended之后加载eslint:recommended，以停止对更漂亮的内容进行重新装裱

javascript prettier