Coding standards and naming conventions used by Myosotis. These standards are based on the PHP, Laravel and Vue3 recommendations.
- php - https://github.com/php/php-src/blob/master/CODING_STANDARDS.md
- PSR-12 - https://www.php-fig.org/psr/psr-12/
- php FIG - https://www.php-fig.org/bylaws/psr-naming-conventions/
- Laravel - https://laravel.com/docs/11.x/contributions#coding-style
- Vue3 - https://vuejs.org/style-guide/
- Spatie.be - https://spatie.be/guidelines/laravel-php#content-views
Laravel
app/
config/
resources/js/
storage/logs/
Laravel
When a folder is referring to a component/model/class it uses PascalCase
app/Actions/
app/Console/
resources/js/components/Modals/
For other folders, not referring to model/class it uses lowercase
database/factories/
resources/js/components/
Laravel
When a file is referring to a model/class it uses PascalCase
app/Actions/CreateNewUser.php
app/Console/Kernel.php
For other folders, not referring to model/classes it uses lowercase
config/broadcasting.php
Filenames of Single-File Components should either be always PascalCase or always kebab-case.
ALERT: Component names MUST BE multi-worded. This is to avoid possible confusion with html elements, which are always single-worded
Bad: <Modal />
Good: <ConfirmModal />
Base components (a.k.a. presentational, dumb, or pure components) that apply app-specific styling and conventions should all begin with a specific prefix, such as Base, App, or V.
<BaseModal />
Child components that are tightly coupled with their parent should include the parent component name as a prefix.
components/TodoList/
- TodoList.vue
- TodoListItem.vue
- TodoListItemButton.vue
Component names should start with the highest-level (often most general) words and end with descriptive modifying words.
- BaseModal
- ModalConfirm
- ModalConfirmButtons
Components with no content should be self-closing in Single-File Components, string templates, and JSX - but never in in-DOM templates.
<ModalConfirm />
<!-- In in-DOM templates -->
<my-component></my-component>
In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
const props = defineProps({
status: String
})
Prop names should always use camelCase during declaration. When used inside in-DOM templates, props should be kebab-cased. Single-File Components templates and JSX can use either kebab-case or camelCase props.
const props = defineProps({
greetingText: String
})
// for SFC - use consistent casing
<WelcomeMessage greeting-text="hi"/>
// or
<WelcomeMessage greetingText="hi"/>
Elements with multiple attributes should span multiple lines, with one attribute per line.
Use prettier in VS Code
<MyComponent
foo="a"
bar="b"
baz="c"
/>
JS: camelCase
.env : SCREAMING_SNAKE_CASE
class="custom-control-label my-auto"