vs code

Tips och tricks i VS Code

Bra funktioner i VS Code som gör jobbet snabbare och som jag i många fall önskar fanns i andra textredigerare. Som till exempel Word.

Kapsla in i parenteser, hakparentes, klammerparenteser, mm…

Om du till exempel sitter mitt i ett JavaScript-projekt och kommer på att du måste konvertera ett värde med “parseInt()” kan det vara jobbigt att placera markören före och sedan efter det du vill kapsla in. Gör i stället så att du markerar värdet och trycker Skift+8. Då kommer den markerade koden inkapslas av parenteser. Allt du behöver göra sedan är att stega tillbaka två steg och skriva “parseInt” framför, klart.

Som rubriken lyder fungerar det för flera olika “parenteser” och citattecken.

(), [], {}, "", '', <>

Jag önskar verkligen att det här fungerade i fler textbehandlingsprogram, jag har faktiskt flera gånger råkat göra just det här i Word med resultatet att jag raderar den markerade texten och i stället enbart har kvar ett citattecken.

Flytta kodblock upp eller ner

Markera, cut och paste har såklart alltid fungerat. Ett bättre sätt att flytta en kodsnutt är att markera den och sedan hålla ner alt-tangnten och trycka pil upp eller ner.

Duplicera kod upp eller ner

Copy/paste fast bättre. Markera koden du vill duplicera, håll ner Shift+Alt+Upp eller Ner. Då får du en kopia som dessutom har samma indrag. Med copy/paste får ofta första raden fel indrag.

Kapsla in kod i nytt block

Helt plötsligt kommer du på att du behöver ytterligare en “container”, inga problem. Normalt sett kanske du skapar din container och kör copy/paste och sedan fixar indragen så att allt ser snyggt och prydligt ut, inga större problem. Trots att det är så lätt finns det ett ännu lättare sätt. Gör så här, markera din “markup”, tryck Command+Shift+P (eller fn+F1) för Mac och F1 för Windows, i listan som dyker upp väljer du “Emmet: Wrap with Abbreviation”, i det nu tomma textfältet kan du fylla i vad som inkapsla din markup. Till exempel “.my-container” för att skapa en div med klassen my-container.

.my-container -> <div class="my-container"></div>

section.my-container -> <section class="my-container"></section>

Flytta filer och mappar

Här sparkar jag nog in en öppen dörr men viste du att man kan flytta filer i VS Code:s Explorer? Om inte så vet du det nu. Det än nämligen bara att dra och släpp.

Duplicera filer och mappar

Även den här kan du säkert redan, det tog dock mig ett tag att lista ut. Markera det du vill duplicera i VS Code:s Explorer, håll ner alt/option och flytta det du vill duplicera. Om du släpper det du vill duplicera i samma mapp som originalet läggs “-copy” till i mapp- eller fil-namnet.

Lämna en kommentar

Om du gillade min artikel om Tips och Tricks i VS Code skulle jag bli jätteglad om du ville lämna en kommentar. Lämna också en kommentar om du har ett tips du vill dela med dig av så kanske jag lägger in det i listan.

Tillbaka till bloggen

Fler artiklar

Script för Adobe Illustrator

Läs mer

Superslimmad WordPress-plugin

Läs mer
Computer with code on screen sitting on a kitchen table.

A free simple WordPress theme starter template

Läs mer
Bilden visar ett formulär med en säkerhetssymbol över.

Skydda ditt formulär

Läs mer
Bilden visar formulär med Google reCAPTCHA

WordPress Plug-in – Kontaktformulär

Läs mer
Bilden visar en bildskärm med PHP-kod på.

Att skapa ett kontaktformulär i PHP

Läs mer