Problème avec la config ESlint et Prettier

Renaud · Novembre 21, 2022, 8:34

Salut tout le monde, je suis bloqué depuis quelque jours sur un tutoriel VueMastery qui porte sur la « Vue CLI ». Le tutoriel se nomme « Real World Vue » pour ceux qui connaissent. Deux problèmes me sont venues lorsque j’ai écouté le troisième tutoriel. Pour vous situez, j’ai pris la configuration ESlint + Prettier et le tutoriel m’explique que je dois créer un fichier « prettier » dans vs code et inscrire ce code pour remplacer les Double Quotes par des Singles Quotes et retirer les Semi-Colons:

module.exports = { singleQuote: true, semi: false }

Problème, lorsque j’essaye de modifier du code javascript, prettier m’oblige à mettre des Semi-Colons et remplacer les ’ par des ".

Je pense que ça à un lien avec le fichier ESlint que je n’ai pas configurer, je me trompe sûrement mais c’est à peu près ça le premier problème.

Pour le deuxième problème, je ne sais pas si il est relié au premier mais lorsque je change le nom d’un fichier, je reçois un long message d’erreur sur mon terminal et sur mon localhost qui fait crash mon project. Donc voilà n’hésitez pas à me contacter si vous avez une quelconque réponse ça me ferait vraiment plaisir.

Merci à l’avance

Bonne journée à tous !

Olivier_Lambert · Novembre 23, 2022, 4:02

Pour le premier problème, il faudrait simplement que tu configures « format on file save »:

Tu peux aussi faire ALT + SHIFT + F pour formater ton code automatiquement. Si tu n’as pas d’erreur JS dans ton code (comme c’est le cas sur ton exemple), prettier va s’occuper de tout formater pour toi.

Pour ton erreur JavaScript, envoie-moi un print screen ou copie-colle ça ici! (Quick tip, fais 3 back tick pour créer un bloc de code en markdown)

=

# insère ton code

Tout le monde fini par avoir une config Prettier différente alors ne stress pas trop avec ça. C’est un outil pour t’aider à écrire ton code plus rapidement et t’avertir lorsqu’il y a des erreurs!

Le fichier que tu dois crére doit se nommer .prettierrc.js et le fichier que tu dois faire pour EsLint doit se nommer .eslintrc.js.

Pour faire la différence entre EsLint et Prettier, tu peux aller lire ça:

Renaud · Novembre 23, 2022, 5:29

<script>
export default {
  name: 'EventCard'
  // props: {
  //  msg: String
  // },
}
</script>

Renaud · Novembre 23, 2022, 5:38

Merci pour le lien et pour la rep je vais tout de suite aller lire l’article sur Eslint et prettier ! Je viens de t’envoyer le code js, n’hésite pas à me dire si tu as besoin de plus d’info pour te repérer. Merci encore !

Olivier_Lambert · Novembre 24, 2022, 5:39

Je parlais du message que tu reçois quand ça plante!

Le code que tu as mis plus haut ne contient pas d’erreur.

Si tu enlèves les commentaires sur tes props, ça va prendre une virgule après ‹ EventCard › par contre!

Renaud · Novembre 24, 2022, 4:05

Oups, scuse moi je t’envoie ça tout de suite. Le message que je reçois c’est ça:

 ERROR  Failed to compile with 1 error                          11 h 00 min 12 s

 error  in ./src/views/HomeView.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve '@/components/HelloWorld.vue' in '/Users/mariolandry/my-new-project/src/views'

ERROR in ./src/views/HomeView.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=js) 2:0-53
Module not found: Error: Can't resolve '@/components/HelloWorld.vue' in '/Users/mariolandry/my-new-project/src/views'
 @ ./src/views/HomeView.vue?vue&type=script&lang=js 1:0-200 1:0-200 1:201-390 1:201-390
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 6:49-55
 @ ./src/router/index.js 2:0-45 6:13-21
 @ ./src/main.js 3:0-30 5:30-36

