[Article] Visual Studio Code | Tips 4

En post anteriores vimos funcionalidades que posee la herramienta. En este post veremos plugins. Visual Studio Code posee una gran variedad de plugins que pueden cubrir todas nuestras necesidades. Veremos algunos de los más recomendados.

Bookmarks

Este plugin nos permitirá poner marcar en nuestros archivos para luego poder movernos entre estos para ubicar las secciones  de código que deseamos. con el comando Ctrl + Alt + K marcamos o desmarcamos el código. Se podrá ver un icono celesta del lado izquierdo.  Una vez que marcamos el código podemos movernos hacia adelante con Ctrl + Alt + L y hacia atrás con Ctrl + Alt + J.

Prettier

Prettier es un formateador de código para javascript, typescript y css. Presionaremos Ctrl + Shift + P para ingresar a la paleta de comandos, tipeamos Format Document y presionamos enter. Automáticamente el código de idéntica de la forma correcta.

Paste Json As Code

Paste Json as Code nos ayuda a copiar código JSON desde cualquier lugar y pegarlo en nuestro editor dependiendo el tipo o lenguaje que seleccionemos. Lo que hara sera tirar el objeto JSON. Para esto seleccionamos nuestro código JSON, luego presionamos Ctrl + Shift + P y tipeamos Paste JSon as Code (recordemos que detectara el lenguaje del archivo destino por su extensión), le damos un nombre y presionamos enter. Nuestro código, en el caso del ejemplo, se tipara en C#.

GitLens

GitLens dará la capacidad de poder ver que comentarios referentes a git tiene el codigo el cual estamos trabajando. Es una herramienta muy útil que nos dice que cosas estan sin commit o quién fue el último en modificar ese código.

Project Manager

Este plugin agrega una nueva funcionalidad a Visual Studio Code. Normalmente solamente podemos abrir una carpeta de proyecto, pero con Project Manager podremos abrir varias carpetas en nuestro entorno de trabajo.

Live Server

Si somos desarrolladores web nos servirá de mucha ayuda un servidor Web. Lo que hace este plugin es tener un servidor web disponible que irá reflejando los cambios a medida que vamos modificando nuestro código.

Conclusión

Visual Studio Code es una poderosa herramienta para desarrolladores. Tiene una gran cantidad de funcionalidad pensadas para nosotros, y si no las tiene, algun plugin puede ayudarnos con lo que necesitamos. No se pierdan de probar esta herramienta.

[Article] Visual Studio Code | Tips 3

Como vimos en el post anterior, Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. En este post vamos a ver mas funcionalidades de la herramienta que no ayudaran con nuestro código.

EDITING HACKS

La herramienta posee un gran cantidad de funciones dentro del editor de texto que hace que sea más sencillo y rápido editar mientras estamos desarrollando. Veremos algunas de ellas.

Selección Múltiple

Si queremos editar varios valores que pertenecen a una columna debemos presionar Alt + Click seleccionado el lugar donde queremos comenzar. Luego presionando Ctrl + Alt  + Up o Down seleccione la filas.

Podemos seleccionar una secuendi de tag para editarlos. Seleccionaremos el tag y presionamos Ctrl + D hasta el tag final.

Siempre seleccionamos por filas para editar y cuando debemos modificar una columna debemos ir fila por fila para poder editarlo. Ya no es necesarios. La edición de columnas nos ayudará con este problema. Debemos mantener presionado Shift + Alt y arrastre el cursor para seleccionar las columnas.

Copiar Filas

Cuando copiamos filas la ejecución clásica es: primero, seleccionar filas, luego presionar Ctrl + C, bajar una fila y presionar Ctrl + V. Con Shift + Alt + Up y Shift + Alt + Down podemos hacer lo mismo copiando hacia arriba o hacia abajo la fila en la cual estamos posicionados.

Mover Filas

De la misma forma que duplicamos filas, podemos mover bloque de código hacia arriba o hacia abajo. En caso de ser html respetará los tags. Si solo estamos ubicados en una línea moverá solamente esa línea

Formateo Automático de Código

Supongamos que tenemos una persona en el equipo desordenada. Escribe su código sin respetar el formato del código que está haciendo. Para ordenarlo podemos seleccionar el código y presionar Ctrl +K + F.

Ventana rápida de referencias

Seleccionaremos un objeto, luego presionamos Shift + F12, se abrirá una ventana donde podemos ver el listado de archivo junto al código de donde ese objeto está siendo referenciado.

