Šeit ir daži īpaši slepeni VS kodeksa uzlaušanas veidi, lai uzlabotu jūsu produktivitāti

Kodējot kā hobiju, profesionāli vai pat reizi mēnesī strādājošu izstrādātāju, jums jāzina, ka gudru un asu rīku izmantošana ir vitāli svarīga ikvienam, kurš strādāšanas laikā vēlas pavadīt maksimāli produktīvas stundas.

Esmu izveidojis nelielu padomu, triku un paplašinājumu kolekciju un tos filtrējis, lai mūsdienu tīmekļa izstrādātājam saglabātu tikai visretākos un visnoderīgākos. Kā mēs zinām, JavaScript ekosistēma ir ļoti liela un joprojām pieaug. Šī iemesla dēļ es centīšos būt objektīvs, cik vien iespējams.

Šie Visual Studio koda padomi palīdzēs iziet no visām kodēšanas sesijām, kas izskatās šādi:

Padarot to skaistu un draudzīgu

Ja tas patiešām izskatās labi un draudzīgi, jums patiks ar to pavadītais laiks.

1. Materiālu tēma un ikonas

Tas ir tieši augšup zvērs VS kodeksa tēmās. Es domāju, ka materiāla tēma ir vistuvāk rakstīšanai ar pildspalvu un papīru redaktorā (it īpaši, ja tiek izmantota tēma bez kontrasta ). Jūsu redaktors gandrīz izskatās plakans un vienmērīgs, sākot no integrētajiem rīkiem līdz teksta redaktoram.

Iedomājieties episku tēmu kopā ar episkām ikonām. Materiālās tēmas ikonasir tikai lieliska alternatīva, lai aizstātu noklusējuma VSCode ikonas. Izstrādātais lielais ikonu katalogs tiek vienmērīgi integrēts tēmā, padarot to skaistāku. Tas palīdzēs jums viegli atrast failus pārlūkprogrammā.

2. Zen režīms ar centrētu izkārtojumu

Jūs, iespējams, jau zināt Zen režīma skatu, kas pazīstams arī kā Distraction Free View (tiem, kas nāk no Sublime Text), kur viss (izņemot kodu) tiek noņemts, lai jums būtu reāla tuvība jūsu koda redaktoram. Vai zinājāt, ka izkārtojumu var centrēt tā, lai palīdzētu jums lasīt kodu tā, it kā atrastos PDF skatītājā? Tas patiešām palīdzēs jums koncentrēties uz funkciju vai izpētīt kāda cita kodu.

Zen režīms : [Skatīt> Izskats> Pārslēgt Zen režīmu]

Centra izkārtojums: [Skatīt> Izskats> Pārslēgt centrētu L izkārtojumu]

3. Fonti ar ligatūrām

Rakstīšanas stils padara lasīšanu ērtu un ērtu. Jūs varat padarīt redaktoru izskatīties labāk, izmantojot lieliskus fontus kopā ar ligatūrām. Šeit ir 6 labākie fonti, kas atbalsta ligatūras (saskaņā ar www.slant.co)

Jūs varat izmēģināt Fira Code, tas ir vienkārši lielisks un atvērts kods. Šādi jūs maināt fontu VSCode pēc tā instalēšanas.

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

Labi slavens fontu operators Operators Mono nenodrošina vietējo atbalstu ligatūrām. Tomēr, ja esat liels ligatūru cienītājs, varat tos pievienot, izmantojot šo bibliotēku.

4. Varavīksnes atkāpe

Atkāpe ar stilu. Šis paplašinājums iekrāso ievilkumu jūsu teksta priekšā, katrā solī mainot četras dažādas krāsas.

Noklusējuma atkāpes iestatījums iekrāso atkāpi pēc varavīksnes shēmas. Tomēr es pielāgoju savu, lai sekotu dažādiem pelēkajiem toņiem. Ja vēlaties, lai jūsu izskats izskatās kā šis piemērs, nokopējiet un ielīmējiet šo fragmentu savāsettings.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. Virsraksta joslas pielāgošana

Tas ir lielisks vizuālais kniebiens. Es to nokopēju no Wes Bos vienā no viņa React & GraphQL nodarbībām. Būtībā viņš mainīja virsraksta joslas krāsas dažādiem projektiem, lai tos viegli atpazītu un palīdzētu arī auditorijai tos atšķirt. Tas ir patiešām noderīgi, ja strādājat ar lietotnēm, kurām var būt vienādi kodi vai failu nosaukumi, piemēram, reaģējošā mobilā lietotne un reaģējošā tīmekļa lietotne.

Tas tiek darīts, rediģējot virsraksta joslas iestatījumus darbvietas iestatījumos katram projektam, kurā vēlaties dažādas virsraksta joslas krāsas.

