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

我在 VS Code 中遇到格式化问题。它正在从 Prettier 获取扩展设置。

我做了以下设置

.vscode/settings.json

1. 在项目根目录中创建

   .prettierrc.json

   文件
2. 已安装

   npm install --save-dev prettier

这些设置在 VS Code 中对我有用。

.vscode/settings.json

{
 "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,  
  "prettier.useEditorConfig": false,
  "prettier.useTabs": false,
  "prettier.configPath": ".prettierrc.json",
}

.prettierrc.json

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
}

Answer 4

ctrl + ,

粘贴 -->

Prettier: Require Config

取消选中它，然后就完成了。

Answer 5

我也有类似的问题。要解决此问题，请进入更漂亮的扩展设置并查找“打印宽度”。我的设置为“80”。我将其更改为“100”，保存文件后，所有内容都适合一行。您可以将宽度更改为您想要的任何宽度。

Answer 6

这两个步骤帮助我正确设置

.prettierrc

文件

1- 转到 VsCode 设置并检查

formate on save

2- 转到 VsCode

settings.json

并设置 defaultFormatter

"editor.defaultFormatter": "esbenp.prettier-vscode"

Answer 7

如果 Prettier 没有出现在您的 VS Code 设置中，则扩展程序可能已悄然崩溃，这种情况在多个位置更改设置时经常发生（即在工作区和设置中更改选项卡大小）。

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

Answer 8

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

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

Answer 9

在 vscode 的 settings.json 中

    "prettier.configPath": "frontend/.prettierrc",

或者在用户界面中

这允许您从根目录工作，并且仍然从子文件夹中使用 prettier

Answer 10

打开settings.json 更改“prettier.printWidth”：50 至 300 或 400 保存

更改前：

<div
                class="w-1/2 p-8 flex flex-col justify-center"
            >
                <h5
                    class="text-xl font-semibold text-gray-700"
                >
                    Masuk untuk memulai
                </h5>
                <h1
                    class="text-3xl font-bold text-gray-800 mt-2"
                >
                    Selamat datang!
                </h1>
</div>

申请后

"prettier.printWidth": 400

:

            <div class="w-1/2 p-8 flex flex-col justify-center">
                <h5 class="text-xl font-semibold text-gray-700">Masuk untuk memulai</h5>
                <h1 class="text-3xl font-bold text-gray-800 mt-2">Selamat datang!</h1>
</div>