对齐 JavaScript 导入“from”语句以垂直对齐

Question

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

onSave

：

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

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

Answer 1

Prettier 不在乎你想要什么。 :-) 这是一个“固执己见”的工具，可用于将一致性应用于团队内的代码（并避免关于不同格式样式的争论[尽管您只是得到关于是否使用 Prettier 的争论]）。 如果您不想要 Prettier 的格式，请不要使用 Prettier。还有其他代码格式化程序，其中一些提供比 Prettier 更多的控制。

你

可以

告诉Prettier忽略每一个导入语句：

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

或

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

目前，Prettier for JavaScript 中没有“块忽略”功能（仅适用于

某些选定的其他语言

），尽管有有一个开放请求。

Answer 2

.vscode/settings.json

文件中

"editor.codeActionsOnSave": {
 "source.fixAll": false,
 "source.fixAll.eslint": false,
 "source.organizeImports": true,
},

如果您希望 VS Code 为您调整导入，则应将 source.organizeImports

设置为

true

。

Answer 3

                /* 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";

所以我的答案不是回应“如何对齐‘from’语句？”但它
可能会提出另一个问题“你应该吗？”

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

// 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"
}