Para buscar todas las referencias debemos presionar Shift + Alt + F12.

Renombrado de Símbolos

Imaginemos que declaramos un objeto con un nombre erróneo y ese objeto fue utilizado en un gran cantidad de sitios. ¿Estamos perdidos? No! podemos seleccionar el símbolo, presionar F2 y cambiar el nombre. Automaticamente se abrira todos los archivos los cuales fueron afectados por el cambio.

[Article] Visual Studio Code | Tips 1

Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. Desde su lanzamiento en el 2015, hasta estos días, ha tenido una evolución constante con grandes mejoras y muchas nuevas funcionalidades con cada nueva versión. A pesar de ser una herramienta bastante joven, ha escalado hasta el primer puesto entre los IDE de código fuente livianos del mercado. En esta serie de publicaciones vamos a ver algunos trucos, funcionalidades y plugins que podemos encontrar en esta fabulosa herramienta, como también, cómo nos ayudará a agilizar nuestra escritura de código, como también, optimizar nuestros tiempos..

Les dejo el link de descarga https://code.visualstudio.com/

Themes

Una de las funcionalidades que pocos conocen es la de los temas.  Visual Studio Code viene con varios temas para seleccionar que podemos elegir según a nuestro gusto. Para esto presionamos <F1> , tipeamos theme, presionamos <enter>, por último, seleccionaremos Preferences: Color Theme. Esto nos mostrará el listado de temas disponibles.

Podemos seleccionar el que más nos guste de la lista o bien agregar más temas si lo deseamos. Ingresamos nuevamente a la lista y elegimos la opción Install Additional Color Themes. Esto nos llevará a una lista descargable para seleccionar el que deseemos.

Iconos por tipo de archivo

Cada vez que creamos un archivo nuevo, Visual Studio Code, reconocerá la extensión y nos mostrará el icono relacionado con ese tipo de archivo. Posee una gran cantidad de iconos. Tenemos disponibles para casi todos  de los lenguajes más utilizados en el mercado.

Font Ligatures

Esta funcionalidad básicamente une algunos símbolos en un solo . Hace que la lectura de código sea más fácil del código y legible. Por ejemplo, si tenemos que escribir === será transformado a ☰. Parece ser más sencillo y natural de leer.  Otro ejemplo, si queremos hacer una arrow function, =>, sera cambiado por el símbolo ⇒.

Para tener disponible esta característica, lo primero que debemos hacer es descargar e instalar la fuente Fira Code. Les dejo el link para que lo descarguen.

https://github.com/tonsky/FiraCode#solution

Lo segundo que debemos hacer es agregar a la familia de fuentes la fuente Fira Code desde la configuración de VS Code. Presionamos <F1>, tepeamos User Setting, buscaremos en  la configuración a editar fontFamily y le agregamos Fira Code. Luego buscamos  fontLigatures y la activamos, esta funcionalidad viene desactivada por default.

Playground

Supongamos que queremos ver todos los features que posee Visual Studio Code. La manera de hacerlo es ingresando a la barra de comandos con <F1> y escribimos Playground. Seleccionamos Help: Interactive Playground. Esto nos mostrará todo el listado completo.

Panels

La funcionalidad de múltiples editores nos ayudará a tener varios archivos al mismo tiempo y poder visualizarlos de una forma simple. Por ejemplo, en angular, casi siempre tengo 2 archivos abiertos, el componente y la vista. Tenemos 2 maneras de dividirlo, la primera es por el icono que se encuentra arriba a la derecha. La segunda opción es por medio de Ctrl + \. Podemos dividir en la cantidad de columnas que deseemos.

Otra funcionalidad es la Grilla 2×2. Esta podemos activarla desde el menú View – Editor Layout – Grid (2×2). Nos dividirá la pantalla en 4 permitiendo visualizar 4 archivos al mismo tiempo.

Zen Mode

Trabajamos en pantalla completa!!!. Al activar ZenMode el Visual Studio Code ocultara todo, todas las barras y menús, se ampliará a todo nuestro screen permitiendo hacer foto 100% en lo que estamos trabajando.

Conclusión

Visual Studio Code se ha vuelto una poderosa herramienta para desarrolladores que podemos usar con la gran  mayoría de los lenguajes. En próximos post veremos más características de la herramienta.

[HowTo] VS Code | Crear una WebApi con Asp.Net Core en Linux

