更好的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 Code菜单)
2. 设置窗口应该打开.上方(顶部)有一个搜索.输入"漂亮"
3. 您应该看到可用的Prettier设置.你可以修改它们:)

Answer 2

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

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

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

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

Answer 3

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

我做了以下设置.vscode/settings.json

1. .prettierrc.json在项目根目录中创建文件
2. 已安装npm install --save-dev prettier

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

.vscode/设置.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 取消选中它，然后就完成了。