Transcrições
1. Boas-vindas ao curso: Bem-vindo a esta aula na qual você
aprenderá como aumentar a produtividade usando o Visual Studio Code. O VS
Code é uma das mais usadas comunidades de
desenvolvedores independentes
mais usadas e
amadas de editores de código. E nesta aula,
você aprenderá algumas dicas e truques interessantes,
como pesquisa, Emmett, teclado, atalhos e muito mais
em pequenas videoaulas. Olá, sou e sou desenvolvedor web full-stack
há mais de quatro anos. E eu comecei a
desenvolver web com JavaScript. Claro, depois de
aprender HTML e CSS. E naquela época, eu usava um editor de código
diferente. Mas quando comecei a aprender linguagens
diferentes,
como Python, Django, ruby ou Java, tive que
instalar um
editor de código separado para cada linguagem. Mas quando encontrei o VS Code, comecei a adorá-lo
nos primeiros dois a três dias
, pois era muito flexível. E há
muitos atalhos. Além disso, podemos baixar
extensões para nossas necessidades, tornando-o o editor de
código perfeito para desenvolvimento e programação
web em geral. Nesta aula, compartilharei minha experiência
de uso e alguns truques legais que
podem aumentar sua produtividade.
2. atalhos de teclado e como alterá-lo: Atalhos de teclado
e como alterá-los. Primeiro, abra seu
Visual Studio Code. Em segundo lugar, clique nesse ícone de engrenagem. Clique nesse atalho de teclado. Você também pode ver aqui o atalho para abrir o atalho de
teclado, que é Control plus K e S. Aqui você pode ver todos os atalhos do
teclado. Você também pode pesquisar os atalhos de
teclado aqui.
Além disso, clicando
neste ícone de lápis, você pode alterar o atalho
do teclado. Por exemplo, eu alterarei esse
atalho para criar um novo arquivo. Se eu digitar aqui Control e N, você pode ver que
está mostrando uma mensagem porque um atalho existente
tem essa combinação de teclas. Então, eu digitaria o controle dela
e esses colchetes. E eu vou apertar a tecla Enter. Você pode ver que meu
atalho mudou. Agora, o atalho para criar
um novo arquivo foi alterado. Vamos verificar isso. Então, vamos criar um novo
arquivo usando esse atalho. Vou digitar aqui index.html e você pode ver
que está funcionando. Da mesma forma, alterei esse atalho para
duplicar a linha, que eu possa pressionar Control e
D para duplicar a linha. É muito útil.
3. Todas as técnicas de seleção de multi cursor: seleção de vários cursores é uma técnica muito útil para aumentar a produtividade usando o
Visual Studio Code. Suponhamos que você queira adicionar algum texto nessas cinco linhas. A primeira coisa que você pode
fazer é digitar aqui o texto e copiá-lo e
colá-lo mais quatro vezes. Mas no Visual Studio Code, o que você pode fazer é
selecionar várias linhas, por exemplo, pressionar Alt e
clicar com o botão esquerdo nessas linhas, e vários cursores
aparecerão. Agora você pode digitar o que
quiser. Uma aplicação
disso pode ser a adição do nome da classe em
várias listas em HTML. Se você quiser adicionar
a mesma classe, que é um
item F tracejado em várias listas. Você pode pressionar Alt
e clicar com o botão esquerdo aqui. Em seguida, digite sua classe
é igual ao item de navegação. Você também pode pressionar o botão do meio do mouse
para selecionar várias linhas. E então você pode
digitar algo aqui. Você também pode pressionar
Control
mais Alt e a tecla de seta para cima para selecionar
várias linhas da parte superior. Você também pode pressionar
Control mais Alt a tecla de seta para
baixo para selecionar
várias linhas na parte inferior. Agora, para selecionar uma
ocorrência múltipla de uma palavra, o que você pode fazer é
pressionar Control e D, por exemplo, se eu quiser selecionar a ocorrência múltipla
dessa variável prima do Leste, selecionarei essa variável
e pressione Control. E D, ele selecionará a
próxima ocorrência dessa palavra. E se eu pressionar Control
e D mais uma vez, ele selecionará outra
ocorrência dessa palavra. Observe que, se o controle mais a seleção de
D não estiver
funcionando para você, provavelmente esse
atalho mudou. Então, o que você pode fazer é abrir os atalhos do teclado
e digitar aqui, selecionar duas próximas partidas. E você pode ver
esse atalho aqui. Então você tem que pressionar
essa coisa em vez de controlar mais D para selecionar a
próxima ocorrência de uma palavra. Agora, se você quiser selecionar todas
as ocorrências de uma palavra, o que você pode fazer é primeiro selecionar essa palavra e pressionar control plus shift mais L. Ele selecionará toda a
ocorrência de uma palavra. Agora, outro truque é
selecionar um trecho de código e pressionar control plus shift mais a tecla de seta para a
direita. Isso expandirá a seleção. Se você pressionar control plus
shift mais a tecla de seta para a esquerda
em vez da tecla de seta para a direita, isso reduzirá esta palestra. Agora, outra técnica
é colocar o cursor em algum lugar e segurar Shift
e Alt e começar a arrastar. Ele será selecionado como uma caixa. Isso é conhecido como seleção de caixa de
coluna.
4. Encontrar, substituir e pesquisar em arquivos: No VS Code, você pode
encontrar rapidamente o texto e substituí-lo. Nesta lição, aprenderemos sobre isso em detalhes. Em primeiro lugar, se você quiser
encontrar algo, você pode pressionar Control e F, ele abrirá esse widget de busca. E se você digitar algo aqui, os resultados da pesquisa que
serão destacados. Se houver dois ou
mais resultados de pesquisa
, você pode pressionar a tecla Enter para navegar até o próximo resultado. Ou você pode pressionar Shift mais Enter para navegar até o resultado da pesquisa
anterior. Se você selecionar uma palavra, se você pressionar Control e F
, os dados do Word aparecerão automaticamente
nesta visita de pesquisa. Agora, por padrão, essa operação de busca será
executada em todo o arquivo. Mas se você quiser executá-lo
em uma área de texto selecionada, você precisa usar esse botão de
hambúrguer. Por exemplo, se você quiser encontrar alguns textos nessas
linhas, pressione Control. E F. E eu vou digitar aqui é primo. E selecione essas linhas de código e pressione este botão de
hambúrguer. Agora você pode ver que
somente a palavra é prima, que está nessas
linhas, está destacada. Agora, se você quiser
selecionar várias linhas, pressione Control e F e digite aqui o texto. E para inserir uma nova linha, pressione Control e Enter. Em seguida, você pode digitar
um ou algo assim. Agora você também pode maximizar
o widget para fazer isso, pressione aqui e arraste-o. Se você clicar duas vezes
aqui, ele será maximizado. E se você clicar duas vezes
aqui novamente, isso será minimizado. Agora, para pesquisar. Finalmente, pressione control
plus shift mais f, e então essa coisa
aparecerá aqui. Você também pode
maximizar ou minimizar isso clicando
e arrastando aqui. Agora, se eu digitar aqui é primo, você pode ver que os
resultados da pesquisa apareceram aqui. Está me dizendo que há uma variável S prime
nesse arquivo chamada hello.py. Se eu clicar aqui,
emprestarei para esse arquivo. Você também pode pesquisar
e substituir palavras diretamente a partir daqui. Por exemplo, clique neste ícone de seta
e, em seguida, você pode digitar aqui, eles substituem
e pressionam este botão. Você também pode ver
o atalho aqui e clicar aqui. E é isso mesmo. A palavra agora foi substituída.
5. Servidor ao vivo para recarregamento automático e fazer solicitações: Nesta lição,
aprenderemos sobre o Live Server. Mas antes de aprender sobre
o que é um servidor ativo, vamos falar sobre seus usuários. Portanto, o primeiro uso do Live
Server é o recarregamento automático. Por exemplo, você pode ver
aqui que eu tenho um arquivo
index.html e aqui
está meu navegador Chrome. Agora, se eu mudar algo
nesse arquivo HTML, por exemplo, alterarei o
texto desse título. Agora, se eu pressionar Control
e S para salvar este arquivo, você pode ver que ele
foi recarregado automaticamente, detecta que esse
título foi alterado. Há também outro
uso do Live Server, que é que você pode
facilmente fazer, obter, colocar, publicar e excluir
solicitações usando ele. Ok, então vimos
alguns usos do Life Server. Vamos instalá-lo. E, basicamente,
é uma extensão. Então, para instalar isso,
você precisa ir
ao mercado externo e
pesquisar o Live Server. Agora, depois de instalar isso, talvez você precise
reiniciar o VS Code. Abra um arquivo HTML. E você pode ver
esse botão de ativação na parte inferior, clique aqui. E ele abrirá esse arquivo
no navegador padrão, que na maioria dos casos cresceu. Agora, a segunda maneira de abrir esse servidor ativo
é clicar com o botão direito do mouse nesse arquivo HTML e escolher opção Abrir com o Live
Server. Você também pode ver
o atalho aqui. Agora você pode ver que, se
eu alterar algo
no arquivo HTML, ele será recarregado automaticamente. Agora, para parar o servidor ativo, você pode pressionar essa
opção na parte inferior
ou clicar com o botão direito do mouse e escolher essa opção de interromper o
Live Server. Agora, por padrão, o servidor ativo será executado na porta 55 double zero. Mas você também pode
alterar isso para fazer isso abra as configurações e digite
aqui servidor ao vivo. Role para baixo e clique neste
link na seção de relatórios. Agora, depois de clicar lá, esse tipo de código
aparecerá no novo
tipo de VSCode, não digite aqui o número da porta na qual você deseja
executar seu servidor de vida. Por exemplo, se eu digitar aqui 8080, e se eu salvar isso, agora, se eu executar este servidor ativo, você pode ver que o servidor
foi iniciado na porta 8080. Para não desfazer isso,
o que você pode fazer é remover essa linha. Agora, vou salvar isso e executar
esse arquivo no servidor ativo. Agora você pode ver que
esse servidor foi iniciado na porta 5.500.
6. Altere seu tema: Um dos
recursos interessantes do VSCode é o destaque de
sintaxe e as equipes. Nesta lição,
aprenderemos sobre isso. Primeiro, abra o VS
Code em uma pasta. A propósito, se você quiser abrir VS Code em uma pasta específica
, o que você pode
fazer é arrastar essa pasta e
soltá-la no VS code. Isso abrirá essa pasta. Agora, no VS Code, vá para Arquivo, Preferências
e tema de cores. Você também pode ver
o atalho aqui. Clique aqui e
esse tipo de coisa
aparecerá aqui. Agora você pode usar a tecla de
seta para cima e para baixo para escolher
a equipe que você gosta, e ela também mostrará
a prévia, selecione a equipe que você gosta. Você pode ver que estou
usando um ponto de proteína. Você também pode baixar o
Teams a partir de extensões. Então, vá estender Sun e digite
aqui Tim, você deseja, por exemplo você pode digitar um par de materiais, e esta é a equipe de UI de
materiais. Agora existe um
site interessante onde você pode encontrar equipes para usar o
indivi da melhor maneira possível. Portanto, este site
é o VS Code Teams. E você pode ver aqui que
há muitos temas. Você também pode filtrar equipes. Escolha a equipe que você gosta e clique no botão Abrir
com o VS Code. Você também pode copiar o nome e colá-lo aqui,
no sentido da extensão, e baixar a equipe aqui. Agora você também pode personalizar
seus ícones de arquivo. Para isso, você pode pesquisar o material Icon team
e baixá-lo.
7. Vídeo final lec8: Nesta lição, você
aprenderá sobre alguns atalhos básicos e úteis da linha de
comando. Agora, para abrir o
prompt de comando em uma pasta, há um bom atalho
que é abrir essa pasta, digitar CMD e
pressionar a tecla Enter. Agora, para criar uma
nova pasta dentro dessa pasta usando a linha de comando, você deve digitar aqui
MKDIR e o nome da pasta. Então, vou digitar aqui minha pasta
e apertar a tecla Enter. E você pode ver que
a pasta foi criada. Agora, para criar um arquivo no
Windows, você precisa digitar par, digitar, nulo e é um símbolo
maior que. E o nome do arquivo, tipo de
solo aqui, novo ponto de arquivo HTML. Agora, no Mac, você precisa
usar o comando touch. Então você tem que digitar
aqui touch e o nome do arquivo para não
excluir um arquivo no Windows, você tem que usar o comando
delete. Então digite aqui, D E, N D nome do arquivo. Agora, no prompt de comando
ou no terminal, se você estiver no Mac, você pode pressionar a tecla Tab para preencher automaticamente, por exemplo você pode ver aqui que tenho
quatro arquivos nesta pasta. Digamos que eu queira
excluir esse arquivo. Então, vou digitar a ou D, L
e L, digitar aqui m, y, dy e, em seguida, pressionar a tecla Tab. Esse nome de arquivo será preenchido automaticamente. Se eu apenas digitar aqui
MEU, pressione a tecla Tab. Ele mostrará o primeiro resultado. E se eu pressionar novamente a tecla tab, ela mostrará o segundo
resultado e assim por diante. Agora, para navegar até uma pasta
que está dentro dessa pasta, preciso usar o comando cd. Então, vou digitar aqui C, D
e o nome da pasta. Agora, se você quiser
voltar uma pasta, então você tem que digitar aqui c, d e esses pontos duplos. E é isso mesmo.
Piyush Jha, Web Developer & Educator