Como comente en post anterior Microsoft está entrando fuertemente al mundo OpenSource. Por esta razon hoy podemos disfrutar de Asp.Net Core en la plataforma Linux, en mi caso KUbuntu, junto a algunas herramientas muy poderosas com VS Code.

Objetivo

El objetivo de esta publicación tiene un tutorial de como debemos preparar nuestro linux para hacer uso de Asp.Net junto a una aplicacion del tipo WebApi que usaremos en post futuros.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Para empezar lo que haremos es instalar Net Core es nuestro linux. Lo haré sobre mi distribución preferida que es KUbuntu. Primero necesitamos instalar las llaves de producto y actualizar el listado de paquetes en nuestra distribución linux. Abriremos una consola y ejecutamos los siguiente comandos estos 4 comandos en este orden:

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor &amp;amp;amp;amp;amp;amp;amp;gt; microsoft.gpg
sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/microsoft-ubuntu-zesty-prod zesty main" &amp;amp;amp;amp;amp;amp;amp;gt; /etc/apt/sources.list.d/dotnetdev.list'
sudo apt-get update

 

Ya ejecutado todo estamos listos para instalar:

sudo apt-get install dotnet-sdk-2.0.0

Una vez que instalamos todo y configurado estamos listso. Vamos a crear nuestra primera aplicación en linux. Crearemos una carpeta y ejecutaremos el comando dotnet que nos ayuda a crear la plantilla:

mkdir MvcMyApp
cd MvcMyApp
dotnet new mvc

Ahora podemos abrir desde VS Code que instalamos en un post anterior. Con Solo escribir “code .” se abrirar el VS Code en la carpeta donde estamos parados. Ahora necesitaremos instalar VS Code C# extensión. Lo haremos desde el icono de VS Code, lo buscaremos y lo instalaremos.

Luego de instalarlo recargamos la ventana y comenzará a instalarse algunos componentes necesarios que nos permitirá usar la depuración en VS Code.

Ahora solo nos queda presionar F5 y guala!

 

Una WebApi para ejemplos

Lo que haremos ahora es crear una WebApi Rest que la usaremo en futuros ejemplos en un el tutorial de TypeScript. Vamos a necesitar tener instalado:

  • DB Browser for Sqlite (podemos instalarlos desde el gestor de software que viene con KUbuntu.
  • Postman (podemos descargarlo desde aqui https://www.getpostman.com/)

Empezaremos con crear una carpeta DemoApi y dentro ejecutaremos los comandos de creación y lo abriremos, solo hay que seguir los siguientes comando en orden:

mkdir DemoService
cd DemoService
dotnet new webapi
code .

Nuevamente nos aparecerán los warning a los que debemos darle yes.

Crearemos la base de datos con Sql DB Browser dentro de una carpeta data. La base de Datos la llamaremos DBDemoServices y corremos el script que dejare en el github dentro de la carpeta data se llama base.txt. Este script creará 2 tablas e insertara datos para hacer el demo.

En nuestro servicio usaremos Entity Framework Core como herramienta de acceso a datos. No ayudará con nuestra base de datos Sqlite. Agregaremos las siguientes lineas en nuestro archivo DemoService.csproj:

&lt;PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="2.0.0" /&gt;
&lt;PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="2.0.0"/&gt;

Desde la consola ejecutaremos dotnet restore para actualizar nuestros paquetes:

Comenzaremos creando nuestros modelos y nuestro DBContext. Crearemos 3 archivos, Customer.cs, CustomerType y DemoServiceContext.cs. Todos dentro de una carpeta Models con la siguiente clases dentro:

Customer.cs

using System;
using System.Collections.Generic;

namespace DemoService.Models
{
public partial class Customers
{
public int CustomerId { get; set; }
public string FirstName { get; set; }
public string MiddleName { get; set; }
public string SurName { get; set; }
public string EmailAddress { get; set; }
public int? CustomerTypeId { get; set; }
public string Notes { get; set; }

public virtual CustomersTypes CustomerType { get; set; }
}
}

CustomerType.cs

using System;
using System.Collections.Generic;

namespace DemoService.Models
{
public partial class CustomersTypes
{

public CustomersTypes()
{
Customers = new HashSet&amp;amp;amp;amp;amp;amp;amp;lt;Customers&amp;amp;amp;amp;amp;amp;amp;gt;();
}

public int CustomerTypeId { get; set; }
public string Description { get; set; }

public virtual ICollection&amp;amp;amp;amp;amp;amp;amp;lt;Customers&amp;amp;amp;amp;amp;amp;amp;gt; Customers { get; set; }

}

}

DemoServiceContext.Typecs

using Microsoft.EntityFrameworkCore;
using DemoService.Models;

namespace DemoService.Models
{
public class DemoDBContext : DbContext
{
public DemoDBContext(DbContextOptions&lt;DemoDBContext&gt; options)
: base(options)
{
}
public virtual DbSet&lt;Customers&gt; Customers { get; set; }
public virtual DbSet&lt;CustomersTypes&gt; CustomersTypes{ get; set; }

protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
optionsBuilder.UseSqlite("Filename=BDemoSevice.db;");
}

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
modelBuilder.Entity&lt;Customers&gt;(entity =&gt;
{
entity.HasKey(e =&gt; e.CustomerId)
.HasName("PK_Customers");

entity.Property(e =&gt; e.EmailAddress).HasColumnType("varchar(150)");

entity.Property(e =&gt; e.FirstName).HasColumnType("varchar(50)");

entity.Property(e =&gt; e.MiddleName).HasColumnType("varchar(50)");

entity.Property(e =&gt; e.Notes).HasColumnType("varchar(5000)");

entity.Property(e =&gt; e.SurName).HasColumnType("varchar(50)");

entity.HasOne(d =&gt; d.CustomerType)
.WithMany(p =&gt; p.Customers)
.HasForeignKey(d =&gt; d.CustomerTypeId)
.HasConstraintName("FK_Customers_CustomersTypes");
});

modelBuilder.Entity&lt;CustomersTypes&gt;(entity =&gt;
{
entity.HasKey(e =&gt; e.CustomerTypeId)
.HasName("PK_CustomersTypes");

entity.Property(e =&gt; e.CustomerTypeId).ValueGeneratedNever();

entity.Property(e =&gt; e.Description).HasColumnType("varchar(50)");
});
}

}
}

