预防更漂亮的将箭头函数形成多行

Question

当我使用vscode在vue.js中编写箭头函数时，我会得到出乎意料的表演。

我希望在自动构建箭头功能时更改更漂亮的设置。

表明：

<input type="file" @change="(event) => { files = event.target.files; }" accept=".csv" />

可接受的：

<input 
    type="file"
    @change="(event) => {files = event.target.files;}"
    accept=".csv" 
/>

实性：

<input
    type="file"
    @change="
        (event) => {
            files = event.target.files;
        }
    "
    accept=".csv"
/>

我做了一些研究，发现已经要求此功能：

https：//github.com/prettier/prettier/issues/4125

Answer 1

更改为Prettier（Https：//github.com/prettier/prettier/pull/6685，），并于2020年在Prettier 2.0中发行。 (https://prettier.io/blog/2020/03/21/2.0.0.html#improved-method-chain-breaking-heuristic-6685httpsgithubcomprettierprettierpull6685-by-mmkalhttpsgithubcommmkal

)

但要看一下您提供的示例，显然它仍然无法正常工作：/ 如果有任何选择，可以配置这种行为，它将在这里进行： https：//prettier.io/docs/en/options.html

但是我还没有找到对您的案例有帮助的任何东西。 在我看来，您现在唯一可以做的就是使用

<!-- prettier-ignore -->

..在您的行之前。您可以在此处阅读有关HTML中忽略的更漂亮的更多信息： https：//prettier.io/docs/en/ignore.html#html

这里的主要问题是箭头功能主体中的支括号。如果您在体内调用单个功能，则可以简单地执行类似的操作：

<button @click="(event) => doSomething(event)">Do something</button>

<!-- In Vue, you can also use this shorter syntax -->
<button @click="doSomething($event)">Do something</button>

在省略括号的顺序中，您需要从箭头函数返回单个

Answer 2

（请检查

MDNdocs

以获取更多信息）。这篇文章

很好地解释了表达方式的定义。关键要点是：

an and表达是代码的片段，可评估为value 由于变量分配是一个表达式，您可以省略牙套（Prettier会在箭头功能的身体周围添加括号，以使其更清楚地表明这是一件事）。 Prettier以不同的方式对待这种情况，并且应该在同一条线上渲染，只要您不超过printWidth。以下是一些具有默认漂亮设置的示例，除了

printWidth

设置为120：

<!-- Without braces (Prettier will add the parentheses) -->
<button @click="() => (someVariable = 'New value')">Assign a value to a variable</button>
<button @click="() => (true ? doSomething() : doSomethingElse())">Ternary operator</button>

<!-- Braces -->
<button
  @click="
    () => {
      someVariable = 'New value';
    }
  "
>
  Assign a value to a variable
</button>
<button
  @click="
    () => {
      true ? doSomething() : doSomethingElse();
    }
  "
>
  Ternary operator
</button>

注 这些例子只是为了说明更漂亮的处理方法。在VUE中，您实际上可以做

@click="someVariable = 'New value'"

，但是在某些其他框架中，您可能需要完整的箭头功能。根据需要适应您的框架，但是漂亮的行为应该相似。

为什么箭头函数在更漂亮的情况下是多行，这绝对是由于使用卷曲括号。

如果您希望箭头功能保持单线，则需要卸下卷曲括号。

const foo = (bar) => return something

也是，如果您的单行箭头函数超过了更漂亮的默认宽度设置-PrintWidth属性（默认值80）。它还将包装您的单线箭头功能。如果发生这种情况，您只需在项目的根部添加.prettierrc文件（以JSON格式），然后使用自定义值调整属性。