Subscribe on changes!

<script setup> Prettier phantom bugs, maybe compilation time related bug?

avatar
Oct 30th 2021

Version

3.2.20

Steps to reproduce

When i try to use <script setup> by tutorial here https://www.youtube.com/watch?v=SMGdokqKEuY then prettier see there some phantom bugs, not even prettier-ignore helps

count.vue file

<template>
  <div>before {{ count }} after</div>
</template>

<script setup>
// prettier-ignore
// eslint-disable-next-line no-undef,no-unused-vars
const props = defineProps({
  initialCount: {
    type: Number,
    default: 0
  }
})

const { count } = { count: props.initialCount }
</script>

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {
    'vue/no-v-html': 0,
    'vue/valid-template-root': 0,
    'vue/order-in-components': 1,
    'no-console': 0,
    'space-before-function-paren': 0,
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto'
      }
    ]
  }
}

.prettierrc

{
  "trailingComma": "none",
  "semi": false,
  "singleQuote": true,
  "proseWrap": "never",
  "endOfLine": "auto"
}

What is expected?

There should be no bug

What is actually happening?

   5:8   error  Delete `·`                                    prettier/prettier
   6:7   error  Identifier '__sfc_main' is not in camel case  camelcase
   6:22  error  Delete `;`                                    prettier/prettier
  12:2   error  Delete `;`                                    prettier/prettier
  18:10  error  Replace `⏎····count⏎·` with `·count`          prettier/prettier
  22:4   error  Delete `;`                                    prettier/prettier
  25:4   error  Delete `;`                                    prettier/prettier
  26:2   error  Delete `;`                                    prettier/prettier
  28:16  error  Identifier '__sfc_main' is not in camel case  camelcase
  28:26  error  Delete `;`                                    prettier/prettier

I'm using nuxt 3 with bridge, but i don't think that matters. It works well without Prettier of course. Thank you for any help.

avatar
Oct 30th 2021

This is not a valid bug report. It also doesn't seem to be related to Vue?

avatar
Oct 31st 2021

@posva could you at least write me a hint on how to fix this or at least make ignore this errors?

If I'm right that prettier check this after compilation-time, is even possible to fix this?