vue-cli创建的项目使用eslint+prettier格式化的问题

vue-cli创建的项目使用eslint+prettier格式化的问题

背景

项目框架：Vue CLI 4 创建，使用了ESLint。

IDE：Vscode

IDE插件：ESLint 、 Prettier

Prettier 格式化快捷键：Alt + Shift + F

现象

在格式化非 HTML 原生标签时出现换行问题，例如：

<el-button
  size="mini"
  typf="primary"
  @click="
    openRouter({
      name: 'name',
      path: 'pathfF'
    })
  "
  >Element Button</el-button
>

标签的>会跑到下一行。

解决方法1：手动调整

将上面的代码手动调整为：

<!-- 手动将结束标签另起一行 -->
<el-button
  size="mini"
  typf="primary"
  @click="
    openRouter({
      name: 'name',
      path: 'pathfF'
    })
  "
  >Element Button
</el-button>

<!-- 手动将内容另起一行 -->
<el-button
  size="mini"
  typf="primary"
  @click="
    openRouter({
      name: 'name',
      path: 'pathfF'
    })
  "
>
  Element Button
</el-button>

以上情况再格式化时不会出现>另起一行的情况。

解决方法2：配置 prettier

网上找的解决办法是配置 prettier 的 HTML空白灵敏度：

{
  // htmlWhitespaceSensitivity：css|strict|ignore
  // ignore 对空白不敏感
  "htmlWhitespaceSensitivity": "ignore"
}

设置的位置众说纷纭：

1. 在 vscode配置文件中配置 ：settings.json

{
  prettier.htmlWhitespaceSensitivity": "ignore"
}

为了确认配置生效，重载IDE。

重新格式化 “丑陋” 的代码，没有变化。

2. 安装 vetur 并配置它的html格式化工具为 prettier

{
  "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {
            "htmlWhitespaceSensitivity": "ignore"
        }
    },
}

没有变化。

3. 在prettier配置文件中配置

于是先创建了一个.prettierrc.js并配置

module.export = {
  "htmlWhitespaceSensitivity": "ignore"
}

没有变化，然后将其改为json格式的 .prettierrc

{
  "htmlWhitespaceSensitivity": "ignore"
}

成功格式化。。。（心里一万句。。。）

其他尝试

使用Vue CLI4新建项目，选择 ESLint + Prettier。

eslint配置文件中增加了扩展@vue/prettier。

不过它只是用于校验代码风格，智能提示。

并不会影响格式化操作的结果。

总结

项目中使用prettier格式化时，最好新建一个配置文件，并且是.prettierrc，不是.prettierrc.js。

当前时间 2020-07-24

“丑陋” 的原因

文本内容单独占行，左右会增加两个空格（换行），渲染到页面就是空格，为避免多余的空格，将标签紧贴文本。

<div class="node1">干净的文本</div>
<div class="node2">
  前后有空白的文本
</div>

<script>
  var node1 = document.querySelector('.node1')
  var node2 = document.querySelector('.node2')

  function getTextProps (node) {
    return {
      textContent: node.textContent,
      innerHTML: node.innerHTML,
      innerText: node.innerText
    }
  }
  console.log(getTextProps(node1))
  console.log(getTextProps(node2))
</script>

textContent 打印结果：

// node1
// "干净的文本"

//node2
// "↵      前后有空白的文本节点↵    "