Aforra o tempo con código de estudo visual

O código de estudo visual é de lonxe o IDE máis usado polos desenvolvedores. Non é eu quen o di, son os números. Hai unha boa oportunidade de que sexa a túa ferramenta de traballo diario. Pero sabes o que podes aforrar con?

Emmet

Comecemos con cousas moi básicas que non son tan utilizadas tanto. Comecemos co seu novo mellor amigo: Emmet. É fundamental integrado co código Visual Studio e todos os ignoran.

Emmet é unha pequena ferramenta coa que pode escribir máis código máis rápido. Permite abreviar armarios en poucas letras. Non use Emmet cando fagas HTML ou CSS está suxeito a prisión. É realmente imprescindible.

O que é interesante con Emmet é que realmente intentará adiviñar o que estás a facer. Por exemplo, se a cinta “P10” nunha propiedade CSS, vai de inmediato para entender que quere un recheo de 10px. Comprobe este GIF bombeado no documento oficial.

Código de estudo visual

Cando vexo que a xente non usa Emmet no código de estudo visual e escribe todo, Quero aproveitar moi duro e repetidamente no seu teclado. Pero me trato.

Mentres tanto, invítovos a ver todo o que todo Emmet ofrécelle con esta gran folla de tráfico. Hai para todos e está niso vai aforrar tempo. Que che fará gañar aínda máis tempo son os atallos.

Os atallos de atallos

Non sei todos os atallos do código de estudo visual. Eu significa ver os atallos de folla de tradeiras, hai tres mil millóns. Se te fago todos os atallos, quedarás durmido.

Falarei con vostede sobre os que uso todo o tempo e faino g Agner of time. O que aconsellamos é aprender os atallos que permiten manipular os códigos de xeito rápido e / ou cambiar varias liñas de código ao mesmo tempo. O obxectivo é tocar o rato o mínimo posible. Ambas as mans no volante e aceleran.

velocidade

Se ten o preguiceiro para aprender atallos, entendo, é un pouco relaxado. Pero fai polo menos o esforzo para os próximos catro. Non estou bromeando, realmente vai aforrarche un tempo tolo. Un exemplo rápido de como vai aforrar tempo permanentemente cun gif feito por min mesmo.

Visual Studio Code

  • Manipulación de selección

Simplemente permítelle tomar consellos de códigos e moverlles rapidamente a súa sangría: despois da selección = > alt + up ou alt + down

  • duplicación de selección

igual que Anteriormente, pero esta vez a sección vai a ser duplicada: “despois da selección = > Shift + Alt + Up ou Shift + Alt + Down

  • Eliminar liña

Atopámonos con frecuencia para ter que eliminar liñas, a forma máis rápida de facelo é a través deste atallo: sen selección = > Ctrl + X

  • Modificación por ocorrencia

A miúdo tes que cambiar as mesmas ocorrencias de bloque, podes tecido Re un gran buscado / substituído ou simplemente usar este atallo: despois da selección dunha instancia: Ctrl + D

Este é realmente os atallos máxicos que uso todo o tempo e que m ‘gardar 10 anos de tempo dev. Unha vez máis, hai moitos outros. Faga o seu propio mercado e faga o esforzo por aprender a quen o ama. Créame que o tempo investido nesta tarefa pagará enormemente no futuro.

Podes incluso aprenderlles de forma interactiva. Con este sitio tes un sistema de probas / erros simples para aprender todos os atallos rapidamente. Leva pouco tempo e queda rápido!

Use as ferramentas integradas

sen configuración e sen complemento, o código de estudo visual vén con tres ferramentas principais. Son todos tres completamente esenciais.

Primeiro temos intelisense. Para que, francamente, todos o utilizan un mínimo. Pero paga a pena lembrar-lo para os tres na parte inferior que aínda non entenden o tempo que gañarán. Nunca debe executar como un ficheiro como un ficheiro para descubrir o que pode facer con obxecto ou método.

velocidade

Concretamente o intelisse permitirache a conclusión do código de xeito intelixente.Atopará todos os métodos dispoñibles para o seu obxecto actual e mesmo lle dar información sobre o método actual. Mesma, prisión firme se non o usas. Go Hop aínda un gif bombeado!

