对齐 JavaScript 导入 \"from\" 语句以垂直对齐答案

【问题标题】：Align JavaScript imports "from" Statement to be Vertically Aligned对齐 JavaScript 导入 \"from\" 语句以垂直对齐
【发布时间】：2022-10-12 23:06:39
【问题描述】：

我希望我的导入的最终结果是这样的，通过一个可以自动格式化我的代码onSave的工具：

import { Stack, StackProps, Duration, Resource } from "aws-cdk-lib";
import { LambdaStack }                           from "./lambda-Stack";
import { Construct }                             from "constructs";

如何在 VS Code 中垂直对齐所有“from”语句？我看过漂亮和 eslint。

【问题讨论】：

标签： javascript visual-studio-code import prettier

【解决方案1】：

通常，使用 prettier 或 eslint，您可能希望将 printWidth 限制为每行定义的字符数。所以想象一下，如果你有很多导入或长模块名称：

                /* You better should break line overhere |----------| */
import { DepA, DepB, DepC, DepD, DepE, DepF, DepG, DepH, DepI, DepJ } from "./some-long-named-module";
import { OnlyOneImport }                                              from "./other-module";

所以我的回答不是回应“你怎么能对齐'来自'的陈述？”但它可能会提出另一个问题“你应该吗？”

这是缩进导入的常用方法：

// common way to write import with vertical (Automatable)
import { 
  DepA, 
  DepB, 
  DepC, 
  DepD, 
  DepE, 
  DepF, 
  DepG, 
  DepH, 
  DepI, 
  DepJ 
} from "./some-long-named-module";
import { OnlyOneImport } from "./other-module";

这是自动缩进代码的 eslint 规则：https://eslint.org/docs/latest/rules/object-curly-newline

eslint 中 object-curly-newline 规则的示例：

# .estlintrc.json
{
 ...
 "rules": {
    ...
    "object-curly-newline": [
      "error",
      {
          "consistent": true,
          "multiline": true
      }
    ]
 }
}

PS：

这里有一些我如何使用它的例子

# .estlintrc.json
{
  "root": true,
  "extends": [
    "airbnb-base", // See https://www.npmjs.com/package/eslint-config-airbnb
    "airbnb-base/whitespace", 
    "plugin:jest/recommended", // See https://www.npmjs.com/package/eslint-plugin-jest
    "prettier" // See https://github.com/prettier/eslint-config-prettier
  ],
  "env": {
    "jest/globals": true
  },
  "plugins": [
    "jest",
    "...whatever-you-want"
  ],
  "ignorePatterns": [
    "dist/",
    "node_modules/",
    "...whatever-you-want"
  ],
  "rules": {
    "no-restricted-syntax": [
      "error",
      "WithStatement",
      "BinaryExpression[operator='in']"
    ],
    "no-console": [
      0,
      {
        "allow": [
          "info",
          "warn",
          "error"
        ]
      }
    ],
    "quotes": [
      "error",
      "single",
      "avoid-escape"
    ],
    "object-curly-newline": [
      "error",
      {
          "consistent": true,
          "multiline": true
      }
    ],
    "...whatever-you-want"
  }
}

# .prettierrc
{
    "printWidth": 80,
    "trailingComma": "es5",
    "useTabs": false,
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "bracketSpacing": true,
    "bracketSameLine": false,
    "proseWrap": "preserve",
    "arrowParens": "avoid",
    "endOfLine": "lf",
    "parser": "babel"
}

【讨论】：