DEV Community: Leticia Campos

Como adicionar um menu de contexto "abrir com VS Code" ao Windows Explorer?

Leticia Campos — Mon, 05 Jul 2021 02:00:58 +0000

Segue tutorial:

1) Abra um novo bloco de notas (notepad) e salva o documento com o nome vsCodeOpenFolder.reg e o tipo como todos os arquivos

2) Cole o seguinte script dentro desse documento em branco:



Windows Registry Editor Version 5.00
; Open files

[HKEY_CLASSES_ROOT\*\shell\Open with VS Code]
@="Edit with VS Code"
"Icon"="C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe,0"

[HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]
@="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\""

; This will make it appear when you right click ON a folder
; The "Icon" line can be removed if you don't want the icon to appear

[HKEY_CLASSES_ROOT\Directory\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0"

[HKEY_CLASSES_ROOT\Directory\shell\vscode\command]
@="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\""

; This will make it appear when you right click INSIDE a folder
; The "Icon" line can be removed if you don't want the icon to appear

[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0"

[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]
@="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%V\""

3) Clique no arquivo 2 vezes e execute:

4) Feito isso será exibido a opção de "Open Folder as VS Code" ao seu windows explorer:

Como adicionar um menu de contexto "abrir git-bash aqui ..." ao Windows Explorer?

Leticia Campos — Mon, 05 Jul 2021 01:21:20 +0000

Segue tutorial:

1) Abra um novo bloco de notas (notepad) e salva o documento com o nome OpenGitBash.reg e o tipo como todos os arquivos

2) Cole o seguinte script dentro desse documento em branco:



Windows Registry Editor Version 5.00
; Open files
; Default Git-Bash Location C:\Program Files\Git\git-bash.exe

[HKEY_CLASSES_ROOT\*\shell\Open Git Bash]
@="Open Git Bash"
"Icon"="C:\\Program Files\\Git\\git-bash.exe"

[HKEY_CLASSES_ROOT\*\shell\Open Git Bash\command]
@="\"C:\\Program Files\\Git\\git-bash.exe\" \"--cd=%1\""

; This will make it appear when you right click ON a folder
; The "Icon" line can be removed if you don't want the icon to appear

[HKEY_CLASSES_ROOT\Directory\shell\bash]
@="Open Git Bash"
"Icon"="C:\\Program Files\\Git\\git-bash.exe"


[HKEY_CLASSES_ROOT\Directory\shell\bash\command]
@="\"C:\\Program Files\\Git\\git-bash.exe\" \"--cd=%1\""

; This will make it appear when you right click INSIDE a folder
; The "Icon" line can be removed if you don't want the icon to appear

[HKEY_CLASSES_ROOT\Directory\Background\shell\bash]
@="Open Git Bash"
"Icon"="C:\\Program Files\\Git\\git-bash.exe"

[HKEY_CLASSES_ROOT\Directory\Background\shell\bash\command]
@="\"C:\\Program Files\\Git\\git-bash.exe\" \"--cd=%v.\""

3) Clique no arquivo 2 vezes e execute:

4) Feito isso será exibido a opção de "Open to GitBash" ao seu windows explorer:

Escrevendo textos no formato Markdown usando o Notepad++

Leticia Campos — Sat, 26 Jun 2021 23:55:22 +0000

O Notepad++ é um editor de texto de código aberto, simples, leve e prático de ser utilizado, pois ele permite trabalhar com arquivos de textos simples e código-fonte de diversas linguagens de programação.

Poucas pessoas sabem, mas é possível adicionar novas funcionalidades a esta ferramenta através da instalação de alguns plugins e neste artigo irei abordar o plugin MarkdownViewer++

O MarkdownViewer++ é um plugin do Notepad++ que permite digitar um arquivo do tipo Markdown e ver a visualização em tempo real, em um painel de visualização.

Instalação

Para instalá-lo, use o gerenciador de plugins do Notepad++

Abra o Notepad++ e vá para Plugins → Gerenciador de plugins → Mostrar Gerenciador de plugins

Pesquise por "MarkdownViewer++", selecione e clique na opção "Instalar"

