vscode 更漂亮的设置

Posted 2023-02-22

【中文标题】vscode 更漂亮的设置

【英文标题】：prettier settings for vscode

【发布时间】：2018-12-01 04:24:14

【问题描述】：

我最近换了一台新电脑，但很难进行更漂亮的设置。 （我认为它更漂亮，可能是 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'

【问题讨论】：

Nvm。与“美化”扩展有关。 marketplace.visualstudio.com/…

【参考方案1】：

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

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

【讨论】：

对我来说，Prettier 没有出现在列表中，但我的代码仍然由它格式化……你知道为什么我在列表中看不到它吗？

你没有回答问题！！ @nikhil Patel 的回答确实对我有用！

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority) ：来自更漂亮的详细信息页面。所以你只需要编辑 VScode 编辑器设置，Prettier 会自动选择它们

@P.Lorand，您可能正在使用“Prettier-Standard”扩展；卸载它并安装“Prettier - Code Formatter”

【参考方案2】：

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

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

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

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

【讨论】：

这里是链接prettier.io/docs/en/configuration.html

【参考方案3】：

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

【参考方案4】：

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

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

【参考方案5】：

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

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

【参考方案6】：

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

【参考方案7】：

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

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

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

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

【讨论】：

“像 Prettier 和 Beautify 这样的插件并不能让您对样式进行太多控制。它们很适合以简单的方式使代码保持一致 :)”-1 表示错误的表达式！跨度>