Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Usage of directive shorthand syntax #1955

Closed
MarcusTXK opened this issue Mar 19, 2023 · 2 comments · Fixed by #2290
Closed

Usage of directive shorthand syntax #1955

MarcusTXK opened this issue Mar 19, 2023 · 2 comments · Fixed by #2290
Assignees
@JoanneHing
Labels
a-CodeQuality a-FrontEnd d.FirstTimers

Comments

@MarcusTXK
Copy link
Member

MarcusTXK commented Mar 19, 2023 •
edited
Loading

What feature(s) would you like to see in RepoSense

Removal of explicit directives will help to make the code less verbose and will follow Vue's Style Guide strongly recommended rules for directive shorthands. For the .vue files, let's adopt the following rules of using directive shorthands:

  • : for v-bind:
  • @ for v-on:
  • # for v-slot

Example: Removal of explicit v-bind directive, such as replacing <div v-bind:id="dynamicId"></div> with <div :id="dynamicId"></div> syntax instead.
@ckcherry23
Copy link
Member

For the .vue files, we are currently following the rule of using directive shorthands (: for v-bind:, @ for v-on: and # for v-slot) always or never (we are never using it). Hence, adopting the directive shorthand for v-bind will mean we change v-on and v-slot as well.

While the directive shorthands can make the code less verbose, their purpose may still be unclear to new contributors. So, I think we should discuss the pros and cons before anyone takes up this issue.

@MarcusTXK
Copy link
Member Author

Good catch! Let me update this issue to make it more general to update all notations to use shorthand.

I definitely agree that it might make it less clear to people who are new to Vue, but I feel that the learning curve for the shorthands should be quite manageable. The main motivation behind this change was as I saw that the Vue guide stated that they would use shorthand syntax in code examples, as that's the most common usage for Vue developers, so it might be a good idea to follow the common standard.

@MarcusTXK MarcusTXK changed the title Replace v-bind usage with dedicated shorthand syntax Usage of dedicated shorthand syntax Mar 20, 2023
@MarcusTXK MarcusTXK changed the title Usage of dedicated shorthand syntax Usage of directive shorthand syntax Mar 20, 2023
@HCY123902 HCY123902 moved this to For contributors in RepoSense Roadmap Mar 20, 2023
@JoanneHing JoanneHing self-assigned this Feb 10, 2025
@JoanneHing JoanneHing mentioned this issue Feb 10, 2025
Merged
sopa301 pushed a commit that referenced this issue Feb 15, 2025
@JoanneHing
[#1955] Usage of directive shorthand syntax in .vue files (#2290)
1c4706a 
Use directive shorthands in .vue files

This refactor removes explicit Vue directives and replaces them with
shorthand syntax, following Vue's Style Guide practices to improve
readability and reduce verbosity.

Changes include:
- Using `:` instead of `v-bind:`
- Using `@` instead of `v-on:`
- Using `#` instead of `v-slot`
@github-project-automation github-project-automation bot moved this from For contributors to Closed/Completed in RepoSense Roadmap Feb 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@JoanneHing JoanneHing

Labels
a-CodeQuality a-FrontEnd d.FirstTimers
Projects
RepoSense Roadmap
Status: Closed/Completed
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[#1955] Usage of directive shorthand syntax in .vue files JoanneHing/RepoSense
3 participants
@MarcusTXK @ckcherry23 @JoanneHing