Ево неколико супер тајних хаковања ВС кода за повећање ваше продуктивности

Кодирање као хобиста, професионалца или чак програмера једном месечно, морате знати да је коришћење паметних и оштрих алата од виталног значаја за свакога ко жели да уложи максимално продуктивне сате током рада.

Приредио сам малу колекцију савета, трикова и додатака и филтрирао их како би савремени веб програмер задржао само оне најређе и најкорисније. Као што знамо ЈаваСцрипт екосистем је веома велик и још увек расте. Из овог разлога, трудићу се да будем што више непристрасан.

Следећи савети за Висуал Студио Цоде ће вам помоћи да напустите све сесије кодирања које изгледају овако:

Чини га лепим и пријатељским

Ако заиста изгледа добро и пријатељски, свидеће вам се време проведено с њим.

1. Тема материјала и иконе

Ово је права звијер у темама ВС Цоде. Мислим да је материјална тема најближа писању оловком и папиром у уређивачу (посебно када се користи тема без контрастне варијанте ). Ваш уређивач готово да изгледа равно и беспрекорно, прелазећи од интегрисаних алата до уређивача текста.

Замислите епску тему у комбинацији са епским иконама. Иконе теме материјаласу само сјајна алтернатива за замену подразумеваних икона ВСЦоде. Велики каталог дизајнираних икона глатко се интегрише са темом чинећи је лепшом. То ће вам помоћи да лако пронађете датотеке у истраживачу.

2. Зен режим са центрираним распоредом

Можда већ знате Зен Моде Виев, познат и као Поглед без ометања (за оне који долазе из Сублиме Тект-а), где је све (осим кода) уклоњено како би вам пружили стварну блискост са вашим уређивачем кода. Јесте ли знали да распоред можете центрирати тако да вам помогне да прочитате свој код као да сте у ПДФ прегледачу? Ово ће вам заиста помоћи да се усредсредите на функцију или да проучите нечији код.

Зен режим : [Поглед> Изглед> Укључивање Зен режима]

Изглед центра: [Поглед> Изглед> Пребаци центрирани прелаз]

3. Фонтови са Лигатурама

Стил писања чини читање лаким и погодним. Можете да побољшате свој уређивач помоћу сјајних фонтова заједно са лигатурама. Ево 6 најбољих фонтова који подржавају лигатуре (према ввв.слант.цо)

Можете испробати Фира Цоде, то је сјајан и отворен изворни код. Тако мењате фонт у ВСЦодеу након што га инсталирате.

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

Познати фонт Оператор Моно не долази са матичном подршком за лигатуре. Међутим, ако сте велики љубитељ лигатура, можете их додати помоћу ове библиотеке.

4. Раинбов индент

Увлачење са стилом. Ово проширење обоји увлаке испред вашег текста наизменично у четири различите боје у сваком кораку.

Подразумевана поставка увлачења боји удубљење пратећи дугину шему. Међутим, своју сам прилагодио тако да прати различите нијансе сиве. Ако желите да ваш изгледа овако, копирајте и налепите следећи исечак у свој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. Прилагођавање траке наслова

Ово је сјајно визуелно подешавање. Копирао сам га од Вес Бос-а у једној од његових лекција Реацт & ГрапхКЛ. У основи је променио боје насловне траке на различите пројекте како би их лако препознао и помогао публици да их такође разликује. Ово је заиста корисно ако радите на апликацијама које могу имати исти код или имена датотека, на пример, мобилна апликација која реагује и веб апликација.

То се постиже уређивањем поставки траке наслова у поставкама радног простора за сваки пројекат у којем желите различите боје траке наслова.

Брже кодирање

Сама суштина да се то уради на време

1. Умотавање ознака

Ако не познајете Еммета, вероватно сте неко ко воли да све то куца. Еммет вам омогућава да откуцате скраћени код и добијете враћене одговарајуће ознаке. То се постиже одабиром гомиле кода и откуцавањем наредбе Врап витх Аббревиатед за коју сам повезао тастатуруshift+alt+.

Погледајте у наставку.

Замислите да све ово желите да умотате, али у појединачне редове. Користили бисте омотавање са појединачним линијама, а затим уметнули * након скраћенице, нпрdiv*

У случају да желите да скочите право у Емметинг, ово је Еммет Цхеатсхеет

2. Балансирајте према унутра и према споља

Овај савет је преузет са //всцодецандотхат.цом/, што заиста препоручујем.

Можете да изаберете целу ознаку у ВС коду помоћу команди balance inwardи balance outwardЕммет. Корисно је ове команде везати за пречице на тастатури, на пример Ctrl + Shift + Up Arrowза балансирање споља и Ctrl + Shift + Down Arrowза балансирање унутра.

3. Турбо Цонсоле.лог ()

Нико не воли да куца врло дугачке изјаве попут цонсоле.лог (). То може бити заиста иритантно, углавном када само желите да изнесете нешто заиста брзо, видите његову вредност, а затим наставите са кодирањем. Шта ако ти кажем да можеш да пријавиш било шта тако брзо као Срећни Лука?

То се ради са наставком названим Турбо Цонсоле Лог . Омогућава евидентирање било које променљиве у доњем реду са аутоматским додавањем префикса пратећи структуру кода. Такође можете да коментаришете / коментаришете alt+shift+u/ alt+shift+cсве цонсоле.лог () које је додало ово проширење.

Штавише, све их такође можете избрисати помоћу alt+shift+d:

4. Ливе сервер

Ово је сјајно проширење које вам помаже да покренете локални развојни сервер са функцијом поновног учитавања за статичне и динамичке странице. Има одличну подршку за главне функције као што су: ХТТПС, ЦОРС, прилагођене адресе локалног хоста и порт.

Преузмите је овде

Може вам чак омогућити и дељење вашег локалног хоста, ако се користи са ВСЦоде ЛивеСхаре.

5. Копирајте / налепите са више показивача

Једно од првих „Вовс“ на које сам вриштао када сам користио ВС Цоде догодило се када сам уређивао више редова додавањем курсора на различите линије. Дуго након, нашао сам веома добру употребу ове функције. Можете копирати и налепити садржај који су одабрали ти показивачи и биће лепљени тачно оним редоследом којим су копирани.

Погледајте доле.

6. Мрвице и обриси

Бреадцрумб приказује тренутну локацију и омогућава вам брзу навигацију између симбола и датотека. Да бисте започели употребу презле, омогућите је помоћу команде Поглед> Пребаци крушне мрвице или путем he breadcrumbs.enabпоставке т лед.

Приказ обриса је засебан одељак на дну стабла истраживача датотека. Када се прошири, приказаће се дрво симбола тренутно активног уређивача.

Приказ обриса има различит режим сортирања по избору, опционално праћење курсора. Такође укључује оквир за унос који филтрира симболе док куцате. Грешке и упозорења су такође приказани у приказу структуре, што вам омогућава да на брзину видите локацију проблема.

Остало

Те мале дораде које све мењају

1. Шифра ЦЛИ

ВС Цоде има моћан интерфејс командне линије који вам омогућава да контролишете како покрећете уређивач. Помоћу опција командне линије (прекидачи) можете отворити датотеке, инсталирати екстензије, променити језик приказа и извести дијагностику.

Замислите да сте управо 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