Debemos agregar en nuestro archivo Startup.cs la inyección de nuestra base de datos.

public void ConfigureServices(IServiceCollection services){
services.AddMvc();
services.AddDbContext&amp;amp;amp;amp;amp;amp;amp;lt;DemoDBContext&amp;amp;amp;amp;amp;amp;amp;gt;();
}

Ahora que tenemos todo configurado crearemos dentro de la carpeta Controllers un archivo llamado customers.cs donde tendremos nuestra api:

CustomersControllers.cs

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using DemoService.Models;
using System.Linq;

namespace DemoService.Controllers
{
[Route("api/[controller]")]
public class CustomersController : Controller
{
private readonly DemoDBContext _context;

public CustomersController(DemoDBContext context)
{
_context = context;
}

[HttpGet]
public IEnumerable&lt;Customers&gt; GetAll()
{
return _context.Customers.ToList();
}

}
}

Para comprobar que funciona correctamente ejecutaremos la aplicación presionando F5 y lo invocamos con el Postman:

Bien está funcionando correctamente. Agregamos los métodos de crear, editar y eliminar y también agregaremos el CustomersTypesController.cs y un modelo que será ModeCustomerPage.cs que será para devolver páginas de Customers.

Models/ViewModelPage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using DemoService.Models;

namespace DemoService.Models
{
public class ViewModelPage
{
public int CountPages { get; set; }
public int CountCustomers { get; set; }
public int ActualPage { get; set; }
public IList&lt;Customers&gt; customers { get; set; }
}
}

CustomersControllers.cs

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using DemoService.Models;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;

namespace DemoService.Controllers
{
[Route("api/[controller]")]
public class CustomersController : Controller
{
private readonly DemoDBContext _context;

public CustomersController(DemoDBContext context)
{
_context = context;
}

[HttpGet]
public IEnumerable&lt;Customers&gt; GetCustomers()
{
return _context.Customers;
}

[HttpGet("{id}")]
public async Task&lt;IActionResult&gt; GetCustomers([FromRoute] int id)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

var customers = await _context.Customers.SingleOrDefaultAsync(m =&gt; m.CustomerId == id);

if (customers == null)
{
return NotFound();
}

return Ok(customers);
}

[HttpGet]
[Route("{numberPage}/{perPage}")]
public ViewModelPage GetCustomerPaging(int numberPage, int perPage)
{

int _customersCount = GetCustomers().Count();
int _countPages = (_customersCount / perPage) + ( _customersCount % perPage == 0 ? 0 : 1);

var page = new ViewModelPage();
page.ActualPage = numberPage;
page.CountCustomers = GetCustomers().Count();
page.CountPages = _countPages;
page.customers = GetCustomers().Skip(numberPage * perPage).Take(perPage).ToList();

return page;
}

[HttpPut("{id}")]
public async Task&lt;IActionResult&gt; PutCustomers([FromRoute] int id, [FromBody] Customers customers)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

if (id != customers.CustomerId)
{
return BadRequest();
}

_context.Entry(customers).State = EntityState.Modified;

try
{
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!CustomersExists(id))
{
return NotFound();
}
else
{
throw;
}
}

