visual-studio-code - 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'

score 74 · Accepted Answer

对于那些试图快速更改VS Code 的Prettier 设置的人。以下是步骤：

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

score 31 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

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

于 2021-12-12T21:27:34.113 回答

score 0 · Accepted Answer

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

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

score -21 · Accepted Answer

插件喜欢Prettier并且Beautify不为您提供对样式的非常多的控制。它们很适合以简单的方式使代码保持一致:)

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

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

然后，您可以使用诸如"eslint.autoFixOnSave": true. 然后您的代码将根据您的保存规则格式化:)

visual-studio-code - vscode 更漂亮的设置

7 回答 7

Related

Reference