/frontend-tooling

Doc about frontend tooling course

Primary LanguageHTML

README

Outils

Brief

Installation

Démarrage - HTML / CSS / JS

Créer :

  • HTML : index.html
  • CSS : style.css
  • JS : script.js

npm init

npm init
  • Un fichier package.json est créé. Il contient la liste des dépendances du projet et leurs versions.

Vite

npm install vite
  • Un dossier node_modules est créé.
  • Un fichier package-lock.json est créé.

Package.json

"scripts": {
    "dev": "vite"
  }

Tests

Jest

npm install --save-dev jest
  • Créé un dossier __tests__ et un fichier sum.test.js.
  • Créé un fichier sum.js
  • sum.js et sum.test.js sont des exemples qui nous permettent de vérifier que les tests fonctionnent.

Fichier de tests

// sum.js

function sum(a, b) {
  return a + b;
}

module.exports = sum;
// sum.test.js

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
"scripts": {
    "test": "jest"
  }
  • La commande npm run test lance les tests.

ESLint

npm install --save-dev eslint
  • Créer un fichier .eslintrc.json à la racine du projet ou utiliser l'interactivité de la commande eslint --init.
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

Husky

npx husky-init && npm install

Cela ajoute automatiquement un hook pre-commit qui lance npm test avant chaque commit.

⚠️ For Windows users, if you see the help message when running npx husky add ..., try node node_modules/husky/lib/bin add ... instead. This isn't an issue with husky code.