qwikifiers/qwik-style-guide

A Style Guide For Qwik

Qwik Style Guide

Coding style guides are usually written after years of experience, lessons learned and feedback from real and big projects using a specific technology.

Qwik is a new and revolutionary framework and because of that, many best practices are still being discovered as more Qwik apps are being built.

This guide is meant to serve as an ever evolving document, where best practices are being suggested, debated and added by Qwik community members.

The aim is to potentially "graduate" the most popular / agreed upon rules into the official Qwik docs and / or as rules for the Qwik ESLint plugin.

Table of Contents

• File Naming
  • Use kebab-case for files
• Variables Naming
  • "Sig" Suffix for Signals
• Tasks
  • Tasks named functions
• Translations
• Inspirations & Credits
• License

generated with DocToc

File Naming

Use kebab-case for files

• Use the kebab case for file names

Why? 🤔

To keep things consistent across the entire project.

This is not a must rule, but whatever convention you use, stick with it.

Example

/* avoid */

src/
  components/
    MyComponent.tsx

Pay attention to the file name below

/* recommended */

src/
  components/
    my-component.tsx

Variables Naming

"Sig" Suffix for Signals

• Use the Sig suffix for signals variable names

Why? 🤔

To make the component code more "Scannable"

Example

/* avoid */

const counter = useSignal(0);

Use the Sig suffix for signals variable names.

/* recommended */

const counterSig = useSignal(0);

Back to top

Tasks

Tasks named functions

• Use regular named functions instead of arrow functions for tasks and visible tasks.

Why? 🤔

When having several tasks inside a component, it's hard to understand what is each task doing without reading its implementation.

So having a regular function gives a name for the task describing its responsibility.

Plus, it helps when debugging to see a named function in the call stack.

Example

/* avoid */

useTask$(()=>{ 
  // some code that should run when the component is created
});

Give a descriptive name for the task callback function:

/* recommended */

useTask$(function initTask(){ 
  // some code that should run when the component is created
});

Back to top

Translations

If you want to translate this style guide, please feel free to submit a PR with a markdown file under translations folder .md file with the relevant locale (for example: es-ES.md)

Inspirations & Credits

This style guide structure is inspired by the Angular Style guide and the Vue Style Guide.

License

MIT

(Feel free to use it, attributions are appreciated 😊)