Skip to content

PAC 1 de l'assignatura desenvolupament front-end amb frameworks JavaScript del màster de desenvolupament d'aplicacions web

Notifications You must be signed in to change notification settings

rbuj-UOC/M4.254-PAC1

Repository files navigation

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

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

About

PAC 1 de l'assignatura desenvolupament front-end amb frameworks JavaScript del màster de desenvolupament d'aplicacions web

Topics

Resources

Stars

Watchers

Forks