Será feito o download e instalação de forma automática. Nesse ponto, o editor deve ser reiniciado e perguntará se você deseja fazê-lo imediatamente (para que não haja risco de perder seu trabalho).

Após a reinicialização, basta escrever um documento texto e selecionar a opção Plugins → MarkdownViewer++ → MarkdownViewer++

Além desta funcionalidade, com o plugin MarkdownViewer você tem:

Suporte ao CommonMark
É possível exportar o resultado para HTML ou PDF
O painel de visualização pode ser movido, redimensionado e encaixado

Criando arquivos de configuração para ambientes de release e debug .net com SlowCheetah

Leticia Campos — Thu, 22 Apr 2021 00:13:02 +0000

Ao desenvolver uma aplicação do tipo Windows Services, Windows Forms ou Console Application nos deparamos com 2 tipos de ambientes de desenvolvimento: Release e Debug.

Por padrão essas aplicações contém o seguinte arquivo de configuração: App.config

Para criar os arquivos de configuração por ambiente será necessário adicionar a extensão SlowCheetah no seu Visual Studio

Em seguida instalar o pacote do SlowCheetah no seu projeto

Após concluir a instalação será adicionado a referência dentro do arquivo packages.config e caso você ainda não tenha o arquivo o mesmo será gerado de forma automática.

Com tudo instalado, clique em cima do App.config com o botão direito e será exibido a opção de adicionar transformação

Ao clicar nessa opção será gerado dois arquivos App.Debug.config e App.Release.config

No arquivo principal App.Config adicione a tag e dentro dela crie algumas chaves e valores correspondentes, na minha aplicação de exemplo ficou assim:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <appSettings>
        <add key="Cep" value="01001000"/>
        <add key="Formato" value="json"/>
    </appSettings>
</configuration>

A minha aplicação realiza a busca de endereços a partir da API de busca CEP passando como parâmetro o CEP e o formato de retorno

Nos arquivos de configuração por ambiente App.Debug.Config e App.Release.Config será necessário adicionar os campos xdt:Transform="SetAttributes" e xdt:Locator="Match(key)" em toda propriedade, no meu caso ficou assim:

App.Release.Config

<?xml version="1.0" encoding="utf-8"?>
<!--For more information on using transformations see the web.config examples at http://go.microsoft.com/fwlink/?LinkId=214134. -->
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
    <appSettings>
        <add key="Cep" value="22222000" xdt:Transform="SetAttributes" xdt:Locator="Match(key)"/>
        <add key="Formato" value="json" xdt:Transform="SetAttributes" xdt:Locator="Match(key)"/>
    </appSettings>
</configuration>

App.Debug.Config

<?xml version="1.0" encoding="utf-8"?>
<!--For more information on using transformations see the web.config examples at http://go.microsoft.com/fwlink/?LinkId=214134. -->
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
    <appSettings>
        <add key="Cep" value="77777000" xdt:Transform="SetAttributes" xdt:Locator="Match(key)"/>
        <add key="Formato" value="json" xdt:Transform="SetAttributes" xdt:Locator="Match(key)"/>
    </appSettings>
</configuration>

Dessa forma o compilador em tempo de execução irá trocar os valores configurados no arquivo principal por aqueles configurados no ambiente em execução.

Para realizar o teste, no Visual Studio tem a opção de selecionar o ambiente (no meu caso vou deixar o de release)

Criei o seguinte código para obter as propriedades do ambiente

        private CEP ObtemPropriedadesDoAmbiente
        {
        get
            {
                CEP dados = new CEP();
                dados.Cep = ConfigurationManager.AppSettings["Cep"];
                dados.Formato = ConfigurationManager.AppSettings["Formato"];
                return dados;

            }
        }

E os dados retornados, será o que foi configurado no ambiente de release

Bom, é isso pessoal!

Espero que tenham gostado e até o próximo post :)

Executando o SQL Server em um contêiner docker 🐳 no windows

Leticia Campos — Wed, 21 Apr 2021 22:47:51 +0000

Pré-requisitos:

