🧙‍♂️ Use esses atalhos do VS Code para programar muito mais rápido!

Nesse post você irá aprender atalhos do VS Code que irão aumentar muito a sua produtividade e você conseguirá programar muito mais rápido.

E no final deixei alguns desafios para vocês praticarem.

---

Irei usar de exemplo esse código de um controller Nestjs.

import {
  Controller,
  Get,
  Post,
  Body,
  Patch,
  Param,
  Delete,
} from '@nestjs/common';
import { ExpenseService } from './expense.service';
import { CreateExpenseDto } from './dto/create-expense.dto';
import { UpdateExpenseDto } from './dto/update-expense.dto';

@Controller('expense')
export class ExpenseController {
  constructor(private readonly expenseService: ExpenseService) {}

  @Post()
  create(@Body() createExpenseDto: CreateExpenseDto) {
    return this.expenseService.create(createExpenseDto);
  }

  @Get()
  findAll() {
    return this.expenseService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.expenseService.findOne(+id);
  }

  @Patch(':id')
  update(@Param('id') id: string, @Body() updateExpenseDto: UpdateExpenseDto) {
    return this.expenseService.update(+id, updateExpenseDto);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.expenseService.remove(+id);
  }
}

Legenda dos atalhos: “<ATALHO_MAC>” (”<ATALHO_WINDOWS>”)

• Renomear variáveis: F2
  • Selecione ou coloque o cursor na variável expenseService,
  • Aperte F1
  • Digite o novo nome e aperte Enter
• Edição em múltiplas linhas
  • Selecionando o próximo valor igual : CMD + D (Ctrl + D)
    • Selecione o parametro :id e aperte CMD + D
    • Percebe que agora existem dois cursores, um selecionando o primeiro :id e outro no próximo texto igual.
    • Digite um novo valor e perceba que se pode editar mais de uma linha ao mesmo tempo
  • Selecione todas os valores iguais: CMD + Shift + L (Ctrl + Shift + L)
    • Você pode fazer o mesmo que o passo anterior, mas pode apertar CMD + Shift + L e irá selecionar todos os valores iguais
  • Selecionando linhas específicas: Option + Click (Alt + Click)
    • Você pode fazer o mesmo que o passo anterior, mas pode segurar Option e clicar na linha que desejar
  • Selecionando linhas consecutivas: Shift + Option + Click (Shift + Alt + Click)
• Movendo pelo código de forma rápida
  • Vá até o começo/fim da linha: CMD + Seta Direita/Esquerda (Home/End)
  • Vá até o começo/fim do arquivo: CMD + Seta Cima/Baixo (Ctrl + Home/End)
  • Pule por palavras: Option + Seta Direita/Esquerda (Ctrl + Seta Direita/Esquerda)
• Selecionando de forma rápida:
  • Você pode usar todos os atalhos para mover pelo código e ao mesmo tempo segurar Shift para selecionar certas partes, ou seja:
  • Selecione até o fim da linha: Shift + Seta Direita/Esquerda + CMD (Shift + Home/End)
  • Selecione palavras: Shift + Option + Seta Direita/Esquerda (Shift + Ctrl + Seta Direita/Esquerda)
• Deletando de forma rápida
  • Você pode usar todos os atalhos para mover pelo código e ao mesmo tempo apertar Backspace para deletar certas partes, ou seja:
  • Delete até o fim da linha: Backspace + Seta Direita/Esquerda + CMD (Backspace + Home/End)
  • Delete palavras: Backspace + Option + Seta Direita/Esquerda (Backspace + Ctrl + Seta Direita/Esquerda)

Desafio 1: Transformar o controller Nestjs

Para você poder treinar suas habilidades, irei deixar um desafio para você transformar o código mencionado a cima no seguinte código utilizando o máximo de atalhos possível.

Tarefas:

• Renomear expenseService para service
• Renomear id para uid
• Renomear :id para :uid
• Mudar +id para Number(id)
• Colocar um console.log para cada método com o nome do método

import {
  Get,
  Post,
  Body,
  Patch,
  Param,
  Delete,
  Controller,
} from '@nestjs/common';
import { ExpenseService } from './expense.service';
import { CreateExpenseDto } from './dto/create-expense.dto';
import { UpdateExpenseDto } from './dto/update-expense.dto';

@Controller('expense')
export class ExpenseController {
  constructor(private readonly service: ExpenseService) {}

  @Post()
  create(@Body() createExpenseDto: CreateExpenseDto) {
    console.log('create');
    return this.service.create(createExpenseDto);
  }

  @Get()
  findAll() {
    console.log('findAll');
    return this.service.findAll();
  }

  @Get(':uid')
  findOne(@Param('uid') uid: string) {
    console.log('findOne');
    return this.service.findOne(Number(uid));
  }

  @Patch(':uid')
  update(@Param('uid') uid: string, @Body() updateExpenseDto: UpdateExpenseDto) {
    console.log('update');
    return this.service.update(Number(uid), updateExpenseDto);
  }

  @Delete(':uid')
  remove(@Param('uid') uid: string) {
    console.log('remove');
    return this.service.remove(Number(uid));
  }
}

Se você quer ver quais atalhos utilizar, assista meu video com o passo a passo

Desafio 2: Transformar CSV em JSON

Transformar esse CSV, no JSON a seguir

id,userId,value
1,1,1233
2,1,333
3,1,567
3,3,456
4,4,2787
5,6,241
6,7,907
7,2,423
8,3,478
9,4,345

[
  {
    "id": 1,
    "userId": 1,
    "value": 1233,
    "description": "Value is: 1233"
  },
  {
    "id": 2,
    "userId": 1,
    "value": 333,
    "description": "Value is: 333"
  },
  {
    "id": 3,
    "userId": 1,
    "value": 567,
    "description": "Value is: 567"
  },
  {
    "id": 3,
    "userId": 3,
    "value": 456,
    "description": "Value is: 456"
  },
  {
    "id": 4,
    "userId": 4,
    "value": 2787,
    "description": "Value is: 2787"
  },
  {
    "id": 5,
    "userId": 6,
    "value": 241,
    "description": "Value is: 241"
  },
  {
    "id": 6,
    "userId": 7,
    "value": 907,
    "description": "Value is: 907"
  },
  {
    "id": 7,
    "userId": 2,
    "value": 423,
    "description": "Value is: 423"
  },
  {
    "id": 8,
    "userId": 3,
    "value": 478,
    "description": "Value is: 478"
  },
  {
    "id": 9,
    "userId": 4,
    "value": 345,
    "description": "Value is: 345"
  }
]

Para ver como fazer, assista essa parte do video