I would like the end result of my imports to be like this, via a tool that can automatically format my code onSave:

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

How can I align all of the "from" statements vertically in VS Code? I've looked at both prettier and eslint.

CodePudding user response：

Prettier doesn't care what you want. :-) It's an opinionated tool useful for applying consistency to code within teams (and for avoiding arguments about different formatting styles [although you just get arguments about whether to use Prettier instead]).

If you don't want Prettier's formatting, don't use Prettier. There are other code formatters, some of which offer more control than Prettier does.

You could tell Prettier to ignore each of those import statements:

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

or

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

For now there's no "block ignore" in Prettier for JavaScript (only for certain select other languages), although there's an open request for one.

CodePudding user response：

Usually, with prettier or eslint you might want to limit printWidth to defined number of caracter per line. So imagine if you have many imports or long module name :

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

So my answer is not responding to "how can you align 'from' statements?" but it may open another question 'should you ?'

Here is a common way to indent imports :

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

Here is the eslint rule to auto indent your code : https://eslint.org/docs/latest/rules/object-curly-newline

example for object-curly-newline rule in eslint:

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

PS:

Here some example of how I use it

# .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"
}