O Docker for Windows, que permitirá a criação de imagens e contêiners para testes em máquinas de desenvolvimento baseadas no Windows 10;
O Windows PowerShell para a execução de comandos envolvendo o uso do Docker.
Após instalar o docker for windows para executar contêiners do Windows, você precisa "Alternar para contêineres do Windows" no menu Docker:

Imagens retiradas no seguinte tópico do stackoverflow

1. Baixando a imagem do SQL Server e criando o container

Abra o terminal PowerShell do windows e digite o seguinte comando:

docker pull microsoft/mssql-server-windows-developer

Aguarde o download finalizar e digite no terminal o comando para listar as informações da imagem:

docker image ls ou docker images

2. Para executar a imagem de contêiner com o Docker, você pode usar o comando:

docker run -d -p 1433:1433 -e sa_password=<SA_PASSWORD> -e ACCEPT_EULA=Y microsoft/mssql-server-windows-developer

A tabela a seguir fornece uma descrição dos parâmetros no exemplo de docker run anterior:

Parâmetro	Descrição
-e "ACCEPT_EULA=Y"	Defina a variável ACCEPT_EULA com qualquer valor para confirmar sua aceitação dos Termos de Licença. Configuração exigida para a imagem do SQL Server.

-e "SA_PASSWORD="	Especifique sua própria senha forte que tenha pelo menos 8 caracteres e atenda aos Requisitos de senha do SQL Server. Configuração exigida para a imagem do SQL Server.

-p 1433:1433	Mapeie uma porta TCP no ambiente do host (primeiro valor) para uma porta TCP no contêiner (segundo valor). Neste exemplo, o SQL Server está escutando na TCP 1433 no contêiner e isso é exposto para a porta 1433 no host.

microsoft/mssql-server-windows-developer	A imagem de contêiner do SQL Server Windows Developer.

🐳 Docker: comandos básicos

Leticia Campos — Thu, 25 Feb 2021 03:29:08 +0000

Se você é iniciante nesse mundo de containers assim como eu, este guia de será muito útil para dar esses primeiros passos e relembrar alguns comandos.

docker images

Lista todas as imagens existentes na máquina, exceto as intermediárias.

docker images -a

Lista todas as imagens existentes na máquina, inclusive as intermediárias.

docker rmi <IMAGE-ID>

Apaga todos os containers dependentes da imagem e só depois remove a imagem.

docker rmi -f <IMAGE-ID>

Usamos o force(-f) para forçar os containers dependentes da imagem ser apagado e depois remover a imagem, mesmo que ele esteja em execução.

Guias:

Instalando um container docker SQL Server no windows: https://medium.com/@renato.groffe/net-sql-server-2017-parte-1-executando-o-sql-server-em-um-container-docker-83abbed8eb7e

Indo além do console.log

Leticia Campos — Thu, 18 Feb 2021 10:39:58 +0000

Durante o desenvolvimento web é muito comum utilizar o método console.log para depurar um código JavaScript, mas você sabia que o console é um objeto? E é este objeto que fornece acesso ao console de debug do navegador.

De acordo com o portal developer.mozilla.org:

O funcionamento dessa console API varia de navegador para navegador.

Neste artigo foi utilizado o navegador Chrome 😉.

Para visualizar quais são os métodos possíveis do console, basta digitar console.log(console) no terminal e você terá um retorno parecido com esse:

console {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …}
assert: ƒ assert()
clear: ƒ clear()
context: ƒ context()
count: ƒ count()
countReset: ƒ countReset()
debug: ƒ debug()
dir: ƒ dir()
dirxml: ƒ dirxml()
error: ƒ error()
group: ƒ group()
groupCollapsed: ƒ groupCollapsed()
groupEnd: ƒ groupEnd()
info: ƒ info()
log: ƒ log()
memory: (...)
profile: ƒ profile()
profileEnd: ƒ profileEnd()
table: ƒ table()
time: ƒ time()
timeEnd: ƒ timeEnd()
timeLog: ƒ timeLog()
timeStamp: ƒ timeStamp()
trace: ƒ trace()
warn: ƒ warn()
Symbol(Symbol.toStringTag): "Object"
get memory: ƒ ()
set memory: ƒ ()
__proto__: Object

Aqui neste artigo irei abordar somente os seguintes métodos:

