How to integrate VSCode settings.json into WebStorm?

Question

I am trying to integrate VSCode settings.json into WebStorm. When I save files, VSCode automatically formats the code for me. How can I integrate this formatting into WebStorm?

For example, here is a settings.json in VSCode:

{
  "eslint.validate": [
    "javascript"
  ],
  "eslint.format.enable": true,
  "eslint.alwaysShowStatus": true,
  "editor.formatOnSave": false,
  "editor.tabSize": 2,
  "stylelint.validate": [
    "scss",
    "css",
    "less"
  ],
  "css.validate": false,
  "scss.validate": false,
  "stylelint.config": null,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll": "explicit"
  }
}

Answer 1

VSCode is an awesome editor and it contains many features but those are not in other editors or IDEs in the same band. It means if you want to have a consistent development environment setting you have to do it in another way.

For having editor configs you must use a .editorconfig file to make it consistent in any type of editor or IDE

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

More information

---

For having linting in your development area you must use a specific setting, let me have an example for ESList. First of all, you must install the eslint package and then the related plugins and put a .eslintrc.json config file:

{
  "extends": "next/core-web-vitals",
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "import/no-anonymous-default-export": "off",
    "@next/next/no-img-element": "off",
    "@next/next/no-assign-module-variable": "off",
    "jsx-a11y/alt-text": "off",
    "react/display-name": "off",
    "react/jsx-key": "off",
    "react-hooks/rules-of-hooks": "off",
    "react-hooks/exhaustive-deps": "off"
  }
}

By using this way all configs of VSCode, got separated into different files but now they are fully consistent with any type of IDE or editor. There isn't any easy way to use VSCode setting file directly in WebStorm.