vscode workflow ko. isang software na lang. wala na alt tab

@riecodes

5.9K followers · usually 3.6K views a post

Views

33.3K

Likes

2.6K

Comments

173

SoundTikTok sound · original sound - riecodes

View velocity

+4.2K views over 4.5d · ~952/day · 5 observations

Promoted product

VS Code

Visual Studio Code is a free, open source AI code editor. Build with AI agents that plan, code, and debug for you. Manage multi-agent workflows across environments on Linux, macOS, and Windows.

11 videos6 creators

Why it worked

The video provides practical tips and shortcuts for using VS Code, a popular tool among developers. By demonstrating how to streamline workflows and leverage integrated features, it offers value to viewers looking to improve their productivity.

Summary

The video demonstrates a VS Code workflow that aims to streamline development by integrating various tools and features within the IDE. It highlights the use of VS Code's integrated browser, command palette, and AI assistants like Claude Code for coding tasks, as well as customization of keyboard shortcuts. The creator also shows how to manage the layout by hiding panels to focus on the browser view.

Structure

1Introduction to VS Code workflow
2Demonstration of integrated browser and command palette
3Customizing keyboard shortcuts

Original caption

Developer ka ba, o BSIT student na may laptop at VS Code na gamit mo? Gusto mo matutunan yung buong workflow ko. Wala kang hassle sa pag-alt-tab, isang software na lang lahat. Una, sidebar. Dito mo makikita yung Explorer mo at yung search, importante ito kasi dito mo nahahanap yung mga files mo. Pangalawa, VS Code integrated browser. Habang nasa VS Code ka, press mo Ctrl + Shift + P, tapos i-type mo "browse", lalabas yung Browse: Open Integrated Browser. Click mo, pwede mo nang ilagay yung localhost and port mo, o pwede kang mag-search diretso. Kapag nag-run ka ng development server, pwede mo ring i-Ctrl + click yung localhost and port mo para automatic nang bumukas. Ang ganda pa nito, may add element to chat na feature. Pag ni-click mo yung element sa browser, mapupunta agad yun sa Copilot Chat sa kanan. Para buksan yung Copilot Chat, Ctrl + Alt + I. Gamit na gamit ko ito sa frontend design, kasi yung element na kinlick mo lang, mula na dun yung babaguhin mo. Pang-apat na hindi mawawala sa akin, VS Code terminal. Yung isa para sa local dev server, yung isa para kay Claude Code. Sonnet ang gamit ko pang-tanong tanong sa codebase, Opus naman pang-planning at coding. May custom status line pa ako na naka-attach kay Claude Code, makikita ko yung project name, color-coded yung model, ilang oras nang tumatakbo yung task, may context indicator para alam ko kung kailan mag-co-compact. Kapag naging sobrang laki na yung terminal mo, i-maximize panel mo lang, click mo yun. Meron din akong teknik dun, spam mo lang yung shortcut ko hanggang umayos, Alt + Backtick sa akin. Kung gusto mo gawin yung sarili mong shortcut, Ctrl + Shift + P ulit, tapos i-search mo "keyboard shortcuts", piliin mo yung Preferences: Open Keyboard Shortcuts. Doon mo pwedeng i-set kahit anong combination, sa akin Alt + Backtick. Yung browser focus na sinasabi ko, ang logic lang dito ay parang mga papel na pinagpapatong-patong natin. Para makuha natin yung view na gusto natin, magtatanggal tayo ng mga papel. I-hide mo yung terminal, Ctrl + Backtick, i-hide mo yung sidebar, Ctrl + B, at okay ka na. #vscode #workflow #developer #claudecode #bsit

More from @riecodes

On-screen text

