Vuejs 中的 ESLint + Prettier 警告

Question

I have installed ESLint + Prettier in my Vuejs project. Saving files causes the prettier to throw the following warning. Much appreciated if someone could explain what causes this warning.

"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⏎······`"

The vuejs file:

<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
      }
    }
  ]
}

Answer 1

The line-wrapping you're observing is done by Prettier's core formatting. You can avoid it by setting the max line width ( printWidth ) to something longer than 80.

Configure Prettier with:

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

And configure ESLint's prettier/prettier options:

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

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