4 میانبر کاربردی در VSCode

میخوام تو این پست، چندتا از بهترین میانبرهایی که تو VSCode باهاشون کار کردم بهتون معرفی کنم. بعضی از این میانبرها برای یک syntax خاصه (مثلا html و jsx) و بعضی های دیگه رو همه جا میشه استفاده کرد. اگه شماهم مثل من برنامه نویس Front-end هستید، پیشنهاد میکنم این پست رو از دست ندین.

1. Balance Inward/Outward

فرض کنید که دارید روی یک فایل html یا یک کامپوننت که توش jsx داره کار میکنید. حالا میخواید محتویات داخل یک تگ رو کامل copy کنید و ببرید جای دیگه paste کنید. فرض کنید این تگ خیلی بزرگه و مثلا 100خط کد داخلش هست. راه معمولیش اینه که با ماوس کد داخلش رو select کنید و بعدش copy کنید. خب این کار خیلی تو مخیه! مخصوصا وقتی که تگ تون طولانیه یا prettify نشده. مجبورین بیاید از بالا تا پایینش اسکرول کنید حالا ممکنه اون آخرش هم تگ بسته شده شو پیدا نکنید یا اشتباهی یه تگ دیگه رو select کنید! اینجاست که این میانبر به کمکتون میاد:

• اول با زدن دکمه های crtl + shift + p میاید command palette رو باز میکنید.
• بعدش تایپ میکنید: balance
• دوتا گزینه میاد: balance inward و balance outward
• خب همونطور که از اسمشون مشخصه: inward میاد تمام محتوای داخل یک تگ رو انتخاب میکنه درحالیکه outward میاد تمام محتوی، بعلاوه خود اون تگ رو هم انتخاب میکنه. رو هرکدوم که بزنید میاد همون لحظه کاری که توضیح دادم رو انجام میده. ولی اینا که میانبر نیستن. حالا چی؟؟
• خب برای میانبر ساختن برای اینا میتونید با زدن دکمه های ctrl + k و بعدش ctrl + s (به ترتیب) پنل میانبرهای خودتون رو باز کنید و اونجا سرچ کنید balance inward یا balance outward و براشون کلید میانبر تعریف کنید. من خودم برای inward کلیدهای shift + alt + i و برای owtward کلیدهای shift + alt + o رو بعنوان میانبر گذاشتم.

2. Soft Undo

وقتی دارین با فایل های بزرگ و طولانی کار میکنید حتما پیش اومده که مثلا از خط 21 میاین اسکرول میکنید به خط 174 تا یک عبارتیو کپی کنید حالا میخواین برگردید به همون خط 21؛ این کارو خیلی راحت میتونید با دکمه های alt+ left انجام بدید. این میانبر درواقع میاد cursor رو برمیگردونه به جای قبلیش. جالبیش اینجاست که هرچقدر بیشتر این میانبر رو بزنید، cursor برمیگرده به جاهای قبل تر و حتی فایل های قبل تری که روشون کار میکردید! (البته اگه اون فایل ها باز باشن).

طبیعتا برعکس این حرکت هم میتونید با زدن دکمه های alt + right انجام بدید.

3. Wrap Individual Lines

فرض کنید چندتا تگ دارید که زیر هم قرار گرفتن (مثل p , img, a, span , ...) حالا میخواید همه اینارو wrap کنید داخل یک تگ مثل div

• اول با زدن دکمه های ctrl+ shift + p میاید command palette رو باز میکنید.
• بعدش تایپ میکنید: wrap with abbreviation
• وقتی روش کلیک کنید یک اینپوت براتون باز میشه که میتونید تگ تون رو داخلش تایپ کنید. مثلا div ؛ حالا چون این ویژگی برای Emmet هست میتونید همونجا بهش کلاس و آیدی هم بدید مثلا تایپ کنید: div.container براتون یک div با کلاس container میسازه.
• بعد اینکه تایپ کردین دکمه enter رو فشار بدید تا تگ براتون ساخته بشه.
• برای ساختن کلید میانبر برای این ویژگی هم میتونید مثل میانبر اول که بالاتر توضیح دادم عمل کنید.
• من خودم کلیدهای shift + alt + w رو برای این میانبر گذاشتم.

4. Select All Matches

خب آخرین میانبر که میخوام بهتون بگم خیلی ساده است ولی خیلی جاها کاربرد داره. فرض کنید توی یک فایل از یک کلمه یا عبارت چندین بار استفاده کردین. حالا میخواین اون کلمه یا عبارت رو ویرایش کنید. میتونید با select کردن اون کلمه و بعدش زدن دکمه های ctrl + shift + L همه تکرارهای اون کلمه رو توی اون فایل انتخاب کنید و همزمان اونارو ویرایش کنید.

خب اینم از این. اگر شماهم میانبرهای خیلی خفن بلدید تو کامنتا برام بنویسید :)

منبع: vscodecandothat.com