Application Todo

Objectif

Notre objectif final est de développer une application de gestion des tâches paramétrable, organisée autour de deux pages :

• Page tâches : présentant la liste des tâches et permettant leur édition (ajout, modification, suppression)

• Page paramètres : Permets de modifier les paramètres de l'application (format de l'heure et mode d'affichage des tâches) et d'accéder à des informations supplémentaires.

Nouveau projet Quasar

Pour commencer, nous allons créer un nouveau projet Quasar "todo" :

   yarn create quasar
   # ou
   npm init quasar

Faire les choix décrit dans ce chapitre

Mise en place | Quasar & Pinia | Dev webdivtec.gitbook.io

Configuration d'un nouveau projet Quasar

Ouvrez votre projet "ToDo" dans WebStorm ou un autre éditeur de code.

Lancez votre projet pour et assurez-vous qu'il fonctionne bien en ouvrant la console du navigateur.

quasar dev
# ou
npx quasar dev

ESLint

Pour ce nouveau projet, nous avons activé ESLint.

ESLint est un outil d'analyse de code très performant et populaire, et permet ainsi d'assurer la qualité de votre code en vous forçant à respecter les règles du standard JavaScript.

Si vous ne respecter pas ces règles, votre code ne pourra pas être exécuté !

La liste complète des règles à respecter : https://standardjs.com/rules-fr.html

Ignorer une erreur ESLint

Vous pouvez utiliser les commentaires suivant pour indiquer à ESLint d'ignorer une portion de code.

/*eslint-disable */

//Supprime tous les avertissements entre les deux commentaires eslint-xxx
            alert("Je fais ce que je veux !!!");

/*eslint-enable */

Résumé des règles de base

Utilisez 2 espaces pour l'indentation.

const hello = (name) => {
  console.log('hi', name)
}

Plusieurs lignes vides ne sont pas autorisées.

// ✓ bien
let value = 'hello world'
console.log(value)

// ✗ pas bien
let value = 'hello world'


console.log(value)

Utilisez les apostrophes (') pour le texte à part pour éviter un caractère d'échappement.

console.log('hello there')
console.log("<div class='box'>")

Pas de variables non-utilisées.

function myFunction () {
  let result = something()   // ✗ pas bien
}

Ajoutez un espace après les mots clés.

if (condition) { ... }   // ✓ bien
if(condition) { ... }    // ✗ pas bien

Ajoutez un espace avant les parenthèses de déclaration de fonction.

function name (arg) { ... }   // ✓ bien
function name(arg) { ... }    // ✗ pas bien
 
run(function () { ... })      // ✓ bien
run(function() { ... })       // ✗ pas bien

Utilisez toujours === au lieu de ==. Exception: obj == null est autorisé pour vérifier null || undefined.

if (name === 'John')   // ✓ bien
if (name == 'John')    // ✗ pas bien

if (name !== 'John')   // ✓ bien
if (name != 'John')    // ✗ pas bien

Les opérateurs infixes doivent être espacés.

// ✓ bien
var x = 2
var message = 'hello, ' + name + '!'

// ✗ pas bien
var x=2
var message = 'hello, '+name+'!'

Les virgules doivent être suivies d'un espace.

// ✓ bien
var list = [1, 2, 3, 4]
const greet = (name, options) => { ... }

// ✗ pas bien
var list = [1,2,3,4]
const greet = (name,options) => { ... }

Gardez les 'else' sur la même ligne que leurs accolades.

// ✓ bien
if (condition) {
  // ...
} else {
  // ...
}

// ✗ pas bien
if (condition) {
  // ...
}
else {
  // ...
}

Pour les conditions 'if', utilisez des accolades. Excepté si écrit sur une ligne comptant une seule instruction.

// ✓ bien
if (options.quiet !== true) console.log('done')

// ✓ bien
if (options.quiet !== true) {
  console.log('done')
}

// ✗ avoid
if (options.quiet !== true)
  console.log('done')

Nettoyage du projet

Remplacer le code la page d'accueil : pages/IndexPage.vue

<template>
  <q-page padding>

  </q-page>
</template>

<script setup>

</script>

<style scoped lang="scss">

</style>