Tässä on joitain erittäin salaisia ​​VS-koodihakuja tuottavuuden parantamiseksi

Koodaamalla harrastajana, ammattilaisena tai jopa kerran kuukaudessa kehittäjänä, sinun on tiedettävä, että älykkäiden ja terävien työkalujen saaminen on elintärkeää kaikille, jotka haluavat käyttää korkeinta tuottavaa tuntia työskennellessään.

Olen kuratoinut pienen kokoelman vinkkejä, temppuja ja laajennuksia ja suodattanut ne, jotta modernin web-kehittäjälle jää vain sekä harvinaiset että hyödyllisimmät. Kuten tiedämme, JavaScript-ekosysteemi on erittäin suuri ja kasvaa edelleen. Tästä syystä yritän olla puolueeton mahdollisimman paljon.

Seuraavat Visual Studio Code -vinkit auttavat sinua poistumaan kaikista koodaustilaisuuksista, jotka näyttävät tältä:

Se on kaunis ja ystävällinen

Jos se todella näyttää hyvältä ja ystävälliseltä, rakastat sen kanssa vietettyä aikaa.

1. Materiaaliteema ja kuvakkeet

Tämä on suoraan peto VS Code -teemoissa. Luulen, että materiaaliteema on lähinnä kynällä ja paperilla kirjoittamista editorissa (varsinkin kun käytetään kontrastittoman vaihtoehdon teemaa). Muokkaimesi näyttää melkein tasaiselta ja saumattomalta integroiduista työkaluista tekstieditoriin.

Kuvittele eeppinen teema yhdistettynä eeppisiin kuvakkeisiin. Materiaaliteeman kuvakkeetovat vain mahtava vaihtoehto korvata oletusarvoiset VSCode-kuvakkeet. Suuri suunniteltu kuvakkeiden luettelo integroituu sujuvasti teemaan, mikä tekee siitä kauniimman. Tämä auttaa sinua löytämään tiedostosi helposti Explorerissa.

2. Zen-tila keskitetyllä asettelulla

Saatat jo tuntea Zen Mode -näkymän, joka tunnetaan myös nimellä häiriötön näkymä (niille, jotka tulevat Sublime Textistä), jossa kaikki (paitsi koodi) poistetaan, jotta saat todellisen läheisyyden koodieditoriin. Tiesitkö, että voit keskittää asettelun helpottamaan koodisi lukemista ikään kuin olisit PDF-katseluohjelmassa? Tämä auttaa sinua todella keskittymään toimintoon tai tutkimaan jonkun toisen koodia.

Zen-tila : [Näytä> Ulkonäkö> Vaihda Zen- tila]

Keskiasettelu : [Näytä> Ulkonäkö> Vaihda keskitetty L ayout]

3. Fontit, joissa on ligatuurit

Kirjoitustyyli tekee lukemisesta helppoa ja kätevää. Voit saada editorisi näyttämään paremmalta mahtavilla kirjasimilla sekä ligatuurilla. Tässä on 6 parasta fonttia, jotka tukevat ligatureja (www.slant.co mukaan)

Voit kokeilla Fira-koodia, se on vain mahtavaa ja avointa lähdekoodia. Näin vaihdat fontin VSCodessa asennuksen jälkeen.

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

Tunnettu fonttioperaattori Mono ei tuota natiivia tukea ligatuurille. Jos kuitenkin olet suuri ligatuurien fani, voit lisätä ne käyttämällä tätä kirjastoa.

4. Sateenkaaren sisennys

Sisennä tyylillä. Tämä laajennus värittää tekstisi edessä olevan sisennyksen vuorotellen neljää eri väriä kussakin vaiheessa.

Sisäinen sisennyksen oletusasetus värjää sisennyksen sateenkaarisuunnitelman mukaisesti. Mukautin kuitenkin omani seuraamaan harmaan eri sävyjä. Jos haluat sinun näyttävän tältä esimerkiltä, ​​kopioi ja liitä seuraava katkelma omaansettings.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. Otsikkorivin mukauttaminen

Tämä on hieno visuaalinen säätö. Kopioin sen Wes Bosilta yhdessä hänen React & GraphQL -tunneistaan. Pohjimmiltaan hän vaihtoi otsikkorivin värit eri projekteissa tunnistaakseen ne helposti ja auttaakseen myös yleisöä erottamaan ne toisistaan. Tämä on todella hyödyllistä, jos työskentelet sovelluksissa, joilla voi olla sama koodi tai tiedostonimet, esimerkiksi reagoiva mobiilisovellus ja reagoiva verkkosovellus.

