Prestashop: Case style conventions

[sarjon]

Recently we've been having quite a few discussions on multiple PRs regarding case style (camelCase, snake_case or kebab-case) used in code, for example:

1. What style do we use for HTML id attribute?
2. What style do we use for JSON we send to API?

To avoid wasting time on discussing and fixing these kind of issues, I suggest updating dev docs with whatever convention we choose for PS code base.

[sarjon]

@matks wdyt?

[matks]

Yes, it's a good thing to discuss and decide it now

ping @PierreRambaud

[zuk3975]

Not sure if its the right place, but we could also decide yaml files ident.

[matks]

OK, here's my suggestions:

YAML files indent: 2 spaces
JSON payloads to API and JSON responses: snake_case
HTML class and ids: kebab-case

No logic behind that, it just seems to be the most popular standards to me

[matks]

ping @PrestaShop/prestashop-core-developers

[sarjon]

HTML class and ids: kebab-case

By default, Symfony Form component renders form elements with snake_case ids.

[matks]

ping @jolelievre @PierreRambaud

[PierreRambaud]

OK, here's my suggestions:

YAML files indent: 2 spaces
JSON payloads to API and JSON responses: snake_case
HTML class and ids: kebab-case

No logic behind that, it just seems to be the most popular standards to me

Same as @matks, this is the most popular.
Plus, 2 spaces for HTML, JS & CSS (as airbnb guide style, one of the most used in VueJs community)

[Progi1984]

Note :notebook: :

• Airbnb JavaScript Style Guide
• Airbnb CSS / Sass Styleguide

Not found for HTML

[Progi1984]

For XML files, indent ?
Actually, it is tabs (Example).

[zuk3975]

About the JSON API snake_case.
Currently we mostly use it for private api requests. For this reason I suggest using camelCase.

1. Symfony has native serializer which can be used directly in controller for php DTO's with $this->json. We wouldn't need to have custom serializer configuration so it would save couple code lines in each response.
2. We get camelCased objects in js, which is what we want in javascript.

[PierreRambaud]

@zuk3975 FYI, Symfony is also able to return snake case for response with $this->json it's configurable. But we can get inspired from what google do and take camelcase as you suggest: https://google.github.io/styleguide/jsoncstyleguide.xml?showone=Property_Name_Format#Property_Name_Format

[zuk3975]

OK, here's my suggestions:

YAML files indent: 2 spaces
JSON payloads to API and JSON responses: snake_case
HTML class and ids: kebab-case

No logic behind that, it just seems to be the most popular standards to me

According to this, I've been following YML 2 spaces for a while, but recently it was updated to 4 here https://github.com/PrestaShop/PrestaShop/pull/20324, so I guess thats what we follow now :smile:

[PierreRambaud]

ping @NeOMakinG if you have any idea :)

[NeOMakinG]

HTML ids and classes => kebab-case
JS vars => camelCase

It seems to be the most used, bootstrap use kebab-case everywhere, Vue seems to use camelCase everywhere !

Hope @PrestaShop/prestashop-maintainers agree

[Progi1984]

@NeOMakinG This is documented ?

[NeOMakinG]

I think the only thing documented is that we follow bootstrap best practice for html/css