https://virgool.ir/feed/@pedram6195برنامه نویس فرانت اِندfa2026-11-11 23:13:31https://files.virgool.ir/upload/users/784234/avatar/3GJEad.jpeghttps://virgool.ir/@pedram6195https://virgool.ir/@pedram6195/4-میانبر-کاربردی-در-vscode-ogpsesjpjsukمیخوام تو این پست، چندتا از بهترین میانبرهایی که تو 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 پدرام افراسیابیپدرام افراسیابیWed, 18 Aug 2021 15:40:32 +0430