title

Ene 2025
12 min

Iniciamos el proceso

c git clone https://repo.git o Cloning into ‘repo’… s ✓ Repository cloned successfully _ i Ahora instalamos dependencias c npm install o added 150 packages _ w ⚠ 2 vulnerabilities found e ✗ Build failed

{ “scripts”: { # option “test”: “echo “Error: no test specified” && exit 1” …more }, “test”: “echo “Error: no test specified” && exit 1” }

{ “ConnectionStrings”: { “DefaultConnection”: “Server=myServer;Database=myDB;User Id=myUser;Password=myPass;” } }

[ { “date”: “2025-04-01”, “temperatureC”: 12, “summary”: “Cool”, “temperatureF”: 53 }, { “date”: “2025-04-02”, “temperatureC”: 25, “summary”: “Warm”, “temperatureF”: 77 } ]

{ “profiles”: { “MyFirstProject”: { “commandName”: “Project”, “dotnetRunMessages”: true, “launchBrowser”: true, “applicationUrl”: “http://localhost:5000”, “environmentVariables”: { “ASPNETCORE_ENVIRONMENT”: “Development” } } } }

{ “Logging”: { “LogLevel”: { “Default”: “Information”, “Microsoft”: “Warning”, “Microsoft.Hosting.Lifetime”: “Information” } }, “AllowedHosts”: ”*”, “ConnectionStrings”: { “DefaultConnection”: “Server=localhost;Database=MyDatabase;User Id=sa;Password=MyPassword;” }, “AppSettings”: { “ApiKey”: “12345-ABCDE-67890-FGHIJ”, “MaxItemsPerPage”: 50, “FeatureFlags”: { “EnableNewFeature”: true, “EnableExperimentalFeature”: false } } }

{ “version”: “2.0.0”, “tasks”: [ { “type”: “cppbuild”, “label”: “Compile C++”, “command”: “g++”, “args”: [ “-fdiagnostics-color=always”, “-g”, “{fileDirname}/gcc”], “detail”: “Compiles the current C++ file” } ] }

{ “version”: “0.2.0”, “configurations”: [ { “name”: “(gdb) Launch”, “type”: “cppdbg”, “request”: “launch”, “program”: “{fileBasenameNoExtension}.exe”, “args”: [], “stopAtEntry”: false, “cwd”: ”${fileDirname}”, “environment”: [], “externalConsole”: false, “MIMode”: “gdb”, “miDebuggerPath”: “gdb”, “setupCommands”: [ { “description”: “Enable pretty-printing for gdb”, “text”: “-enable-pretty-printing”, “ignoreFailures”: true }, { “description”: “Set Disassembly Flavor to Intel”, “text”: “-gdb-set disassembly-flavor intel”, “ignoreFailures”: true } ] } ] }

“ConnectionStrings”: { “DefaultConnection”: “Server=localhost;Database=MyDatabase;User Id=myUsername;Password=myPassword;” }

“ConnectionStrings”: { “DefaultConnection”: “Data Source=MyDatabase.db” }

“ConnectionStrings”: { “DefaultConnection”: “Server=localhost;Database=MyDatabase;User=myUsername;Password=myPassword;” }

“ConnectionStrings”: { “DefaultConnection”: “Host=localhost;Database=MyDatabase;Username=myUsername;Password=myPassword” }

{ “ConnectionStrings”: { “MyConnection”: “Server=myServer;Database=myDB;User Id=myUser;Password=myPass;” } }

{ “ConnectionStrings”: { “DefaultConnection”: “Server=localhost;Database=MyDatabase;User Id=sa;Password=MySecurePassword;” } }

{ “name”: “Luis”, “age”: 30, “skills”: [“JavaScript”, “Python”, “Java”] }

{ “type”: “module” }

{ “name”: “your_module”, “type”: “module”, “version”: “1.0.0” …more }

{ “name”: “my-project”, “version”: “1.0.0”, “description”: "", “main”: “index.js”, “scripts”: { “test”: “echo “Error: no test specified” && exit 1” }, “author”: "", “license”: “ISC” }

{ “name”: “my-project”, “version”: “1.0.0”, “description”: “An example project”, “author”: “Your name”, “main”: “index.js”, “scripts”: { “test”: “echo “Error: no test specified” && exit 1” }, “license”: “MIT”, “dependencies”: { “express”: “^4.17.1” } }

{ “name”: “curso-npm”, “version”: “1.0.0”, “description”: “Curso de NPM - Aprende a utilizar Node Package Manager”, “main”: “index.js”, “author”: “LuisLlamas.es”, “license”: “MIT”, “scripts”: { “start”: “node index.js”, “test”: “echo “No tests available"" }, “dependencies”: { “express”: “^4.17.1”, “lodash”: “^4.17.21” }, “devDependencies”: { “nodemon”: “^2.0.12”, “eslint”: “^7.32.0” } }

{ “name”: “my-project”, “version”: “1.0.0”, “dependencies”: { “express”: “^4.17.1”, “lodash”: “^4.17.21” } }

“dependencies”: { “lodash”: “2.1.0” }

“dependencies”: { “lodash”: “=2.1.0” }

“scripts”: { “launch_notepad”: “notepad” }

“scripts”: { “prestart”: “echo ‘Before starting’”, “start”: “echo ‘Start’”, “poststart”: “echo ‘After starting’”, }

“scripts”: { “launch”: “npm run check && npm run build”, “check”: “echo ‘Check’”,
“build”: “echo ‘Build’”, }

{ “name”: “my-package”, “version”: “1.0.0”, “description”: “A simple example package that says hello”, “main”: “index.js”, “scripts”: { “test”: “echo “No tests specified"" }, “author”: “Your name”, “license”: “MIT” }

1.0.0 - Initial version

1.0.0 - Initial version 1.0.1 - Bugfix one 1.0.2 - Bugfix two

1.1.0 - New feature

1.1.0 - New feature 1.1.1 - Bugfix 1.1.2 - Bugfix

2.0.0 - Breaking change

{ “compilerOptions”: { “target”: “es2016”, “module”: “commonjs”, “esModuleInterop”: true,
“forceConsistentCasingInFileNames”: true,
“strict”: true,
“skipLibCheck”: true
}, “include”: [ “src” ] }

{ “editor.formatOnSave”: true, “editor.defaultFormatter”: “esbenp.prettier-vscode”, “editor.codeActionsOnSave”: { “source.fixAll.eslint”: true }, “eslint.validate”: [“javascript”, “javascriptreact”, “vue”], “volar.takeOverMode.enabled”: true, “volar.completion.autoImportComponent”: true, “[vue]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “javascript.updateImportsOnFileMove.enabled”: “always”, “editor.tabSize”: 2, “files.associations”: { “*.vue”: “vue” }, “emmet.includeLanguages”: { “vue”: “html” }, “emmet.syntaxProfiles”: { “vue-html”: “html”, “vue”: “html” } }

{ “compilerOptions”: { “target”: “es2022”, “module”: “esnext”, “baseUrl”: ”.”, “moduleResolution”: “node”, “paths”: { ”@/”: [“src/”] }, “jsx”: “preserve”, “lib”: [“es2022”, “dom”, “dom.iterable”, “scripthost”] }, “exclude”: [“node_modules”, “dist”], “vueCompilerOptions”: { “target”: 3.3 } }

{ “compilerOptions”: { “target”: “es2022”, “module”: “esnext”, “strict”: true, “jsx”: “preserve”, “moduleResolution”: “node”, “skipLibCheck”: true, “esModuleInterop”: true, “allowSyntheticDefaultImports”: true, “forceConsistentCasingInFileNames”: true, “useDefineForClassFields”: true, “sourceMap”: true, “baseUrl”: ”.”, “types”: [“vite/client”], “paths”: { ”@/”: [“src/”] }, “lib”: [“es2022”, “dom”, “dom.iterable”, “scripthost”] }, “include”: [ “src//*.ts”, “src//.d.ts”, “src/**/.tsx”, “src/**/*.vue” ], “exclude”: [“node_modules”, “dist”], “vueCompilerOptions”: { “target”: 3.3 } }

{ “semi”: false, “tabWidth”: 2, “singleQuote”: true, “trailingComma”: “es5”, “printWidth”: 100, “bracketSpacing”: true, “arrowParens”: “avoid”, “vueIndentScriptAndStyle”: true, “endOfLine”: “lf”, “htmlWhitespaceSensitivity”: “ignore” }

{ “name”: “Luis”, “age”: 30, “active”: true }

“profiles”: { … “list”: [ … { “commandline”: “csharprepl”, “guid”: “{70e71a3e-0518-52f7-81fe-565defc69fe7}”, “name”: “C# REPL” } ] }

“ConnectionStrings”: { “Default”: “Server=(localdb)\mssqllocaldb;Database=MyProjectDb;Trusted_Connection=True” }

{ “devDependencies”: { “servor”: “4.0.0” }, “scripts”: { “start”: “servor www index.html 8080 —reload —browse” } }

{ “posts”: [ { “id”: 1, “title”: “Post 1”, “author”: “Author 1” }, { “id”: 2, “title”: “Post 2”, “author”: “Author 2” } ], “comments”: [ { “id”: 1, “body”: “Comment 1”, “postId”: 1 }, { “id”: 2, “body”: “Comment 2”, “postId”: 1 } ] }

{ “scripts”: { “build”: “tailwindcss build styles\main.css -o dist\main.css” } }

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

{ “scripts”: {
“watch”: “tailwindcss -i styles/main.css -o dist/main.css —watch” } }

“scripts”: { “start”: “electron .” }

“editor.fontFamily”: “Inconsolata NF, Consolas, ‘Courier New’, monospace”, “editor.fontLigatures”: true

“terminal.integrated.fontFamily”: “Inconsolata NF”,
“terminal.integrated.defaultProfile.windows”: “Command Prompt”, “terminal.integrated.inheritEnv”: false,

“editor.fontLigatures”: “‘ss01’, ‘ss02’, ‘ss03’, ‘ss04’, ‘ss05’, ‘ss06’, ‘zero’, ‘cv02’, ‘cv29’, ‘ss08’”,

{ “id”: 12, “description”: “demoItem”, “value”: 50.4 }

[ “banana”, 12, 3.1416 ]

{ “id”: 12, “name”: “peter”, “fruits”: [ “banana”, “orange”, “raspberry” ], “house”: { “address”: “white citadel”, “city”: “gondor” } }

{ “text”: “myText”, “id”: 10, “status”: true, “value”: 3.14 }

[“B”, 45, 2.1728, true]

{ “text”: “myText”, “id”: 10, “status”: true, “value”: 3.14, “nestedObject”: { “key”: 40, “description”: “myDescription”, “active”: true, “qty”: 1.414 }, “nestedArray”: [“B”, 45, 2.1728, true] }

{ “ConnectionStrings”: { “DefaultConnection”: “Server=myServer;Database=myDB;User Id=myUser;Password=myPass;” } }

{ “profiles”: { “MiPrimerProyecto”: { “commandName”: “Project”, “dotnetRunMessages”: true, “launchBrowser”: true, “applicationUrl”: “http://localhost:5000”, “environmentVariables”: { “ASPNETCORE_ENVIRONMENT”: “Development” } } } }

{ “version”: “2.0.0”, “tasks”: [ { “type”: “cppbuild”, “label”: “Compilar C++”, “command”: “g++”, “args”: [ “-fdiagnostics-color=always”, “-g”, “{fileDirname}/gcc”], “detail”: “Compila el archivo actual de C++” } ] }

}

{ “proyecto”: “Mi Aplicación Web”, # Nombre del proyecto “version”: “2.1.0”, # Versión actual “autor”: “Luis Llamas” # Autor principal }

“ConnectionStrings”: { “DefaultConnection”: “Server=localhost;Database=MyDatabase;User Id=myUsername;Password=myPassword;” }

“ConnectionStrings”: { “DefaultConnection”: “Data Source=MyDatabase.db” }

“ConnectionStrings”: { “DefaultConnection”: “Server=localhost;Database=MyDatabase;User=myUsername;Password=myPassword;” }

“ConnectionStrings”: { “DefaultConnection”: “Host=localhost;Database=MyDatabase;Username=myUsername;Password=myPassword” }

{ “ConnectionStrings”: { “MiConexion”: “Server=myServer;Database=myDB;User Id=myUser;Password=myPass;” } }

{ “ConnectionStrings”: { “DefaultConnection”: “Server=localhost;Database=MiBaseDeDatos;User Id=sa;Password=MiContraseñaSegura;” } }

{ “nombre”: “Luis”, “edad”: 30, “habilidades”: [“JavaScript”, “Python”, “Java”] }

{ “type”: “module” }

{ “name”: “tu_modulo”, “type”: “module”, “version”: “1.0.0” …more }

{ “name”: “mi-proyecto”, “version”: “1.0.0”, “description”: "", “main”: “index.js”, “scripts”: { “test”: “echo “Error: no test specified” && exit 1” }, “author”: "", “license”: “ISC” }

{ “name”: “mi-proyecto”, “version”: “1.0.0”, “description”: “Un proyecto de ejemplo”, “author”: “Tu nombre”, “main”: “index.js”, “scripts”: { “test”: “echo “Error: no test specified” && exit 1” }, “license”: “MIT”, “dependencies”: { “express”: “^4.17.1” } }

{ “name”: “curso-npm”, “version”: “1.0.0”, “description”: “Curso de NPM - Aprende a utilizar Node Package Manager”, “main”: “index.js”, “author”: “LuisLlamas.es”, “license”: “MIT”, “scripts”: { “start”: “node index.js”, “test”: “echo “No hay pruebas disponibles"" }, “dependencies”: { “express”: “^4.17.1”, “lodash”: “^4.17.21” }, “devDependencies”: { “nodemon”: “^2.0.12”, “eslint”: “^7.32.0” } }

{ “name”: “mi-proyecto”, “version”: “1.0.0”, “dependencies”: { “express”: “^4.17.1”, “lodash”: “^4.17.21” } }

“dependencies”: { “lodash”: “2.1.0” }

“dependencies”: { “lodash”: “=2.1.0” }

“scripts”: { “launch_notepad”: “notepad” }

“scripts”: { “prestart”: “echo ‘Antes de iniciar’”, “start”: “echo ‘Start’”, “poststart”: “echo ‘Después de iniciar’”, }

“scripts”: { “launch”: “npm run check && npm run build”, “check”: “echo ‘Check’”,
“build”: “echo ‘Build’”, }

{ “name”: “mi-paquete”, “version”: “1.0.0”, “description”: “Un paquete simple de ejemplo que dice hola”, “main”: “index.js”, “scripts”: { “test”: “echo “No tests specified"" }, “author”: “Tu nombre”, “license”: “MIT” }

1.0.0 - Versión inicial

1.0.0 - Versión inicial 1.0.1 - Bugfix uno 1.0.2 - Bugfix dos

1.1.0 - Nueva funcionalidad

1.1.0 - Nueva funcionalidad 1.1.1 - Bugfix 1.1.2 - Bugfix

2.0.0 - Cambio que rompe compatibilidad

{ “nombre”: “Luis”, “edad”: 30, “activo”: true }

“profiles”: { … “list”: [ … { “commandline”: “csharprepl”, “guid”: “{70e71a3e-0518-52f7-81fe-565defc69fe7}”, “name”: “C# REPL” } ] }

“ConnectionStrings”: { “Default”: “Server=(localdb)\mssqllocaldb;Database=MyProjectDb;Trusted_Connection=True” }

{ “devDependencies”: { “servor”: “4.0.0” }, “scripts”: { “start”: “servor www index.html 8080 —reload —browse” } }

{ “scripts”: { “build”: “tailwindcss build styles\main.css -o dist\main.css” } }

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

{ “scripts”: {
“watch”: “tailwindcss -i styles/main.css -o dist/main.css —watch” } }

“scripts”: { “start”: “electron .” }

“editor.fontFamily”: “Inconsolata NF, Consolas, ‘Courier New’, monospace”, “editor.fontLigatures”: true

“terminal.integrated.fontFamily”: “Inconsolata NF”,
“terminal.integrated.defaultProfile.windows”: “Command Prompt”, “terminal.integrated.inheritEnv”: false,

“editor.fontLigatures”: “‘ss01’, ‘ss02’, ‘ss03’, ‘ss04’, ‘ss05’, ‘ss06’, ‘zero’, ‘cv02’, ‘cv29’, ‘ss08’”,

{ “id”: 12, “description”: “demoItem”, “value”: 50.4 }

[ “banana”, 12, 3.1416 ]

{ “id”: 12, “name”: “peter”, “fruits”: [ “banana”, “orange”, “raspberry” ], “house”: { “address”: “white citadel”, “city”: “gondor” } }

{ “text”: “myText”, “id”: 10, “status”: true, “value”: 3.14 }

[“B”, 45, 2.1728, true]

✅ ref

Text

✅ reactive

Text

Pestaña 1

Este es el contenido de la primera pestaña.

Punto 1
Punto 2

Pestaña 2

Este es el contenido de la segunda pestaña. Texto en negrita y cursiva.

Pestaña Única

Contenido de una pestaña única que crea su propio grupo y no se agrupa (no genera barra de tabs porque es solo una).

{ “proyecto”: “Mi Aplicación Web”, # Nombre del proyecto “version”: “2.1.0”, # Versión actual “autor”: “Luis Llamas” # Autor principal }

C:\Hola

www.luisllamas.es

Ejemplo JSON Viewer

Aquí un ejemplo de visualización de JSON interactivo con comentarios:

{ “proyecto”: “Mi Aplicación Web”, # Nombre del proyecto “version”: “2.1.0”, # Versión actual “autor”: “Luis Llamas” # Autor principal }

Ejemplo Tree File

Aquí un ejemplo de visualización de estructura de archivos:

src/ components/ core/ lll-ui-json-viewer.js # Componente para visualizar JSON lll-ui-tree-file.js # Componente para árboles de archivos lll-ui-console.js # Componente para terminal pages/ index.astro # Página principal about.astro # Página sobre nosotros public/ images/ # Imágenes estáticas css/ # Estilos CSS

Ejemplo Console

Aquí un ejemplo de simulación de terminal:

Iniciamos el proceso

Ejemplo de Grupo de Código en Tabs

main.jsindex.htmlstyle.css

console.log("Hola desde main.js");

function init() {
  console.log("Inicializando app");
}

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo</title>
</head>
<body>
  <h1>Hola Mundo</h1>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}
h1 {
  color: blue;
}

Título

using System;

class Program
{
    static void Main()
    {
        Console.WriteLine("Hola Mundo"); // Línea destacada (amarillo)
        int x = 5; // Línea añadida (verde con +)
        int y = 10; // Línea eliminada (rojo con -)
        if (x > 0) // Advertencia (naranja con ⚠) [w]
        {
            Console.WriteLine("Positivo"); // Éxito (verde con ✓)
        }
        // Esto es un comentario // Comentario (gris con 💬)
        Console.WriteLine("Error aquí"); // Error (rojo con ✗)
        Console.WriteLine("Información"); // Info (azul con ℹ)
        Console.WriteLine("Enfoque"); // Enfoque (blanco con 👁 y borde)
        Console.WriteLine("Borrosa"); // Borrosa (filtro blur)
    }
}

suffix +
suffix -
suffix b [b]
suffix h [h]
suffix w [w]
suffix e [e]
suffix i [i]
suffix s [s]
suffix c [c]
suffix f [f]

console.log("Hola") [f]

// este es un código de ejemplo
const a = 2;

function ejemplo() {
  console.log("Este bloque tiene título");
}

def funcion():
    linea_destacada = "esta línea se destaca" [b]
    linea_normal = "esta no"
    otra_destacada = "esta sí"

function saludar(nombre) {
  console.log("Hola " + nombre);
  console.log(`Hola ${nombre}!`);
}

plo 2: Cambios en Python

def calcular_area(radio):
  pi = 3.14
  import math
  pi = math.pi
  return pi * radio ** 2

🔍 Debugging

Para ver qué atributos se están añadiendo, inspecciona el HTML generado en el navegador. Todos los atributos personalizados comienzan con data-.

Qué es y Cómo Crear un Componente de Blazor

Introducción

mas parrafos

Iniciamos el proceso

Titulo markdown

Titulo markdown

Grouped

Ejemplo con Heading 4 y código

Exclusive expand

Exclusive expand

Ejemplo JSON Viewer

Ejemplo Tree File

Ejemplo Console

Iniciamos el proceso

Ejemplo de Grupo de Código en Tabs

Título

🔍 Debugging

Qué es y Cómo Crear un Componente de Blazor

Introducción

Ejemplo con Heading 4 y `código`