🐛 vue formatter does not recognize vue magic

[rotu]

Environment information

CLI:
  Version:                      1.7.3
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           windows

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         unset
  JS_RUNTIME_VERSION:           "v20.13.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         unset

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 true

Workspace:
  Open Documents:               0

What happened?

I'm trying to use Biome on Vue3 files and I get some lint/correctness/noUnusedVariables errors on defineProps, defineEmits, defineExpose.

Per the vue docs, these are not actually global functions but macros for the vue compiler.

Expected result

These (and other vue "magic") should not throw an error or there should be some recommendation for how to handle this gracefully.

My current workaround is to put this in the biome.json file. Note this does not detect whether it's in a <script setup> nor the targeted vue version, both of which affect the existence of these macros.

   "overrides": [
      {
         "include": ["*.vue"],
         "javascript": {
            "globals": [
               "defineEmits",
               "defineProps",
               "defineExpose",
               "defineModel",
               "defineOptions",
               "defineSlots"
            ]
         }
      }
   ]

Code of Conduct

• I agree to follow Biome's Code of Conduct

[ematipico]

Your solution is the correct approach. We suggest this caveat for other files too. Would like to send a PR to the website to document it?

[rotu]

I dislike the workaround and don't love the idea of enshrining it. It's superficial (e.g. it shouldn't but does allow x = defineEmits) and can't provide many of even more semantic checks currently only available in vue-plugin-eslint, e.g. https://eslint.vuejs.org/rules/valid-define-emits.html

Maybe we should just capture this issue for now as low-hanging fruit for when a plugin API debuts.

[ematipico]

I can accept a PR to add these globals when the file is vue

[dyc3]

I'd like to give this a shot.

[dyc3]

Minor update: I haven't been able to get noUnusedVariables to trigger for this, but it does trigger noUndeclaredVariables (which makes a little more sense).

I have a prototype that technically works, but it's a hack in biome_analyze, which is supposed to be language agnostic, so I haven't posted the PR yet. I'm a little bit stumped on where the right place for this would be.

[ematipico]

The fix should be applied to this function

https://github.com/biomejs/biome/blob/main/crates%2Fbiome_service%2Fsrc%2Ffile_handlers%2Fjavascript.rs#L817-L820