Tämä tapahtuu muokkaamalla otsikkorivin asetuksia työtilan asetuksissa jokaiselle projektille, jossa haluat eri otsikkorivin värit.

Nopeampi koodaus

Sen ydin, että se tehdään ajoissa

1. Tunnisteiden kääriminen

Jos et tunne Emmetiä, olet todennäköisesti joku, joka tykkää kirjoittaa kaiken. Emmet antaa sinun kirjoittaa lyhennetyn koodin ja saada palautetut vastaavat tunnisteet. Tämä tapahtuu valitsemalla joukko koodia ja kirjoittamalla komento Wrap with Shortreviated, johon näppäinshift+alt+.

Katso se alla.

Kuvittele, että haluat kääriä kaikki nämä, mutta yksittäisinä viivoina. Käytä kääriä yksittäisillä viivoilla ja lisää sitten * lyhenteen jälkeen esimdiv*

Jos haluat hypätä suoraan Emmetingiin, tämä on Emmet-huijauslehti

2. Tasapaino sisään- ja ulospäin

Tämä vinkki on otettu osoitteesta //vscodecandothat.com/, jota suosittelen todella.

Voit valita kokonaisen tunnisteen VS-koodista käyttämällä balance inwardja balance outwardEmmet-komentoja. On hyödyllistä sitoa nämä komennot pikanäppäimiin, kuten Ctrl + Shift + Up ArrowBalance Outward ja Ctrl + Shift + Down ArrowBalance Inward.

3. Turbo Console.log ()

Kukaan ei pidä kirjoittaa hyvin pitkiä lauseita, kuten console.log (). Se voi olla todella ärsyttävää, lähinnä silloin, kun haluat vain tuottaa jotain todella nopeasti, tarkastella sen arvoa ja jatkaa koodausta. Entä jos sanoisin, että voit lohduttaa kaiken niin nopeasti kuin Lucky Luke?

Tämä tehdään laajennuksella nimeltä Turbo Console Log . Se mahdollistaa minkä tahansa muuttujan kirjaamisen alla olevalle riville automaattisella etuliitteellä, joka seuraa koodirakennetta. Voit myös kommentoida / kommentoida alt+shift+u/ alt+shift+ckaikkia tämän laajennuksen lisäämiä console.log () -kuvakkeita.

Lisäksi voit myös poistaa ne kaikki seuraavilla tavoilla alt+shift+d:

4. Live-palvelin

Tämä on mahtava laajennus, jonka avulla voit käynnistää paikallisen kehityspalvelimen, jolla on reaaliaikainen latausominaisuus staattisille ja dynaamisille sivuille. Sillä on suuri tuki tärkeimmille ominaisuuksille, kuten: HTTPS, CORS, mukautetut paikallisen isännän osoitteet ja portti.

Lataa se täältä

Sen avulla voit jopa jakaa paikallisen isännän, jos sitä käytetään VSCode LiveSharen kanssa.

5. Kopioi / liitä useiden kohdistinten kanssa

Yksi ensimmäisistä "wow'ista", joita huusin käytettäessä VS-koodia, tapahtui, kun muokkain useita rivejä lisäämällä kohdistimia eri viivoille. Kauan sen jälkeen löysin tälle toiminnolle erittäin hyvän käytön. Voit kopioida ja liittää kyseisten kohdistinten valitseman sisällön ja ne liitetään täsmälleen siinä järjestyksessä kuin ne on kopioitu.

Katso alla.

6. Leivänmurut ja ääriviivat

Breadcrumb näyttää nykyisen sijainnin ja antaa sinun siirtyä nopeasti symbolien ja tiedostojen välillä. Voit aloittaa leivänmurun ottamalla sen käyttöön View> Toggle Breadcrumbs -komennolla tai t he breadcrumbs.enabled -asetuksella.

Jäsennysnäkymä on erillinen osa File Explorer -puun alaosassa. Laajennettuna se näyttää aktiivisen editorin symbolipuun.

Jäsennysnäkymässä on erilaiset lajittelutilat, valinnainen kohdistimen seuranta. Se sisältää myös syöttöruudun, joka suodattaa symbolit kirjoittaessasi. Virheet ja varoitukset näkyvät myös ääriviivat-näkymässä, jolloin näet yhdellä silmäyksellä ongelman sijainnin.

Sekalaiset

Nuo pienet parannukset, jotka muuttavat kaiken

1. Koodi CLI

VS-koodissa on tehokas komentoriviliitäntä, jonka avulla voit hallita editorin käynnistämistä. Voit avata tiedostoja, asentaa laajennuksia, vaihtaa näyttökielen ja antaa diagnostiikan komentorivivalinnoilla (kytkimet).

Kuvittele, että olet juuri 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