Código de estudio visual

Despois hai o terminal integrado do código de estudo visual que é súper práctico. Simplemente use os atallos de código de código de estudo CTLR + “` e visual que lle fará un terminal de control. Isto xerará o primeiro sistema de terminal de control que atopa no seu sistema operativo. Teña en conta que pode configuralo tamén.

Persoalmente, el Serve de probar rapidamente scripts ou un código sen ter que facer unha viaxe redonda con Terminator. Ás veces xerou un pequeno servidor web para obtelo rapidamente no negocio tamén. É moi conveniente. Comproba un gif feito por min mesmo con amor de superheroes.

Código de estudio visual

Finalmente atopamos un depurador no código de estudo visual. É increíblemente práctico e frecuentemente me aforra a vida ademais de moito tempo.

Entón, gran exención de responsabilidade, son o primeiro en ver o gran lazo en xeral. Puxen a gran consola. Log en todas partes como un grande sucio. E imos ser honestos, moitas veces iso é suficiente. Pero cando Non é suficiente, en vez de furia, uso o depurador incorporado de código de estudo visual. É moi sinxelo configurar.

Primeiro poñer puntos de parada onde quere que o programa pausa. Entón simplemente preme F5. Creará un ficheiro de lanzamento.JSON en segundo plano que será a súa configuración para a depuración. Non tes nada que facer, deste programa correrá e parará nos puntos de parada previamente.

Finalmente tes máis que gastar o rato sobre as variables para inspeccionar e premer F11 para ir ao seguinte punto de parada. Vaia aínda un gif feito por min para mostrarche como funciona.

SuperToto

Se desexa depurar unha aplicación completa cun servidor web, ten un pequeno toque para o ficheiro de lanzamento. Jona que lle serve como unha configuración. Nada insuperable para un hackerman como está seguro. Por outra banda, se quere facer depuración da NASA, pode rapidamente facerse extremo. Afortunadamente, sempre hai un tolo que o fixo antes para ti.

Extensións

Ata agora falamos de cousas completamente nativas para o código de estudo visual. Se comezamos a partir dos complementos, aí realizamos a FIFUSS.

Gitlens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Se chocas Git, como a maioría dos desenvolvedores, ten que instalar esta extensión. Esta extensión explora todo o seu código actual e mostra toda a información relacionada coa versión. Quen ten comité, cando, ese nome de compromiso, que rama, etc. Tornouse tan indispensable para min que esquecera que era un complemento. Comprobe este fermoso gif feito por min.

gitlens

quokka
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

quokka vai executar constantemente o seu programa e amosar-lle en tempo real o resultado do seu código. Eu uso constantemente para comprobar que a miña cousa ten sentido mentres codifique. exemplo vivo con gif bombeado na páxina oficial.

código Visual Studio

quokka desgraciadamente un gran punto negro, a versión gratuíta non permite traballar en ficheiros gravados. Entón, pode usalo só nun novo ficheiro de gravación.

Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

O servidor en directo permite Inicia un mini servidor que fará recargar a cada un dos teus cambios na túa páxina HTML. Practica para prototipar a túa páxina e ver cambios en tempo real. GIF bonito da documentación oficial.

servidor Live

Código de corrector ortográfico https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Os seus idiomas de programación están en inglés. Polo tanto, o teu código, tamén son todos os teus nomes de variables, funcións e ficheiros. O corrector ortográfico de código será comprobando cada unha destas palabras e comproba se están ben escritas. Instálalo, seguramente estarás impresionado polo número de erros en inglés que fas no teu código. Acabamos cun GIF da documentación tamén.

Código de verificación ortográfico

Isto é todo para os complementos que non podo facer sen codificar. Obviamente, pase os complementos dedicados a unha linguaxe ou adestrador de código.Por exemplo, uso fragmentos de JavaScript e Standardjs.

Terá un complemento dedicado ao seu idioma e á súa política de código. Atopalos e instalalos, é importante.

Epílogo

Deixa unha resposta

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *