Her er nogle superhemmelige VS Code-hacks, der øger din produktivitet

Kodning som en hobbyist, professionel eller endda en en gang om måneden udvikler, skal du vide, at det at have smarte og skarpe værktøjer er afgørende for alle, der er villige til at lægge maksimale produktive timer under arbejdet.

Jeg har kurateret en lille samling af tip, tricks og udvidelser og filtreret dem for kun at holde både de mest sjældne og mest nyttige til en moderne webudvikler. Som vi ved, er JavaScript-økosystemet meget stort og vokser stadig større. Af denne grund vil jeg forsøge at være upartisk så meget som muligt.

Følgende Visual Studio Code-tip hjælper dig med at gå ud af alle dine kodningssessioner på denne måde:

Gør det smukt og venligt

Hvis det virkelig ser godt ud og venligt, vil du elske tiden brugt med det.

1. Materieltema og ikoner

Dette er lige op ad dyret i VS-kodetemaer. Jeg synes, at det materielle tema er den nærmeste ting at skrive med en pen og et papir i redaktøren (især når man bruger temaet uden kontrastvariant ). Din editor ser næsten flad og sømløs ud fra de integrerede værktøjer til teksteditoren.

Forestil dig et episk tema kombineret med episke ikoner. Materielle temaikonerer bare et fantastisk alternativ til at erstatte VSCode-standardikonerne. Det store katalog over designede ikoner integreres problemfrit med temaet, hvilket gør det smukkere. Dette hjælper dig med nemt at finde dine filer i opdagelsesrejsende.

2. Zen-tilstand med centreret layout

Du kender muligvis allerede Zen Mode View, også kendt som Distraction Free View (for dem der kommer fra sublim tekst), hvor alt (undtagen kode) fjernes for at give dig reel intimitet med din kodeditor. Vidste du, at du kunne centrere layoutet for at hjælpe dig med at læse din kode, som om du var i en PDF-fremviser? Dette vil virkelig hjælpe dig med at fokusere på en funktion eller studere en andens kode.

Zen-tilstand : [Vis> Udseende> Skift Zen- tilstand]

Centerlayout : [Vis> Udseende> Skift centreret visning]

3. Skrifttyper med ligaturer

Skrivestil gør læsning let og praktisk. Du kan få din editor til at se bedre ud med fantastiske skrifttyper sammen med ligaturer. Her er 6 af de bedste skrifttyper, der understøtter ligaturer (ifølge www.slant.co)

Du kan prøve Fira Code, det er bare fantastisk og open source. Sådan ændrer du skrifttype i VSCode efter installation.

"editor.fontFamily": "Fira Code","editor.fontLigatures": true

Den velkendte skrifttype Operator Mono kommer ikke med indfødt understøttelse af ligaturer. Men hvis du er en stor fan af ligaturer, kan du tilføje dem ved hjælp af dette bibliotek.

4. Regnbueindryk

Indrykning med stil. Denne udvidelse farvelægger indrykket foran din tekst skiftevis fire forskellige farver på hvert trin.

Standardindrykningsindstillingen farver indrykningen efter et regnbueskema. Jeg tilpassede dog min egen til at følge forskellige gråtoner. Hvis du ønsker, at din skal se ud som dette eksempel, skal du kopiere og indsætte følgende uddrag i dinsettings.json

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

5. Tilpasning af titellinjen

Dette er en fantastisk visuel tweak. Jeg kopierede det fra Wes Bos i en af ​​hans React & GraphQL-lektioner. Dybest set skiftede han titellinjefarverne på forskellige projekter for let at genkende dem og hjælpe publikum med at skelne mellem dem også. Dette er virkelig nyttigt, hvis du arbejder på apps, der muligvis har samme kode eller filnavne, for eksempel en reaktivt mobilapp og en reageringsapp.

Dette gøres ved at redigere titellinjens indstillinger i Workspace-indstillingerne for hvert projekt, hvor du vil have forskellige titellinjefarver.

Hurtigere kodning

Selve essensen af ​​at få det gjort i tide

1. Tagindpakning

Hvis du ikke kender Emmet, er du sandsynligvis en, der kan lide at skrive det hele. Emmet giver dig mulighed for at skrive en forkortet kode og få de returnerede tilsvarende tags. Dette gøres ved at vælge en flok kode og skrive kommandoen Wrap med forkortet, som jeg tastebindede tilshift+alt+.

Se det nedenfor.

Forestil dig, at du vil pakke alle disse, men som individuelle linjer. Du bruger wrap med individuelle linjer, og indsæt derefter * efter forkortelsen, f.eksdiv*

Hvis du vil springe lige ind i Emmeting, er dette Emmet Cheatsheet

2. Balance indad og udad

Dette tip blev taget fra //vscodecandothat.com/ som jeg virkelig anbefaler.

Du kan vælge et helt tag i VS-kode ved hjælp af kommandoerne balance inwardog balance outwardEmmet. Det er nyttigt at binde disse kommandoer til tastaturgenveje, som Ctrl + Shift + Up Arrowfor Balance Outward og Ctrl + Shift + Down Arrowfor Balance Inward.

