VS 代码用新行格式化 JSX

Question

我最近开始使用 React 进行编码，我立即注意到 VS Code 正在按如下方式格式化我的 React 文件，这导致 linter 发出各种警告。索引.jsclass App extends Component {  render() {    return ( <      div className = "App" >      <      header className = "App-header" >      <      img src = {        logo      }      className = "App-logo"      alt = "logo" / >      <      p >      Edit < code > src / App.js < /code> and save to reload. < /      p > <      a className = "App-link"      href = "https://reactjs.org"      target = "_blank"      rel = "noopener noreferrer" >      Learn React <      /a> < /      header > <      /div>    );  }}我无法在应用程序中找到 Prettier 设置或导致此问题的任何其他设置，有什么建议吗？扩展（注意 WSL Ubuntu Windows）括号对着色器Chrome 调试器Javascript (ES6) 代码片段反应硝基片段Reactjs 代码片段远程-WSL主题自动前缀美化城市之光图标包VS 代码的编辑器配置ESLintGithub 拉取请求和问题GitLens - Git 增压进口成本直播服务器npmnpm 智能感知路径智能感知Prettier - 代码格式化程序反应扩展包反应硝基要点搜索节点模块声纳林特冬天vue-美化

Answer 1

您需要选择默认格式化程序。

1. 按Ctrl+Shift+P(Win) 或Cmd+Shift+P(Mac)

2. 键入格式化文档...

3. 然后单击Configure Default Formatter...并从列表中选择它。

Answer 2

你应该下载 Prettier。然后转到“设置”并选中（复选框）“更漂亮：JSX 支架同一行”它应该运行良好

Answer 3

只需在 VS CODE 上安装 Preitter Extensions，它将重新格式化所有文件

Answer 4

这可能是由于 vs code 中可用的格式工具存在冲突。为了解决这个

1. 按Ctrl+Shift+P(windows) 或Cmd+Shift+P(Mac)

2. 类型Format Document With...

3. 选择Configure default Formatter...

4. 为以后的格式选择一个选项。（如果你选择的是 vs code 的内置格式工具，最好禁用/删除其他代码格式扩展）

5. 选择全部Ctrl+A(Windows) 或Cmd+A(Mac)，然后按Ctrl+K Ctrl+F(windows) 或Cmd+K Cmd+F来格式化文档。

Answer 5

如果您在 Visual Studio Code 中使用更漂亮的扩展，请尝试将其添加到 settings.json 文件中：

"editor.insertSpaces": false,

"editor.tabSize": 4,

"editor.detectIndentation": false,

"prettier.tabWidth": 4,

"prettier.useTabs": true  // This made it finally work for me

好吧，如果您喜欢开发人员方式，Visual Studio Code 允许您为 tabSize 指定不同的文件类型。这是我的 settings.json 示例，默认有四个空格，JavaScript/JSON 有两个空格：

{

 // I want my default to be 4, but JavaScript/JSON to be 2

 "editor.tabSize": 4,

 "[javascript]": {

  "editor.tabSize": 2

 },

"[json]": {

 "editor.tabSize": 2

 },

 // This one forces the tab to be **space**

"editor.insertSpaces": true

}