Question 135751 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Align JavaScript imports "from" Statement to be Vertically Aligned

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.

Tags:

2

Answers


  1. 0

    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"
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search