Exercicis pràctics

Carpeta	Descripció	Demo
PAC1_Ex2_1	Form Validator	demo
PAC1_Ex2_2	Exchange Rate Calculator	demo
PAC1_Ex2_3	Movie Seat Booking	demo

Nodejs

Establir les opcions predeterminades quan es crea un nou fitxer package.json:

npm config set init-author-email "[email protected]"
npm config set init-author-name "Robert Buj"
npm config set init-license "CC0-1.0"

Crea un nou fitxer package.json:

npm init --yes

Prettier

npm install --save-dev prettier

Afegir les opcions de formatació al fitxer .prettierrc.json

{
  "trailingComma": "none",
  "printWidth": 1000,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

prettier-plugin-void-html

Evitar el tancament d'etiquetes void quam es dona format a documents html amb Prettier:

npm install --save-dev @awmottaz/prettier-plugin-void-html

prettier-plugin-void-html

Afegir el connector al fitxer .prettierrc.json

{
  "plugins": ["@awmottaz/prettier-plugin-void-html"]
}

ESLint

npm init @eslint/config@latest

eslint-config-prettier

npm install --save-dev eslint-config-prettier

Editar el fitxer eslint.config.mjs

import eslintConfigPrettier from "eslint-config-prettier";

export default [
  eslintConfigPrettier,
];

VS Code

Afegir les extensions recomanades a VS Code

1. Obrir la línia d'ordres a VS Code, en macOS: ⌘⇧P
2. Executar l'ordre Extensions: Configure Recommended Extensions (Workspace Folder)
3. Afegir els identificadors de les extensions al fitxer extensions.json
   • Auto Rename Tag
   • Code Spell Checker
   • EditorConfig for VS Code
   • Emmet
   • HTMLHint
   • Prettier - Code formatter
   • JavaScript (ES6) code snippets
   • Live Server
   • ESLint

Configuració de Prettier

1. Obrir les preferències de l'espai de treball a VS Code, en macOS: ⌘,
2. Seleccionar Workspace
3. teclejar default formatter
4. Seleccionar l'opció Prettier

EditorConfig

1. Clicar on es vol crear el fitxer .editorconfig amb el botó dret del ratoli a l'explorador
2. Seleccionar Generate .editorconfig

Configuració d'Emmet

1. Obrir les preferències de l'espai de treball a VS Code, en macOS: ⌘,
2. Seleccionar Workspace
3. teclejar emmet tab
4. Habilitar l'opció Trigger Expansion on Tab

Abreviatures d'Emmet

Abreviatura	Operació
!	Crear un document html5
.NOM	Crear un div amb la classe NOM
ELEMENT.NOM	Crear un ELEMENT (div, h1, p, ...) amb la classe NOM
ELEMENT#ID	Crear un ELEMENT (div, h1, p, ...) amb l'identificador ID

Dreceres de VS Code

Drecera	Acció
⌘ ,	Obrir les preferències
⌘ ⇧ P	Obrir la linia d'ordres
⌘ ⇧ 7	(des)Comentar el codi
⌥ ⇧ F	Donar format al codi
F5	Iniciar la depuració
Fn F2	Refactor: canviar el nom
Fn F3	Cercar: cercar el següent