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.
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.
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.
- 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.
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!
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.
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.
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.
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.
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.
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.
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.