Vuejs 中的 ESLint + Prettier 警告答案

【问题标题】：ESLint + Prettier warning in VuejsVuejs 中的 ESLint + Prettier 警告
【发布时间】：2020-07-21 07:19:12
【问题描述】：

我在我的 Vuejs 项目中安装了 ESLint + Prettier。保存文件会导致 prettier 抛出以下警告。非常感谢有人能解释导致此警告的原因。

"Replace `·:to=\"{·name:·'About',·query:·{·lang:·$i18n.locale·}·}\"·tag=\"button\">About</router-link` with `⏎········:to=\"{·name:·'About',·query:·{·lang:·$i18n.locale·}·}\"⏎········tag=\"button\"⏎········>About</router-link⏎······`"

vuejs 文件：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>|
      <router-link
        :to="{ name: 'About', query: { lang: $i18n.locale } }"
        tag="button"
      >
        About
      </router-link>
      <p>{{ $route.query.lang }}</p>
      <h2>{{ $i18n.locale }}</h2>
    </div>
    <router-view />
  </div>
</template>

.prettierrc.js:

module.exports = {
  singleQuote: true,
  semi: false
}

.eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'prettier/prettier': ['error']
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

【问题讨论】：

它似乎在抱怨新行中的空格/制表符。您是否尝试过运行 yarn lint --fix 来检查是否可以修复它并查看有什么区别？
当我运行 yarn 命令时，它给了我“没有发现 lint 错误！”。但是，我的代码中仍然有警告

标签： vue.js visual-studio-code eslint prettier

【解决方案1】：

您观察到的换行是由 Prettier 的核心格式完成的。您可以通过将最大线宽 (printWidth) 设置为大于 80 来避免它。

使用以下配置 Prettier：

// <root>/.prettierrc.js
module.exports = {
  printWidth: 200, // max number of characters per line (default: 80)
}

并配置 ESLint 的 prettier/prettier 选项：

// <root>/.eslintrc.js
const prettierOptions = require("./prettierrc");

module.exports = {
  rules: {
    "prettier/prettier": ["error", prettierOptions],
  },
};

【讨论】：