webpack compiled with 1 error

Olivier_Lambert · Novembre 25, 2022, 10:08

Yeah! Ton erreur est super simple à régler.

Module not found: Error: Can't resolve '@/components/HelloWorld.vue'

Est-ce que tu as une composante <HelloWorld /> sur ta page, mais que tu as supprimé le fichier de ton répertoire /components/ ?

Renaud · Novembre 25, 2022, 11:30

j’ai modifié le nom du fichier « HelloWorld.vue » par « EventCard.vue » et j’ai modifier le « path » par : '@/components/EventCard.vue' sur mon fichier Home.vue:

<template>
  <div class="home">
    <EventCard />
  </div>
</template>

<script>
// @ is an alias to /src
import EventCard from '@/components/EventCard.vue'

export default {
  name: 'HomeView',
  components: {
    EventCard,
  },
}
</script>

J’ai gossé avec ça un peu tantôt et l’erreur est parti, j’ai regardé dans mon terminal et j’avais maintenant ces erreurs:

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint]

Dans le fichier EventCard.vue:

   7:9  error  Replace `'EventCard'` with `"EventCard"`  prettier/prettier
  11:2  error  Insert `;`                                prettier/prettier

Dans le fichier home.vue:

  9:23  error  Replace `'@/components/EventCard.vue'` with `"@/components/EventCard.vue";`  prettier/prettier
  12:9   error  Replace `'HomeView'` with `"HomeView"`                                       prettier/prettier
  16:2   error  Insert `;`                                                                   prettier/prettier

J’ai maintenant des erreurs prettier et Eslint ??

Je sais pas si ça peut t’aider mais je t’envoie le code du fichier .eslintrc.js (peut être qu’il y à des erreurs) :

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
}

Excuse moi si je t’arrive toujours avec des nv problèmes haha, ça va finir par débloquer à un moment donné !

Merci à l’avance !

Renaud · Novembre 25, 2022, 11:33

Comment est-ce que je peux voir si j’ai supprimé le fichier de mon répertoire /components/ ?

Olivier_Lambert · Novembre 25, 2022, 11:50

Tu as ça dans « output » ou « terminal »?

Aussi, shoot moi ce que tu as dans .editorconfig ou .prettierrc. C’est ta config prettier. C’est là que tu vas pouvoir lui dire d’arrêter de te faire chier avec les single ou double quotes!

Mais anyway, quand tu fais « ALT + SHIFT + F » c’est sensé arranger toutes ces affaires-là pour toi. Ça ne fonctionne pas?

Si tu veux en finir aves ce genre de messages dans ta console, tu peux juste enlever les règles que tu as mis dans ton .eslint.

// Change ça
rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
}

// Pour ça: 
rules: {
}

Fais juste regarder s’il existe un fichier HelloWorld.vue!

Si tu veux, tu peux mettre ton code dans un https://codesandbox.io/ ou fais-toi un GitHub!

Comme ça tu vas pouvoir me partager ton projet et je n’aurai pas besoin de te demander de copier-coller chaque fichier de config!

Renaud · Novembre 26, 2022, 2:37

Pour le message d’erreur je le reçois dans mon terminal.

Voici ce que j’ai écris dans mon fichier prettier:

module.exports = {
  singleQuote: true,
  semi: false,
}

Oui, la commande marche bien pour moi c’est juste mon terminal qui me met un message d’erreur à cause des modifications qui ont été faites (les modifications que « ALT + SHIFT + F » à fait)

Olivier_Lambert:

// Change ça
rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
}

// Pour ça: 
rules: {
}

J’ai essayé mais l’erreur persiste.

Tu vas me trouver un peu niaiseux mais ça fait 30 min que j’essaye de trouver comment copier coller mon project dans la sandbox. Quand j’arrive sur sandbox.io ça me demande de choisir une template. Est-ce qu’il y à un moyen de créer une sandbox sans template ? Et comment faire pour y copier coller mon project vs code ?