log
log-css
warn
error
table
group
count
time

🗃️ console.log

O método log() existe essencialmente para permitir o envio de dados para o console de depuração do navegador. Pode ser enviada qualquer informação, normalmente com o intuito de depurar código.

console.log([
    { book: "Domain-Driven Design: Atacando as Complexidades no Coração do Software", author: "Martin Fowler" }, 
    { book: "Arquitetura Limpa: O guia do artesão para estrutura e design de software", author: "Robert C. Martin" },
    { book: "Por que os generalistas vencem em um mundo de especialistas", author: "David Epstein" }
]);

saída:

(3) [{…}, {…}, {…}]
0:
author: "Martin Fowler"
book: "Domain-Driven Design: Atacando as Complexidades no Coração do Software"
__proto__: Object
1:
author: "Robert C. Martin"
book: "Arquitetura Limpa: O guia do artesão para estrutura e design de software"
__proto__: Object
2:
author: "David Epstein"
book: "Por que os generalistas vencem em um mundo de especialistas"
__proto__: Object
length: 3
__proto__: Array(0)

🎨 console.log com css

Já imaginou usar o método log() personalizando a mensagem com CSS? Sim, é possível.

exemplo:

const style = 'color:red; font-size:30px; font-weight: bold; -webkit-text-stroke: 1px black;'
console.log("%c JavaScript é muito maneiro!", style);

saída:

⚠️ console.warn

O método warn() possui um comportamento parecido com o .log() em alguns navegadores ele inclui um ícone de warning a mensagem.

console.warn('mensagem de warning');

saída

❌ console.error

O método error() possui um comportamento parecido com o .log() em alguns navegadores ele inclui um ícone de erro a mensagem.

console.error('mensagem de erro');

saída

📑 console.table

O método table() exibe qualquer dado do tipo array de array, array de objetos ou um objeto com objetos aninhados formatados em uma tabela.

console.table([
    { book: "Domain-Driven Design: Atacando as Complexidades no Coração do Software", author: "Martin Fowler" }, 
    { book: "Arquitetura Limpa: O guia do artesão para estrutura e design de software", author: "Robert C. Martin" },
    { book: "Por que os generalistas vencem em um mundo de especialistas", author: "David Epstein" }
]);

saída

👪 console.group

O método group() exibe os dados de forma estruturada, sendo capaz de criar estruturas profundas e recolhíveis em seu console. Dessa forma é possível ocultar e organizar os seus registros.

Cada chamada de console feita após invocar o método de grupo, encontrará seu lugar dentro do grupo criado. Para finalizar, você deve usar um console.groupEnd()

console.group();
console.log("Esse é o 1° Grupo");
console.group();
console.log("Esse é o 2° Grupo");
console.groupEnd();
console.groupEnd();
console.log("Sai do escopo de grupos");

saída

🧮 console.count

O método count() conta quantas vezes ele foi chamado, esse é um método muito útil no caso de você ter tantos logs na sua aplicação e não sabe quantas vezes determinadas partes do código foram executadas. Para redefinir o contador utilize o método console.countReset().

console.count();
console.count();
console.count();
console.countReset();
console.count();

saída

default: 1
default: 2
default: 3
default: 1

⌚ console.time

O método time() serve como uma contagem de tempo, sendo possível fazer testes de desempenho rápidos para partes do seu código. Neste exemplo inicio com um console.time() método que pode receber um argumento opcional como um rótulo ou identificação para o temporizador fornecido. O cronômetro mencionado inicia apenas no momento de invocar este método. Em seguida, uso os métodos console.timeLog() e console.timeEnd() (com argumento de rótulo opcional) para registrar seu tempo (em milissegundos) e encerrar o cronômetro respeitado de acordo.

console.time();
// trecho de código 1
console.timeLog(); // default: [time] ms
// trecho de código 2
console.timeEnd(); // default: [time] ms

saída

default: 0.009033203125 ms
default: 0.151123046875 ms

E ai, o que achou? Muito legal né? Caso tenha algum método que não foi abordado aqui mas que você tenha dúvidas de sua implementação e funcionalidade, fique a vontade para comentar 😊