eslint-config-woo

Woopear EsLint

Avant de débuter, intaller le plugin eslint sur vscode

Les installations

Si le projet n'a pas initialisé ESLINT (not files eslintrc.js)

si vous n'avez pas de fichier eslintrc.js ou eslintrc.cjs

• Installation des packages :

$ npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier tslint typescript eslint-plugin-css-modules eslint-plugin-html eslint-config-woopear

• initialisé eslint

$ ./node_modules/.bin/eslint --init

puis entrez les informations demandées par le CLI
ATTENTION vous devrez choisir un framework et aucune préconfiguration eslint divers
Après avoir terminé la configuration, le fichier eslintrc sera créé

• Ajouter ou remplacer le code du fichier eslintrc

copier coller le code ci-dessous dans votre fichier

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
  },
  extends: ['woopear', 'plugin:css-modules/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: { ecmaVersion: 12 },
  plugins: ['@typescript-eslint', 'html', 'css-modules'],
};

redémarré vscode pour s'assurer que tout fonctionne

Si ESLINT est déja initialisé

Vous possèdez déja une fichier eslintrc
qui à été creer au moment de l'installation de votre framework
ici nous allons exposer l'installation NestJS. dans les faits le principe reste le meme dans tout les frameworks

L'installation avec svelte/sveltekit cliquer sur le lien ci-dessous
installation eslint-woopear sur svelte/sveltekit

Installation NestJS

• installation du package eslint-woopear

$ npm i eslint-config-woopear

• modification du fichier eslintrc

proprieté : parserOptions

parserOptions: {
  project: 'tsconfig.json',
  tsconfigRootDir: __dirname,
  sourceType: 'module',
},

proprieté : extends

extends: [
  'woopear',
  'plugin:@typescript-eslint/recommended',
  'plugin:prettier/recommended',
],

Paramettrer vscode

Pour que l'extension prettier fonctionne avec notre linter,
veuillez copier-coller ses lignes dans le fichier settings.json de votre vscode.
(pour le trouver tapez : ctrl + p (window))
et choisissez le paramètre de format : json
collez ces lignes à la fin du fichier

"[javascript]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }

Définition des régles

Régles basique

Régles	Définition
for-direction	appliquer la clause de mise à jour de la boucle "for" en déplaçant le compteur dans la bonne direction
getter-return	appliquer les instructions « return » dans les getters
no-cond-assign	interdire les opérateurs d'affectation dans les expressions conditionnelles
no-console (pas utilisé)	interdit les consoles à utiliser pour la prod
no-dupe-args	interdire les arguments en double dans les définitions de « fonction »
no-dupe-else-if	interdire les conditions en double dans les chaînes if-else-if
no-dupe-keys	interdire les clés en double dans les littéraux d'objet
no-empty	interdire les instructions de bloc vides
no-extra-parens	interdire les parenthèses inutiles
no-func-assign	interdire la réaffectation des déclarations de « fonction »
no-inner-declarations	interdire les déclarations de variables ou de "fonctions" dans les blocs imbriqués
no-obj-calls	interdire l'appel des propriétés d'objet globales en tant que fonctions
no-setter-return	interdire le retour de valeurs par les setters
no-sparse-arrays	interdire les tableaux clairsemés
no-template-curly-in-string	interdire la syntaxe d'espace réservé de littéral de modèle dans les chaînes normales
no-unreachable	interdire le code inaccessible après les instructions return, throw, continue et break
no-unsafe-negation	interdire la négation de l'opérande gauche des opérateurs relationnels

Régles de bonne pratique