Pour le fichier HelloWorld.vue, il est écris qu’il est supprimé:

Capture d’écran, le 2022-11-25 à 21.21.37

Merci à l’avance !

Olivier_Lambert · Novembre 27, 2022, 5:14

Dans ton fichier prettier, on peut voir que tu veux qu’il préfères les ' au lieux des " et qu’il retire les ; à la fin de tes lignes.

Perso, je fais juste enlever les ; je trouve ça plus facile à lire.

Est-ce que ton projet vue fonctionne et tu as juste des messages dans ton terminal, ou bien ton projet ne fonctionne juste pas et tu as un truc du genre d’affiché?

Pour codesandbox, le mieux serait que tu te fasses un compte GitHub, que tu créer un répertoire et que tu l’importes dans CodeSandbox à partir de là.

Il y a pas mal de tuto sur le web qui expliquent comment faire:

Il faut gosser un peu au début le temps de comprendre les push, pull, branches, pull request et le reste du charabia de Git. Mais ça vaut la peine de prendre le temps de bien comprendre!

Renaud · Novembre 28, 2022, 1:40

Oui, mon project continue de fonctionner mais je reçois ce message d’erreur sur mon localhost chaque fois que je fais des modifications:

Est ce que je serais mieux de simplement supprimer le fichier prettier ou il y a un moyen que je ne reçois plus ce message ?

Merci pour le tutoriel ! J’ai eu des problèmes en voulant importer le rep dans une sandbox, je t’envoie tout de même le lien Git en attendant de trouver le problème: https://github.com/renaudlandry123/jkdsthreng. Est-ce que le lien marche pour toi ?

Olivier_Lambert · Novembre 28, 2022, 1:55

Oui, tu peux supprimer ton fichier Prettier! Par contre, il va prendre la configuration de ton VsCode alors c’est pas comme si tu désactivait Prettier au complet.

Je n’ai pas accès à ton GitHub, tu dois m’inviter!

Par ici:

Mon profil sur Github est latranchee! Si ça ne marche pas, tu peux mettre ol@latranchee.com.

Renaud · Novembre 28, 2022, 3:03

Je viens de t’ajouter ! Tu peux essayer de regarder si il n’y avais pas une erreur à quelque part dans mes fichiers, je sais que ça fait déjà quelques jours que je pose pas mal de questions et je ne voudrais pas que ça te fasse perdre trop de temps dans tes affaires non plus. En tous cas, merci infiniment pour tes réponses rapides et clairs, je vais continuer de mon bord à chercher des réponses à ce bug. En attendant j’ai sup le fichier prettier et les erreurs sur mon terminal sont partis, sans surprise. Merci encore pour tous !!!

Olivier_Lambert · Novembre 28, 2022, 3:10

Perso j’avais une erreur différente que j’ai réglé en ajoutant ça dans mon .eslintrc.js:

rules: {
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
  },

Question, as-tu installé le plugin Prettier dans VsCode?

Et quant à faire, ajoute donc ceux-là aussi!

Renaud · Novembre 28, 2022, 9:38

Oui ! J’avais déjà installé ces deux plugins.

Olivier_Lambert · Novembre 28, 2022, 9:46

C’est quand même cool, on peut compiler straight à partir de GitHub maintenant!

J’ai pu rouler ton application directement à partir de ça!

https://latranchee-reimagined-enigma-4gqj5rxqxvrf5j6q-8080.preview.app.github.dev/

Si tu as encore des bugs, shoot-moi tes screenshots, mais tout fonctionne sur mon ordinateur et sur ton GitHub!

Renaud · Novembre 28, 2022, 10:45

Pas mal content d’arriver après la maj pour une fois hh. Je ne sais pas si c’est normal mais je reçois une erreur 404 quand je clique sur le lien:

Olivier_Lambert · Novembre 28, 2022, 11:04

Quand on ferme la page, ça ferme l’instance de l’applicaiton aussi. J’aurais dû y penser!