Skip to content

Latest commit

 

History

History
176 lines (128 loc) · 4.54 KB

README.md

File metadata and controls

176 lines (128 loc) · 4.54 KB
Raw

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

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",
  1. 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