6789 - VS Code: Go-to-Definition for Global Vue Components

[n-lark]

Description

Sets up VS Code tooling to improve the developer experience when working with Vue components.

1. Adds a components.d.ts declaration file so Volar (Vue - Official) can resolve globally registered ff-* components to their source files, enabling go-to-definition and autocomplete in templates.
2. Adds a jsconfig.json so Volar discovers the frontend source.
3. Updates .eslintrc to ignore .d.ts files so ESLint doesn't try to parse them with the JS parser.

Full description here.

Related Issue(s)

Resolves #6789

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass

This is a config setup change. Please let me know if I should be running any tests!

• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.65%. Comparing base (d958009) to head (84523f8).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6790   +/-   ##
=======================================
  Coverage   76.65%   76.65%           
=======================================
  Files         398      398           
  Lines       20108    20108           
  Branches     4844     4844           
=======================================
  Hits        15414    15414           
  Misses       4694     4694           

Flag	Coverage Δ
backend	76.65% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cstns]

Tested locally with a fresh install of vscode. Felt awfull the entire time, like I was cheating on my IDE with another IDE.

There's a slight discrepancy between global registered components and locally registered ones, in that cmd/ctrl + click takes you straight to the component when clicking on a global one and you have to multiple click your way through the locally registered one, but not a blocker still a massive improvement on what we had before.

[cstns]

Not a big fan of manually declaring global components but it does the job. We'll just need to be mindful moving forward and keep this list in sync with any future global components

[cstns]

Holding off on merging.

@Steve-Mcl, could you give this a quick spin and check usability? your VSCode foo is better than mine