vscode的更漂亮的设置

Question

我最近切换到一台新计算机，在设置更漂亮的设置时遇到了困难。 （我认为这是更漂亮，可能会被保留）。

此gif说明发生了什么： http://g.recordit.co/H871hfT9Sv.gif

有人知道这个设置叫什么吗？我希望所有导入都在一行上，除非长度扩展了printWidth设置。

这是我与VS Code相关的用户设置：

{
  "prettier.printWidth": 100,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all"
}

谢谢！

编辑： 视觉描绘，因此您无需观看gif。

预期：

import React from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { isIphoneX } from 'react-native-iphone-x-helper'

行为：（不需要）

import React from 'react'
import {
  Dimensions,
  StyleSheet,
  View
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {
  isIphoneX
} from 'react-native-iphone-x-helper'

Answer 1

对于那些试图快速更改VS Code的“更漂亮”设置的人。步骤如下：

1. 转到文件->首选项->设置。 （VS代码菜单）
2. 设置窗口应打开。在（顶部）上方有一个搜索。键入“漂亮”
3. 您应该看到可用的“更漂亮”设置。您可以修改它们：）

Answer 2

在最近的更新中，VS Code不再支持使用“标准vs代码设置”选项卡编辑更漂亮的配置。

配置美观设置的新方法：

1. 在项目文件夹的根目录下，创建一个新的配置文件（“ .prettierrc.json”）
2. 在该新文件中，添加json自定义设置：我对JS的设置如下：

{
    "trailingComma": "none",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true
}

Answer 3

这个问题有两个答案，两个都很好，只有一个是人们想要的。但是，有一种方法可以将两个答案合并为一个更好的解决方案。

Eslint为您显示“错误”，并为您显示更漂亮的格式代码。

您可以设置名为Eslint Integration的Prettier配置。

这样，漂亮的文件将遵循Eslint和Prettier规则的格式，但优先考虑Eslint。

这样，您只需要一个文件（eslint配置文件）即可配置Eslint和Prettier。

Answer 4

我有一个类似的问题。要解决此问题，请进入更漂亮的扩展名设置，然后查找“打印宽度”。我的被​​设置为“ 80”。我将其更改为“ 100”，并在保存文件后将它们全部放入一行。您可以将宽度更改为所需的宽度。

Answer 5

如果 Prettier 未显示在您的 VS Code 设置中，则扩展可能已无声无息地崩溃，这种情况经常发生在更改多个位置的设置（即，工作区和设置中的标签大小已更改）。

重启VS Code，再次搜索Prettier，这次应该会出现:)

Answer 6

Prettier和Beautify之类的插件无法为您提供对样式的太多控制。 它们很容易使代码保持一致：)

我更喜欢eslint plugin。
然后，您可以定义自己的eslint.json规则。

（或像其他人一样使用airbnb's掉毛规则）。

然后，您可以使用"eslint.autoFixOnSave": true之类的设置。然后您的代码将按照保存时的规则进行相应格式化：）