vscode 更漂亮的设置

Question

我最近换了一台新电脑，但很难进行更漂亮的设置。 （我认为它更漂亮，可能是 eslint）。

这个 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 的 Prettier 设置的人。步骤如下：

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

Answer 2

配置更漂亮设置的新方法：

1. 在项目文件夹的根目录下，创建一个新的配置文件（我建议将其命名为“.prettierrc.json”或仅命名为“.prettierrc”）
2. 在那个新文件中，添加 json 自定义设置：我对 JS 的首选设置如下：

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

我建议在您的每个项目中执行此操作，包括在任何源代码管理中，这样每次拉取存储库都会自动为该开发人员的 prettier 实例设置一些基本设置。

Answer 3

我遇到了类似的问题。要解决此问题，请进入您更漂亮的扩展设置并查找“打印宽度”。我的设置为“80”。我将其更改为“100”，并且在保存文件后它都适合一行。您可以根据需要更改宽度。

Answer 4

如果 Prettier 没有显示在您的 VS Code 设置中，则扩展程序可能已经默默地崩溃了，这经常发生在多个位置更改设置时（例如，工作区和设置中的选项卡大小发生更改）。

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

Answer 5

在项目目录中创建 .prettierrc 文件，并使用以下代码。

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

Answer 6

ctrl + , 粘贴 --> Prettier: Require Config 取消选中它，然后全部完成。

Answer 7

像Prettier 和Beautify 这样的插件不能让您对样式进行太多控制。 它们很适合以简单的方式使代码保持一致:)

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

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

然后您可以使用"eslint.autoFixOnSave": true 之类的设置。然后您的代码将根据您的保存规则格式化:)