Created convention file for frontend and adjusted current project files #277

Merged
bema merged 4 commits from bema/convenctions into master 2024-01-04 08:17:46 +01:00
Showing only changes of commit 660c250ad8 - Show all commits

View File

@@ -47,28 +47,38 @@ npm run lint
## Structure of Vuejs 3 components and views in this project
For this document's needs components and views will be named "modules" even though this is not a correct term for these files officialy.
For this document's needs components and views will be named "modules" even though this is not a correct term for these files officially.
### Main structure
Each file should start with \<script\> tag followed by \<template\> tag. If \<style\> tag is used (which should be avoided, this project uses Tailwind CSS for styling) it should be placed at the end of the file.
- \<script\>
- \<template\>
- \<style\> - if really needed
### Scripts
Elements should be placed in this order:
- Props - constant defined by defineProps function
- Emits - constant defined by defineEmits function
- Refs - contstans defined by ref functions with appropriate values
#### Elements should be placed in this order:
- Props - constant defined by defineProps function, named "props" in code
This name allows to have readable code sending data to parent module:
```TS
props.exampleProp
```
- Emits - constant defined by defineEmits function, named "emit" in code. This name allows to have readable code sending data to parent module:
```TS
emit("update:modelValue", exampleVariable)
```
- Refs - constants defined by ref functions with appropriate values
- Other functions
Rules regarding functions:
#### Rules regarding functions:
- Functions ought to have descriptive name
- Ought to do one thing. ie. function fetchRequest should send request, but not prepare request body
- Ought to do one thing. ie. function sendRequest should send request, but not prepare request body or process response data
- In practice, if function has more than 10 SLoC, it probably should be split
- DO NOT use "any" type. Just don't.
- Function used in current function should be placed below it (if posible, as function can be called from many places in the code)
-
- Function used in other function should be placed below it (if posible, as function can be called from many places in the code)
Rules regarding variables and refs:
-
#### Rules regarding variables and refs:
- Variables ought to have descriptive name

DO NOT use "any" type. Just don't. *optional

DO NOT use "any" type. Just don't. *optional
In cases not covered in this convention, TypeScript, VueJS 3 conventions and good programming practices are applied