return NoContent();
}

[HttpPost]
public  IActionResult PostCustomers([FromBody] Customers customers)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

_context.Customers.Add(customers);
_context.SaveChanges();

return CreatedAtAction("GetCustomers", new { id = customers.CustomerId }, customers);
}

[HttpDelete("{id}")]
public async Task&lt;IActionResult&gt; DeleteCustomers([FromRoute] int id)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

var customers = await _context.Customers.SingleOrDefaultAsync(m =&gt; m.CustomerId == id);
if (customers == null)
{
return NotFound();
}

_context.Customers.Remove(customers);
await _context.SaveChangesAsync();

return Ok(customers);
}

private bool CustomersExists(int id)
{
return _context.Customers.Any(e =&gt; e.CustomerId == id);
}

}
}

CustomersTypesControllers.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using DemoService.Models;

namespace DemoService.Controllers
{

[Route("api/[controller]")]
public class CustomersTypesController : Controller
{
private readonly DemoDBContext _context;

public CustomersTypesController(DemoDBContext context)
{
_context = context;
}

[HttpGet]
public IEnumerable&lt;CustomersTypes&gt; GetCustomersTypes()
{
return _context.CustomersTypes;
}

[HttpGet("{id}")]
public async Task&lt;IActionResult&gt; GetCustomersTypes([FromRoute] int id)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

var customersTypes = await _context.CustomersTypes.SingleOrDefaultAsync(m =&gt; m.CustomerTypeId == id);

if (customersTypes == null)
{
return NotFound();
}

return Ok(customersTypes);
}

[HttpPut("{id}")]
public async Task&lt;IActionResult&gt; PutCustomersTypes([FromRoute] int id, [FromBody] CustomersTypes customersTypes)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

if (id != customersTypes.CustomerTypeId)
{
return BadRequest();
}

_context.Entry(customersTypes).State = EntityState.Modified;

try
{
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!CustomersTypesExists(id))
{
return NotFound();
}
else
{
throw;
}
}

return NoContent();
}

[HttpPost]
public async Task&lt;IActionResult&gt; PostCustomersTypes([FromBody] CustomersTypes customersTypes)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

_context.CustomersTypes.Add(customersTypes);
try
{
await _context.SaveChangesAsync();
}
catch (DbUpdateException)
{
if (CustomersTypesExists(customersTypes.CustomerTypeId))
{
return new StatusCodeResult(StatusCodes.Status409Conflict);
}
else
{
throw;
}
}

return CreatedAtAction("GetCustomersTypes", new { id = customersTypes.CustomerTypeId }, customersTypes);
}

[HttpDelete("{id}")]
public async Task&lt;IActionResult&gt; DeleteCustomersTypes([FromRoute] int id)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

var customersTypes = await _context.CustomersTypes.SingleOrDefaultAsync(m =&gt; m.CustomerTypeId == id);
if (customersTypes == null)
{
return NotFound();
}

_context.CustomersTypes.Remove(customersTypes);
await _context.SaveChangesAsync();

return Ok(customersTypes);
}

private bool CustomersTypesExists(int id)
{
return _context.CustomersTypes.Any(e =&gt; e.CustomerTypeId == id);
}
}
}

Listo nuestra aplicación está completa ahora probaremos un post con el postman.

Conclusión

Hemos instalado y configurado .Net Core y Asp.Net Core en nuestro linux. También hicimos una pequeña base de datos y nos conectamos a ella por medio de WebApi para tener servicio Rest. Estos servicios rest los usaremos en otros post para algunos ejemplo. Pueden descargar el código complete de GitHub desde esta url https://github.com/withoutdebugger/DemoService