Ātrāka kodēšana

Pati būtība to paveikt laikā

1. Tagu iesaiņošana

Ja jūs nepazīstat Emmetu, tad, iespējams, esat kāds, kuram patīk to visu rakstīt. Emmet ļauj ierakstīt saīsinātu kodu un saņemt atgrieztos atbilstošos tagus. Tas tiek darīts, atlasot virkni koda un ierakstot komandu Wrap with Abbreviated, kurai es pieslēdzu taustiņushift+alt+.

Skatieties to zemāk.

Iedomājieties, ka vēlaties ietīt visus šos, bet kā atsevišķas līnijas. Izmantojiet iesaiņošanu ar atsevišķām rindām, pēc tam ievietojiet * pēc saīsinājuma, piemdiv*

Gadījumā, ja vēlaties pāriet tieši uz Emmeting, šī ir Emmeta Mīklas lapa

2. Balansējiet uz iekšu un uz āru

Šis padoms tika ņemts no vietnes //vscodecandothat.com/, kuru es patiešām iesaku.

Izmantojot komandu balance inwardun balance outwardEmmet , VS kodā varat atlasīt visu tagu . Ir lietderīgi saistīt šīs komandas ar īsinājumtaustiņiem, piemēram Ctrl + Shift + Up Arrow, līdzsvaram ārā un Ctrl + Shift + Down Arrowlīdzsvaram iekšā.

3. Turbo Console.log ()

Nevienam nepatīk rakstīt ļoti garus paziņojumus, piemēram, console.log (). Tas var būt patiesi kairinošs, galvenokārt tad, ja vēlaties kaut ko patiešām ātri izdot, apskatīt tā vērtību un pēc tam turpināt kodēšanu. Ko darīt, ja es jums teiktu, ka jūs varat mierināt kaut ko tikpat ātri kā Lucky Luke?

Tas tiek darīts ar paplašinājumu ar nosaukumu Turbo Console Log . Tas ļauj reģistrēt jebkuru mainīgo zemāk esošajā rindā ar automātisku prefiksu, kas seko koda struktūrai. Jūs varat arī komentēt / komentēt alt+shift+u/ alt+shift+cvisu šī paplašinājuma pievienoto konsoli.log ().

Turklāt jūs visus varat arī izdzēst, izmantojot alt+shift+d:

4. Live serveris

Šis ir lielisks paplašinājums, kas palīdz jums palaist vietējā izstrādes serveri ar tiešas pārlādēšanas funkciju statiskām un dinamiskām lapām. Tam ir lielisks atbalsts tādām galvenajām funkcijām kā: HTTPS, CORS, pielāgotas vietējā hosta adreses un ports.

Lejupielādējiet to šeit

Tas var pat ļaut jums dalīties ar vietējo hostu, ja to izmantojat ar VSCode LiveShare.

5. Kopēt / ielīmēt ar vairākiem kursoriem

Viens no pirmajiem “Wow”, ko es kliedzu, izmantojot VS kodu, notika, kad es rediģēju vairākas rindas, pievienojot kursorus uz dažādām līnijām. Ilgi pēc tam es atradu ļoti labu šīs funkcijas izmantošanu. Jūs varat kopēt un ielīmēt šo kursoru atlasīto saturu, un tie tiks ielīmēti tieši tādā secībā, kādā tie tika kopēti.

Pārbaudiet zemāk.

6. Maizes drupatas un kontūras

Maizraksts parāda pašreizējo atrašanās vietu un ļauj ātri pārvietoties starp simboliem un failiem. Lai sāktu izmantot rīvmaizi, iespējojiet to ar komandu View> Toggle Breadcrumbs vai izmantojot t he breadcrumbs.enabled iestatījumu.

Kontūras skats ir atsevišķa sadaļa File Explorer koka apakšdaļā. Paplašinot, tas parādīs pašreiz aktīvā redaktora simbolu koku.

Kontūras skatā ir dažādi Kārtot pēc režīmiem, izvēles kursora izsekošana. Tas ietver arī ievades lodziņu, kas filtrē simbolus, kad rakstāt. Kļūdas un brīdinājumi tiek parādīti arī skatā Kontūra, ļaujot īsumā redzēt problēmas atrašanās vietu.

Dažādi

Tie mazie kniebieni, kas visu maina

1. Kods CLI

VS kodam ir spēcīgs komandrindas interfeiss, kas ļauj kontrolēt redaktora palaišanu. Izmantojot komandrindas opcijas (slēdžus), varat atvērt failus, instalēt paplašinājumus, mainīt displeja valodu un izvades diagnostiku.

Iedomājieties, ka esat tikko 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