Régles	Définition
accessor-pairs	appliquer des paires getter et setter dans les objets et les classes
array-callback-return	appliquer les instructions « return » dans les rappels de méthodes de tableau
class-methods-use-this	imposer que les méthodes de classe utilisent this
curly	appliquer un style d'accolade cohérent pour toutes les instructions de contrôle
default-case	exiger des cas default dans les instructions switch
default-case-last	appliquer les clauses par défaut dans les instructions switch en dernier
default-param-last	appliquer les paramètres par défaut en dernier (pour les fonctions)
eqeqeq	nécessitent l'utilisation de === et !==
max-classes-per-file	imposer un nombre maximum de classes par fichier
no-alert (pas utilisé)	interdire l'utilisation de « alerte », « confirmation » et « invite » (decommenter pour prod)
no-constructor-return	interdire l'utilisation de arguments.caller ou arguments.calle
no-empty-function	interdire les fonctions vides
no-fallthrough	interdire la chute des instructions case
no-multi-spaces	interdire plusieurs espaces
no-new	interdire les "nouveaux" opérateurs en dehors des affectations ou des comparaisons
no-redeclare	interdire la redéclaration de variable
no-return-await	interdire les "retours en attente" inutiles
no-script-url	interdire les URL javascript:
no-self-assign	interdire les affectations où les deux côtés sont exactement les mêmes
no-self-compare	interdire les comparaisons où les deux côtés sont exactement les mêmes
no-throw-literal	interdire de lancer des littéraux comme exceptions
no-unmodified-loop-condition	interdire les conditions de boucle non modifiées
require-await	interdire les fonctions asynchrones qui n'ont pas d'expression « await »
yoda	exiger ou interdire les conditions "Yoda" (dans les conditions, la variable en premier enuite en deuxieme l'element à comparer)

régles pour les variables

Régles	Définition
no-delete-var	interdire la suppression de variables
no-label-var	interdire le meme nom d'une variable et d'une étiquette
no-unused-vars	interdire les variables inutilisées
no-use-before-define	interdire l'utilisation de variables avant qu'elles ne soient définies

Régles pour le style

Régles	Définition
class-name (pas utilisé)	exige une majuscule a la première lettre d'une classe
array-bracket-newline	appliquer les sauts de ligne après l'ouverture et avant la fermeture des crochets du tableau
array-bracket-spacing (pas utilisé)	appliquer un espacement cohérent à l'intérieur des crochets du tableau
array-element-newline	appliquer des sauts de ligne après chaque élément du tableau
block-spacing	interdire ou appliquer les espaces à l'intérieur des blocs après l'ouverture du bloc et avant la fermeture du bloc
brace-style	appliquer un style d'accolade cohérent pour les blocs
camelcase	appliquer la convention de nommage camelcase
capitalized-comments	appliquer ou interdire la mise en majuscule de la première lettre d'un commentaire
comma-dangle	exiger ou interdire les virgules de fin
comma-spacing	appliquer un espacement cohérent avant et après les virgules
computed-property-spacing	appliquer un espacement cohérent à l'intérieur des parenthèses de propriétés calculées
eol-last	exiger ou interdire la nouvelle ligne à la fin des fichiers
func-call-spacing	exiger ou interdire l'espacement entre les identifiants de fonction et leurs invocations
func-name-matching	exiger que les noms de fonctions correspondent au nom de la variable ou de la propriété à laquelle elles sont affectées
func-names	exiger ou interdire les expressions fonction nommées
func-style	imposer l'utilisation cohérente des déclarations ou des expressions de « fonction »
function-call-argument-newline	appliquer des sauts de ligne entre les arguments d'un appel de fonction
function-paren-newline	appliquer des sauts de ligne cohérents à l'intérieur des parenthèses de fonction
implicit-arrow-linebreak	appliquer l'emplacement des corps de fonction de flèche
indent	appliquer une indentation cohérente
jsx-quotes	appliquer l'utilisation cohérente des guillemets doubles ou simples dans les attributs JSX
key-spacing	appliquer un espacement cohérent entre les clés et les valeurs dans les propriétés littérales d'objet
keyword-spacing	appliquer un espacement cohérent avant et après les mots-clés
line-comment-position (pas utilisé)	appliquer la position des commentaires de ligne
lines-around-comment	nécessitent des lignes vides autour des commentaires
lines-between-class-members	exiger ou interdire une ligne vide entre les membres du groupe
max-len	imposer une longueur de ligne maximale
multiline-comment-style	appliquer un style particulier pour les commentaires multilignes
new-cap	exiger que les noms des constructeurs commencent par une majuscule
new-parens	appliquer ou interdire les parenthèses lors de l'appel d'un constructeur sans arguments
newline-per-chained-call	nécessite un saut de ligne après chaque appel dans une chaîne de méthode
no-lonely-if	interdire les instructions 'if' comme seule instruction dans les blocs 'else'
no-mixed-spaces-and-tabs	interdire les espaces mixtes et les tabulations pour l'indentation
no-multi-assign	interdire l'utilisation d'expressions d'affectation chaînées
no-multiple-empty-lines	interdire plusieurs lignes vides
no-negated-condition	interdire les conditions négatives
no-nested-ternary	interdire les expressions ternaires imbriquées
no-new-object	interdire les constructeurs « Object »
no-unneeded-ternary	interdire les opérateurs ternaires lorsque des alternatives plus simples existent
no-whitespace-before-property	interdire les espaces avant les propriétés
object-curly-newline	appliquer des sauts de ligne cohérents après l'ouverture et avant la fermeture des accolades
object-curly-spacing	appliquer un espacement cohérent à l'intérieur des accolades
operator-assignment	exiger ou interdire la sténographie de l'opérateur d'affectation dans la mesure du possible
operator-linebreak	appliquer un style de saut de ligne cohérent pour les opérateurs
padded-blocks	exiger ou interdire le remplissage dans les blocs
padding-line-between-statements	exiger ou interdire les lignes de remplissage entre les instructions
quote-props	exiger des guillemets autour des noms de propriété littéraux d'objet
quotes	appliquer l'utilisation cohérente des backticks, des guillemets doubles ou simples
semi	exiger ou interdire les points-virgules au lieu de l'ASI
semi-spacing	appliquer un espacement cohérent avant et après les points-virgules
semi-style	appliquer l'emplacement des points-virgules
space-before-blocks	appliquer un espacement cohérent avant les blocs
space-before-function-paren	appliquer un espacement cohérent avant la parenthèse ouvrante de la définition de la "fonction"
space-infix-ops	nécessitent un espacement autour des opérateurs infixes
pace-unary-ops	appliquer un espacement cohérent avant ou après les opérateurs unaires
spaced-comment	appliquer un espacement cohérent après le // ou /* dans un commentaire
switch-colon-spacing	appliquer l'espacement autour des deux points des instructions switch
template-tag-spacing	exiger ou interdire l'espacement entre les balises de modèle et leurs littéraux

Régles ecmascript 6

Régles	Définition
arrow-body-style	nécessitent des accolades autour des corps de fonction de flèche
arrow-parens	exiger des parenthèses autour des arguments de la fonction flèche
arrow-spacing	appliquer un espacement cohérent avant et après la flèche dans les fonctions de flèche
no-class-assign	interdire la réaffectation des membres du groupe
no-const-assign	interdire la réaffectation des variables const
no-dupe-class-members	interdire les membres de classe en double
no-duplicate-imports	interdire les importations de modules en double
no-useless-constructor (pas utilisé)	interdire les constructeurs inutiles
no-useless-rename (pas utilisé)	interdire de renommer les affectations d'importation, d'exportation et déstructurées avec le même nom
no-var	nécessite let ou const au lieu de var
prefer-const	nécessitent des déclarations const pour les variables qui ne sont jamais réaffectées après avoir été déclarées