Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

background

The Vue3 + TS best practices already provide best practices written at the component level, but more fine-grained code specifications are needed to guide practice development. This article is based on the style guide on Vue3’s website, because the original version is a bit too much and the standard is not strict enough for wider adaptability. So this article has made changes in classification and severity, after reading this article, or suggest to read the official document again, so conscience of the document, few see.

The body of the

The following specifications are based on Vue3 + TS best practices.

Component (file) name

  1. Use by all componentsSFC 或 TSXFormal writing;
  2. SFCThe sequence of labels in<script>,<template>,<style>;
  3. Everything associated with component names (component names, file names, and use in templates) must have a large humpPascalCaseForm;
  4. Use more than one wordHTML(future) component conflicts;
  5. Only one component is allowed in a file;
  6. A child component tightly coupled to the parent component, named asPrefix with the name of the parent componentExample:TodoList,TodoListItem,TodoListItemButton, as shown in theTightly coupled component names are highly recommended;
  7. General description, special description, e.g.SearchButtonClear,SettingsCheckboxLaunchOnStartup, as shown in theThe order of words in component names is highly recommended
  8. Use full words rather than abbreviations, as long as your editor is configured to make writing long names cheap.

Attributes related to

  1. defineProps,defineEmitsWant to useType declarationRather than a runtime declaration;
  2. Used when props is declaredcamelCase, but used when used in templateskebab-case, as shown in theProp named
  3. Must be forv-forSet up thekeyAnd try not to use itindex;
  4. v-if 和 v-forProhibit simultaneous presence on the same component.
  5. Always use the instruction abbreviation, i.e:,@,#, in addition tov-bind="obj"This is the case.

other

  1. Avoid element selectors in scoped. See element selectors in scoped-.
  2. Prohibited in codethis.$parent,this.$rootCode to access ancestor components to prevent data flow chaos;
  3. usehooksInstead ofHOC(Advanced components) andrenderProps;
  4. hooks,utils,constants,typesFiles, such as the nearest (as deep as possible) storage, when necessary to do directory upgrade;
  5. For other front-end generic specifications that are not specific to Vue, see front-end code specifications that Lint cannot address;

conclusion

Although there are costs associated with learning and adapting to specifications, a unified specification can greatly reduce communication and maintenance costs for a team. And the more familiar you are with the mainstream specifications in your industry, the better it is to read open source projects. Similarly, self-written projects that meet mainstream norms are more likely to be accepted by others. In short, the more strictly you follow the specification in normal development, the greater the benefit to the future. Of course, the cost of habit will be higher, but it is worth it.

“If the door is closed, out of the rut, no difference.” — Song · Shen Zuozhe “Apartment Volume 7