3. Turbo Console.log ()

Ingen kan lide at skrive meget lange udsagn som console.log (). Det kan være virkelig irriterende, for det meste når du bare vil udsende noget virkelig hurtigt, se dets værdi og derefter fortsætte kodningen. Hvad hvis jeg fortalte dig, at du kunne trøste log på noget så hurtigt som Lucky Luke?

Dette gøres med en udvidelse kaldet Turbo Console Log . Det muliggør logning af en hvilken som helst variabel på linjen nedenfor med et automatisk præfiks efter kodestrukturen. Du er også i stand til at fjerne kommentarer / kommentere alt+shift+u/ alt+shift+chele console.log () tilføjet af denne udvidelse.

Desuden kan du også slette dem alle med alt+shift+d:

4. Live server

Dette er en fantastisk udvidelse, der hjælper dig med at starte en lokal udviklingsserver med live genindlæsningsfunktion til statiske og dynamiske sider. Det har en god understøttelse af vigtige funktioner som: HTTPS, CORS, brugerdefinerede lokale værtsadresser og port.

Download det her

Det kan endda give dig mulighed for at dele din localhost, hvis den bruges med VSCode LiveShare.

5. Kopier / indsæt med flere markører

En af de første “Wows”, jeg skreg, da jeg brugte VS-kode, skete, da jeg redigerede flere linjer ved at tilføje markører på forskellige linjer. Længe efter fandt jeg en meget god brug af denne funktion. Du er i stand til at kopiere og indsætte det indhold, der er valgt af disse markører, og de indsættes nøjagtigt i den rækkefølge, de blev kopieret i.

Tjek nedenfor.

6. Brødsmuler og konturer

Breadcrumb viser den aktuelle placering og giver dig mulighed for hurtigt at navigere mellem symboler og filer. For at begynde at bruge brødkrummer skal du aktivere det med kommandoen Vis> Skift brødkrummer eller via he breadcrumbs.enabindstillingen.

Oversigtsvisningen er en separat sektion i bunden af ​​File Explorer-træet. Når det er udvidet, viser det symboltræet for den aktuelt aktive editor.

Oversigtsvisningen har forskellige Sorter efter tilstande, valgfri markørsporing. Det inkluderer også et inputfelt, der filtrerer symboler, mens du skriver. Fejl og advarsler vises også i oversigtsvisningen, så du hurtigt kan se problemets placering.

Diverse

De små justeringer, der ændrer alt

1. Kode CLI

VS Code har en kraftfuld kommandolinjegrænseflade, der giver dig mulighed for at kontrollere, hvordan du starter editoren. Du kan åbne filer, installere udvidelser, ændre displaysprog og outputdiagnostik via kommandolinjemuligheder (switche).

Forestil dig, at du lige har gjort det git clone rl> a repository and you want to replace the current instance of VS Code you are u sing. code . -r will do the trick without you having to leave the CLI interface (Learn more here).

2. Polacode

You often come upon appealing code screenshots with custom fonts and themes like the one below. This was taken in VS Code with Polacode Extension

I know Carbon is also a good and more customizable alternative. However, Polacode enables you stay in your code editor and use any proprietary font you may have bought which is unusable in Carbon.

3. Quokka (JS/TS ScratchPad)

Quokka is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results and console logs in your code editor.

An awesome use case for Quokka is when you are studying for technical interviews, you are able to output each step without having the stress of setting breakpoints in debuggers.

It can also help you study a library’s functions like Lodash or MomentJS before actually using them. It even works for Async calls.

5. WakaTime

Do your friends think you spend too much time coding? Record it and show them that 10hrs/day is not “too much”. WakaTime is an extension that helps to record and store metrics and analytics regarding your programming activity.

You can set goals, view coding languages you often use, you can even compare yourself to other ninjas in the world.

6. VSCode Hacker Typer

Have you ever been typing code in front of a crowd? You often type recklessly and talk while typing which confuses you a little bit. Imagine a pre-typed code that only comes up when you simulate typing like in geektyper.

Jani Eväkallio brought to VS Code this extension. It will help you record and replay macros (code written in your editor) making you 100% more focused when typing to an audience.

7. Exclude folders

I learned this trick on a StackOverFlow post.This one is a quick tweak for excluding folders like node_modules or any other from the explorer tree to help you focus only on what matters. As for me, I really hate opening the tedious node_module folder in my editor, so I decided to hide it.

For example to hide node_modules you can do this:

  1. Go to File > Preferences > Settings (or on Mac Code > Preferences > Settings)
  2. Search files.exclude in the settings
  3. Select add pattern and type **/node_modules
  4. Voila! node_modules disappeared from the explorer tree

8. [Your Suggestions]

You can always comment some of your most secret tips on VSCode, I’ll be glad to append them to the list to help others. :)

I hope these tips will really boost your productivity with VS Code. Please clap and share the post if you liked it and comment if I missed any extension.

Dylan Tientcheu (@DylanTientcheu) | Twitter

Dylan Tientcheu(@DylanTientcheu). Javascript 熱狂者 * #Developer & #Designer * Technical Writer *…twitter.com