如何将 VSCode settings.json 集成到 WebStorm 中？

Question

我正在尝试将 VSCode

settings.json

集成到 WebStorm 中。当我保存文件时，VSCode 会自动为我格式化代码。如何将此格式集成到 WebStorm 中？

例如，VSCode 中的

settings.json

：

{
  "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 是一个很棒的编辑器，它包含许多功能，但这些功能是同一频段的其他编辑器或 IDE 所没有的。这意味着如果您想拥有一致的开发环境设置，则必须以其他方式进行。

要拥有编辑器配置，您必须使用

.editorconfig

文件以使其在任何类型的编辑器或 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

更多信息

---

为了在您的开发区域进行 linting，您必须使用特定的设置，让我举一个

ESList

的例子。首先，您必须安装

eslint

软件包，然后安装相关插件并放置

.eslintrc.json

配置文件：

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

通过使用这种方式，VSCode 的所有配置都被分成不同的文件，但现在它们与任何类型的 IDE 或编辑器完全一致。没有任何简单的方法可以直接在 WebStorm 中使用 VSCode 设置文件。