Start

Boilerplate for parcel

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

ESLint

npm init @eslint/config@latest

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-config-prettier

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

Editar el fitxer eslint.config.mjs

import eslintConfigPrettier from 'eslint-config-prettier';

export default [eslintConfigPrettier];

Parcel

npm install --save-dev parcel rimraf npm-run-all

Modificar la secció scripts del fitxer package.json

  "scripts": {
    "start": "npm-run-all clean parcel:dev",
    "build": "npm-run-all clean parcel:build",
    "parcel:dev": "parcel",
    "parcel:build": "parcel build",
    "clean": "rimraf dist .parcel-cache"
  },

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 (ja està inclosa)
   • ESLint
   • HTMLHint
   • Prettier - Code formatter

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

Execució

1. Clicar al botó Run and Debug del plafó lateral, ⌘ ⇧ D en macOS
2. Clicar a l'enllaç create a launch.json file
3. Seleccionar Web App (Chrome)
4. Afegir la línia

"preLaunchTask": "npm: start",

5. Canviar el port

"url": "http://localhost:1234",

Executar la tasca npm start al rerefons

1. Accedir a la línia d'ordres, ⌘ ⇧ P en macOS
2. Tasks: Configure Task
3. Seleccionar npm: start
4. Afegir la línia

"isBackground": true