CODEWITHSUNDEEP
typescriptvisual-studio-codewebstorm
Chandima Gunawardhana
Chandima Gunawardhana

Reputation: 133

How to set same code formatting styles to WebStorm and VSCode?

Our team uses both VSCode and WebStorm for development, so need to create a same code formatting style for both IDEs.

Upvotes: 13

Views: 10209

Answers (3)

Samira
Samira

Reputation: 2723

Follow these steps in WebStorm :

yarn add --dev --exact prettier

yarn prettier . --write

npm install --save-dev eslint-config-prettier

Go to File | New Projects Setup | Settings for New Projects. In the dialog that opens, go to Languages & Frameworks | JavaScript | Prettier.

Use the Run on 'Reformat Code' action and On save checkboxes to specify the actions that will trigger Prettier.

Your code formatting in WebStorm closely resembles that of VS Code.

eslintrc: Add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

Configure Prettier to run on save or on reformat in new projects

eslint-config-prettier

That solution worked perfectly for me.

Upvotes: 0

Ekaterina Prigara
Ekaterina Prigara

Reputation: 4957

You can use editorconfig. It's a format for describing code style supported by many editors including WebStorm and VS Code.

Upvotes: 0

torkel
torkel

Reputation: 2476

I would recommend formatting your code with Prettier. There's a plugin for VSCode and WebStorm. If you add Prettier as a dependency in package.json (with a specific version) you will make sure that both editors invoke the exact same formatting command.

Upvotes: 3

Related Questions