Vue @click="show = true" error Replace `show·=·true` with `(show·=·true)` eslint(prettier/perttier)

error @click="show = true" fix @click="(show = true)"

.eslintrc.js

module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:vue/strongly-recommended',
    'standard',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['simple-import-sort', 'import'],
  rules: {
    'simple-import-sort/imports': 'error',
    'simple-import-sort/exports': 'error',
    'import/newline-after-import': 'error',
    'vue/multi-word-component-names': 'off',
  },
}

.prettierrc.js

/** @type {import('prettier').Config} */
module.exports = {
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  trailingComma: 'all',
  endOfLine: 'auto',
  htmlWhitespaceSensitivity: 'ignore',
  overrides: [
    {
      files: '*.json',
      options: {
        trailingComma: 'none',
      },
    },
  ],
}

version "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", "prettier": "^3.3.2",

What are the rules of prettier?

In prettier v3.4.0 there is an issue with the formatting of the event handlers. If you have the following code:

<button @click="show = true"></button>

Prettier wants to format it to:

<button @click="(show = true)"></button>

This is a bug which was fixed with v3.4.1, see the changelog. After updating the prettier version, prettier should not complain anymore about the format.