vscode workflow ko. isang software na lang. wala na alt tab oh makinig ka! developer ka ba o BSIT student na may laptop vscode ide gusto mo matutunan yung work flow ko? panorin mo to eto buong work flow ko walang hassle sa pag alt + tab lahat yan iisang software lang pwede yan ganyan ganyan zen mode browser focus una sidebar explorer mo source code napaka importante kasi diyan mo makikita yung mga files mo. pangalawa vs code integrated browser habang nasa vs code ka press mo control + shift + p pagkapress mo lalabas tong command palette type mo boib or boib lalabas browse open integrated browser click mo pagclick mo lalabas to pwede mo na ilagay yung local host and port mo or pwede ka magsearch try ko local host try ko google or kapag nag run ka ng pwede mong i control click yung local host and port tapos automatic na to. ang ikinaganda ng integrated browser ni vscode ay meron siyang add element to chat na feature tapos pag kinlick mo to yung kinlick mo mapupunta dito sa ang aking co-pilot chat sa kanan pano buksan pindutin mo control + alt + i bukas sara bukas sara gamit na gamit ko yung co-pilot chat sa front and design kasi itong element iclick mo na lang prompt mo dito machange na kung ano man yung gusto mong machange dito. pang apat ang hindi mawawala is ang vs code terminal ang una is for local dev server. code ko. bakit yung isa opus, yung isa sonet yung isa. haiku haiku. pang tanong tanong sa code base sonet pang alalalay copilot and planning. yung dalawang opus ko pang planning and coding. riecodes, ano tong nasa ilalim ng cloud ruflo v3 custom status line na pwede mo ikabit kay claude code. makikita mo yung project name, color coded yung model, ilang oras na binububuo sa task ni claude code. context para maalam mo kung kailan ka mag cocompact at marami pang iba. riecodes, pano yung sobrang laki ng terminal mo kanina? eto lang yan oh. maximize panel click mo yan. medyo buggy lang siya sa browser pero kapag nakalagay ka sa iba yan sa codes gagana yan. pero may technique ako diyan spam mo lang hanggang sa umayos okay na. ano yung inispam mo? alt + (back tick) sineset yan sa keyboard shortcut. control + shift + p ulit lalabas to tapos search mo poks or p. o. k. s lalabas to preferences: Open Keyboard Shortcuts piliin mo to wag si jason derulo. kung merong control k, control s pwede lang din yan control k s tas automatic lalabas na to. search mo vtmp command view: Toggle Minimized Panel keybinding click mo lang yan double click tapos pwede mo nang ienter yung desired key combination mo. in my case alt back tick nga. ayan ganyan enter tapos okay na. eh. pano naman yung browser focus kanina? logic neto is lahat to is pinagpapatong patong lang natin siya para makuha natin yung view natin. para makuha natin yung browser focus, magtatanggal tayo ng mga papel. ihide natin lahat ng mga yan. so hide natin to control alt i, ihide natin ang terminal control back tick, ihide natin tong sidebar control b okay na.

Transcript

Developer ka ba, o BSIT student na may laptop at VS Code na gamit mo? Gusto mo matutunan yung buong workflow ko. Wala kang hassle sa pag-alt-tab, isang software na lang lahat. Una, sidebar. Dito mo makikita yung Explorer mo at yung search, importante ito kasi dito mo nahahanap yung mga files mo. Pangalawa, VS Code integrated browser. Habang nasa VS Code ka, press mo Ctrl + Shift + P, tapos i-type mo "browse", lalabas yung Browse: Open Integrated Browser. Click mo, pwede mo nang ilagay yung local host and port mo or pwede ka magsearch. Try ko local host. Try ko google. Or kapag nag run ka ng pwede mong i control click yung local host and port tapos automatic na to. Ang ikinaganda ng integrated browser ni vscode ay meron siyang add element to chat na feature. Tapos pag kinlick mo to, yung kinlick mo mapupunta dito sa ang aking co-pilot chat sa kanan. Pano buksan? Pindutin mo Control + Alt + I. Bukas sara. Bukas sara. Gamit na gamit ko yung co-pilot chat sa front and design kasi itong element iclick mo na lang. Prompt mo dito, machange na kung ano man yung gusto mong machange dito. Pang apat ang hindi mawawala is ang VS Code terminal. Syempre ang una is for local dev server. Code ko. Bakit yung isa Opus, yung isa Sonnet, yung isa Haiku. Haiku, pang tanong tanong sa code base. Sonnet, pang alalalay copilot and planning. Yung dalawang Opus ko pang planning and coding. Riecodes, ano tong nasa ilalim ng cloud code ko? Rufllo v3 custom status line na pwede mo ikabit kay Claude code. Makikita mo yung project name, color coded yung model, ilang oras na binubuo sa task ni Claude code. Context para maalam mo kung kailan ka mag cocompact at marami pang iba. Riecodes, pano yung sobrang laki ng terminal mo kanina? Eto lang yan oh. Maximize panel. Click mo yan. Medyo buggy lang siya sa browser pero kapag nakalagay ka sa iba yan sa codes, gagana yan. Pero may technique ako diyan. Spam mo lang hanggang sa umayos. Okay na. Riecodes, ano yung inispam mo? Alt + back tick. Sineset yan sa keyboard shortcut. Tuturuan ko kayo. Control + Shift + P ulit. Lalabas to. Tapos search mo "poks" or "p. o. k. s". Lalabas to. Preferences: Open Keyboard Shortcuts. Piliin mo to wag si Jason Derulo. Kung merong Control K, Control S, pwede lang din yan. Control K S. Tas automatic lalabas na to. Search mo vtmp. Command. View: Toggle Minimized Panel. Click mo lang yan double click. Tapos pwede mo nang ienter yung desired key combination mo. In my case, Alt back tick nga. Ayun ganyan. Enter. Tapos okay na. Riecodes, eh pano naman yung browser focus kanina? Ang pinaka logic neto is lahat to is pinagpapatong, patong lang natin siya para makuha natin yung view natin. Para makuha natin yung browser focus, magtatanggal tayo ng mga papel. Ihide natin lahat ng mga yan. So hide natin to. Control Alt I. Ihide natin ang terminal. Control back tick. Ihide natin tong sidebar. Control B. Okay na.