آموزش ساخت فایل HTML چگونه یک صفحه HTML ایجاد کنیم؟

به عنوان برنامه نویس حرفه‌ای، نیاز داریم که به طور کامل بر روی محیط و ابزار کار خود مسلط باشیم. زیرا کیفیت محصولی که تحویل می‌دهیم، اهمیت بسیار بیشتری نسبت به تعداد مهارت‌های ما دارد. وجود تنظیمات زیاد و متنوع در ویژوال استودیو کد، به برنامه‌ نویسان برای تسلط بر محیط کدنویسی خود کمک زیادی می‌کند. Enabled  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Git» گزینه Suggest Smart Commit  را پیدا کرده و مقدار آن را بر روی false  تنظیم کنید. سپس در بخش «Git» گزینه Merge Editor را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

گام پنجم: ذخیره فایل HTML در VSCode

Enable Sticky Scroll  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Color Customizations  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. Indent  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. برای اعمال این تنظیم، ابتدا وارد فایل «Settings.json» برای تنظیمات شوید. Font Ligatures  را به صورت دستی با مقدار true  تنظیم کنید. کد مربوط به تنظیم Font Family  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

به عنوان مثالی از این خطاها می‌توان به «لینک‌های خراب» (Broken Links) به صفحات یا تصاویری اشاره کرد که وجود ندارند. در ادامه این بخش از مطلب، روش پیکربندی همه تنظیمات فهرست بالا را آموزش داده‌ایم. در ادامه همین بخش از مطلب، روش پیکربندی تمام تنظیمات بالا را آموزش داده‌ایم. در تصویر زیر چند تب دلخواه را در دو ردیف مجزا دسته‌بندی کرده‌ایم. برای دسته‌بندی بهتر می‌توانیم ردیفی از سربرگ‌های پین‌ شده داشته باشیم. تمام سربرگ‌ها را می‌توان به سادگی پین کرده یا از حالت پین شده خارج کرد.

بنابراین، ما ویرایشگر متن خود را انتخاب کرده ایم، اکنون فقط باید آن را در رایانه خود نصب کنیم! روند نصب رایانه های دارای MacOS ،Windows و Linux بسیار مشابه خواهد بود و استفاده از Visual Studio Code در همه آن ها یکسان خواهد بود. حالا شما یک محیط توسعه ساده برای نوشتن کد HTML با استفاده از Visual Studio Code راه‌اندازی کرده‌اید. این تجربه اولیه می‌تواند به عنوان پایه‌ای برای یادگیری بیشتر در زمینه توسعه وب شما باشد. درودمشکل از آدرس تصویری است که در تگ بهش دادید، در اون آدرس تصویری وجود نداره و برای همین این خطا رو میده.

کد مربوط به این تنظیمات در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. بعد از تغییر دادن تنظیمات ویژوال استودیو کد به شکل بالا، موقعیت Activity bar مانند تصویر زیر تغییر می‌کند. کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. ابتدا به رابط کاربری گرافیکی مربوط به تنظیمات می‌رویم. سپس گزینه «Editor» را انتخاب کرده و مقدار کاراکترهای مخفی را (در خط اول کد زیر) به مقدار به true  تغییر می‌دهیم. بعد از انجام این کار، می‌توانیم درون فایل Settings.json، تنظیمات زیر را مشاهده کنیم.

کد ادیتور نرم‌ افزاری شبیه به ویرایشگر متن است که برخی ویژگی‌ها به آن اضافه شده است. پس ویژوال استودیو کد، یک IDE نیست چرا که همانطور که گفتیم یک IDE برخلاف کد ادیتور، دارای بسیاری از ابزارهای توسعه‌ی نرم‌ افزار است. سپس کدهای HTML را ویرایش کنید و دکمه‌های CTRL + S را برای ذخیره فایل HTML بزنید. همانطور که در ابتدای مقاله بیان کردیم، نرم‌افزارهای زیادی برای ساخت فایل‌های HTML وجود دارند. اما بهترین نرم‌افزار برای ساخت یک فایل HTML، نرم‌افزار VSCode یا ویژوال استودیو کد است. این نرم‌افزار به‌صورت رایگان و متن باز (Open Source) توسط مایکروسافت ارائه شده است که می‌توانید آن را دانلود کنید.

برای شروع یک پروژه از Visual Studio Code استفاده کنید

البته برای ویرایش این تنظیم باید ترمینال مورد نظر خود را به شکل مستقیم درون فایل «Settings.json» وارد کنیم. سپس در بخش «Editor» مقدار گزینه Cursor Blinking  را تغییر دهید. به صورت پیش‌‌فرض این مقدار بر روی blink  تنظیم شده است. اما در این مطلب - با هدف نمایش داده شدن کد در فایل JSON - آن را بر روی expand  تنظیم کردیم. سپس در بخش «Workbench» گزینه Color Customizations  را پیدا کنید. مقدار مربوط به این تنظیم را باید در فایل «Settings.json» به صورت دستی تنظیم کرد.

بازنشانی تنظیمات تغییر داده شده به حالت پیش‌ فرض

با پیکربندی این مورد در تنظیمات، ویژوال استودیو کد به صورت خودکار تمام خطوط خالی انتهای فایل را حذف می‌کند. کد مربوط به تنظیم Insert Final Newline  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Tool Bar Location  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Compact Folders  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

ویژوال استودیو به عنوان ابزاری قدرتمند و منعطف، به شما این امکان را داده تا وب سایت‌های زیبا و کاربرپسند را طراحی کنید. همچنین برخی از تنظیمات برگزیده را باید تغییر دهید تا برنامه بتواند فایل‌ها را به درستی ذخیره کند. برای این کار روی Preferences کلیک کنید و سپس روی Format بزنید و Plain Text را انتخاب کنید. همانطور که در بالا گفتیم، خروجی و نمایش کدها در مرورگر ربطی به نرم‌افزار مورد استفاده شده ندارد و فقط بخاطر راحتی کد نویسی، از VSCode استفاده می‌شود. اما اگر بخواهیم یک نرم‌افزار ساده برای ایجاد فایل HTML را معرفی کنیم، بدون شک نوت پد پیش‌فرض ویندوز، قابلیت ایجاد فایل‌های HTML را داراست اما به قدرتمندی VsCode نیست.

Visual Studio Code یکی از محبوب‌ترین ویرایشگرهای کد در دنیای برنامه‌نویسان است. در فهرست زیر، دو مورد از مهم‌ترین تنظیمات ویژوال استودیو کد را برای استفاده از فایل‌های «Markdown» معرفی کرده‌ایم. در فهرست زیر، مهم‌ترین تنظیمات ویژوال استودیو کد را درباره قالب‌بندی‌ و فایل‌ها معرفی کرده‌‌ایم. همین‌طور که می‌دانیم، VS Code برای اعلام بعضی از شرایط از نماد‌های مختلفی در نام‌ سربرگ‌ها استفاده می‌کند. برای مثال، با کمک نماد‌ «M» می‌تواند بگوید که فایل مورد نظر ویرایش شده است.

{
• بعضی از تنظیمات مورد اشاره در فهرست بالا، در حالت پیش‌فرض هم به درستی کار می‌کنند.
|}
• این تنظیم در نسخه‌های جدید VS Code به صورت پیش‌فرض فعال است.
• همین موضوع، اهمیت یادگیری و شرکت در یک دوره آموزش vs code را توجیه می‌کند.
{
• قبلا چندین افزونه مختلف برای انجام این کار وجود داشتند.
|}{
• با کوتاه‌تر کردن اندازه سربرگ‌ها به ازای سربرگ‌های پین شده، می‌توانیم در مصرف فضای افقی صرفه‌جویی کنیم.
|}
• همچنین درک اینکه کدام یک از تنظیمات ارزش دستکاری دارند هم مشکل است.

درباره وبکیماآکادمی وبکیما مجموعه ای از آموزش ها و ابزارها و مرجعی برای پاسخگویی به نیازهای دیجیتال مارکتینگ و کسب و کار اینترنتی شماست. تیم وبکیما همیشه در تلاش است تا بهترین دوره های آموزشی، با بالاترین کیفیت و بیشترین بازدهی را برای رشد و رونق کسب و کار اینترنتی شما تولید کند. هدف آکادمی وبکیما رشد و ارتقای تجارت آنلاین و دیجیتال مارکتینگ در ایران به اندازه سهم خویش است. امیدواریم با کمک شما همراهان گرانقدر به این هدف دست یابیم. با پیکربندی کردن این تنظیم، تمام هایپرلینک‌های الصاق شده به فایل‌های Markdown به صورت خودکار و توسط کدهای مشخصی محصور می‌شوند. این کار با توجه به سینتکس مخصوص لینک در فایل‌های Markdown انجام می‌‌شود.

با نصب افزونه‌ی Settings Sync، می‌توانید تنظیمات را همراه با پروژه‌ی موردنظر در گیت‌هاب آپلود کنید تا سایرین بتوانند از آن تنظیمات روی سیستم خود استفاده کنند. با نصب افزونه Quokka، هم‌‌زمان با تایپ کردن کد در ویرایشگر، کدها اجرا شده و خروجی به شما نشان داده می‌شود. اگر کد دارای خطا یا هشدار باشد نیز همان‌جا به شما نمایش داده شده و شما را راهنمایی می‌کند. در صورتی که اپلیکیشن فیلو را نصب کرده اید؛ برای تماشا یا دانلود این ویدیو وارد اپلیکیشن شده، از منو گزینه اسکن را انتخاب کرده و کد زیر را اسکن کنید. در این آموزش، ما به طور کامل درباره Visual studio code، نحوه پیاده سازی آن و نحوه اضافه کردن اکستنشن ها به نرم افزار Visual studio code پرداخته ایم. این مجموعه، شامل فیلم‌های آموزشی بسیار زیادی است که تکنولوژی‌ها و زبان‌های مختلف را پوشش می‌دهند.

درودبه این شکل هست که در ترمینال دستور اجرا رو میزنید و در بخش اوت پوت میتونید خروجی رو ببینید. درودبرنامه رو حذف و از سایتهای معتبر مجدد دانلود کنید. درودحقیقتا یکم با ویندوز 7 کارها سخت هست و چنین خطاهای عجیبی رو دریافت خواهید کرد. پیشنهاد میکنم در گام اول ویندوز رو به ده ارتقا بدید تا چند سال براتون کار کنه و سر نصب موارد بعدی به دردسر نیفتید. دکمه‌های ctrl+space رو بزنید باید موارد رو بهتون پیشنهاد بده و اگر نشد، از بخش اکستنشنها IntelliSense مربوط به بیسیک رو نصب کنید. در سمت چپ چندین تب وجود دارد که در ادامه کاربرد هر یک را توضیح می‌دهیم.

نوع پیش‌فرض رمزنگاری فایل‌های VS Code در تنظیمات files.encoding  تعریف شده است. برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی Setting شوید. سپس در بخش «Workbench» به قسمت Editor رفته و مقدار Pinned Tab Sizing  را بر روی shrink  تنظیم کنید. علاوه بر این موارد، یک برنامه نویس باید بتواند حداقل با یک محیط توسعه یا یک ویرایشگر کد کار کند و به خوبی به آن مسلط شود.

آموزش class و id در CSS انتخابگرها در CSS

البته این مقدار سلیقه‌ای است و می‌توانید بیشتر یا کمتر هم بکنید. سپس در بخش «Workbench» به قسمت Editor  رفته و مقدار Pinned Tabs On Separate Row  را بر روی true  تنظیم کنید. سپس در بخش «Editor» مقدار گزینه Smooth Scrolling  را بر روی true  تنظیم می‌کنیم. Enabled  را پیدا کرده و مقدار آن را به true  تغییر دهید. هدف اصلی از به کار بردن تنظیمات ویژوال استودیو کد این است که فرایند اجرای وظایف برنامه نویسی را به شکل راحت‌تر و با سرعت بیشتری انجام دهیم.

با این حال اگر می خواهید از محیط های متفاوت تر IDE اسفاده کنید می توانید به Adobe Dream Weaver و Bootstrap مراجعه کنید. البته توجه داشته باشید که دو محیط ذکر شده با ویژوال استودیو کد متفاوت اند. در این پنجره اطلاعات و تنظیماتی که هنگام نصب درنظر گرفتید، به شما نمایش داده می‌شود. پس از اتمام نصب ویژوال استودیو کد، یک پنجره با پیام موفقیت آمیز بودن نصب نشان داده می‌شود. در پایین نیز گزینه Launch Visual Studio Code برای اجرا شدن آن در دسترس است. این قابلیت برای باز کردن فایل‌های یک پروژه بسیار مفید است.

اگر همچنان با نت نمیتونید نصب کنید بفرمایید تا با کمک هم حلش کنیم. دروداز منوی بالا تب view میتونید با تیک زدن موارد appearance و editor layout موارد موردنیازتون رو در محیط اضافه کنید. درودنباید با چنین مشکلی مواجه بشید اما بهتره برای اطمینان از vpn استفاده کنید.

اول یدور حذف نصب و نصب مجدد کنید و ویژوال رو باز و بسته کنید تا اعمال بشه و بعد چک کنید. البته در این حالت که رو cmd اجرا میگیرید، شاید بد نباشه live serve رو مستقیم همونجا نصب کنید. سرچ بزنید راهنمای کامل رو میاره.اما در کل براساس تجربه توصیه میکنم که به پایچارم کوچ کنید و زمان باارزشتون رو تلف نکنید.

با نصب افزونه‌ی Path Intellisense کار با مفاهیم فایل بسیار آسان‌تر می‌شود. با استفاده از Polacode‌ می‌توانید از کد خود اسکرین‌شات‌ بگیرید و آن را به اشتراک بگذارید. ممکن است دموهای تصویری موجود در اینترنت را دیده باشید که بخشی از کد را نشان می‌دهند. بعد از نصب افزونه‌ی Better Align می‌توانید بخش‌های تعریف متغیر، declarationهای مختلف و به طور کلی کدهای نوشته شده در یک فایل را هم‌تراز کنید. این باعث می‌شود تا راحت‌تر بتوانید نظرات و بخش‌های مختلف کد را دنبال کنید.

شکل و ساختار کدهای JavaScript

ویژگی «قالب‌بندی کدهای ویرایش شده» به طور خاص در زمان کار با فایل‌های ذخیره شده توسط ابزارهای کنترل نسخه - مانند گیت - کاربرد دارد. با استفاده از تنظیمات بخش قبل، موفق شدیم محیط کار خود را مناسب با سلیقه و به دلخواه خود طراحی کنیم. اکنون زمان اعمال تنظیمات مناسب بر روی فایل‌هایی است که با آن‌ها کار می‌کنیم. استفاده از این تنظیمات هم باعث افزایش سرعت کار شده و هم نظم بیشتری به اجرای پروژه‌ها می‌دهد. کد مربوط به این تنظیم در فایل «Settings.json» مانند کادر زیر نشان داده می‌‌شود.

بهترین ویرایشگر کد برای HTML و CSS کدام است؟

درود متن دقیق خطایی که میگیرید رو بفرستید تا بتونم کمک تون کنم. من هر کدی رو تو vs می‌نویسم و ران می‌کنم هیچ خروجی به من نمی‌ده حتی پروژه hello world . درودبه این دلیل هست که ماکروسافت پشتیبانی برنامه‌ها رو از ویندوز 8 به بعد ارائه میده. باید تست کنید و اگر نتیجه نداد، با جستجوی vscode for windows 7 از سایتهای دیگه دریافتش کنید.

سپس در بخش «Files» گزینه Insert Final Newline  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Files» گزینه Trim Trailing Whitespace  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Files» گزینه Auto Save  را پیدا کرده و مقدار آن را بر روی afterDelay  تنظیم کنید. همچنین گزینه Auto Save Delay  را پیدا کرده و مقدار آن را بر روی تنظیم کنید.

با کمک این تنظیم می‌‌توانیم رنگ خطوط راهنمای دندانه‌گذاری در درخت فایل را تغییر دهیم. این تکنیک هم یکی دیگر از روش‌های موجود در تنظیمات ویژوال استودیو کد است که به تشخیص راحت‌تر فایل‌ها و فولدر‌های مرتبط با هم در درخت فایل کمک می‌کند. توجه داشته باشید که خطوط راهنمای دندانه‌گذاری که به صورت پیش‌فرض اعمال می‌‌شوند برای نمایش در بعضی از مانیتور‌ها بیش از حد تاریک بوده و سخت قابل تشخیص هستند. البته این مسئله سلیقه‌ای بوده و هر کسی هر رنگی را می‌تواند انتخاب کند. ویژوال استودیو کد یک ویرایشگر کد متن باز است و با زبان‌های برنامه نویسی جاوا، جاوا اسکریپت، تایپ اسکریپت، html و  css نوشته شده است.

هر سن مناسب چه حوزه برنامه نویسی هستش؟

اگر بخواهیم با سرعت تمام تغییرات اعمال شده در بخش تنظیمات را ببینیم باید از فایل «Settings.json» استفاده کنیم. نام فایل جدید را با پسوند فایل مناسب آن تایپ کنید (به عنوان مثال .html ،.css ،.csv). مهم است که پسوند فایل را به درستی وارد کنید، بنابراین برنامه هایی مانند linter ها می دانند که چگونه محتوای آن را تفسیر کنند.

اما طراحان VS Code تنظیمات بسیار زیاد دیگری هم برای آن معرفی کرده‌اند. شروع فرایند‌ آموزش برنامه نویسی معمولا ساده‌ است اما به نتیجه رسیدن این فرایند، تلاش و پشتکار زیادی می‌طلبد. فرض کنیم که کتاب‌ها یا دوره‌های اولیه برنامه نویسی را پشت سر گذاشته‌ایم. تنظیمات ویژوال استودیو کد خود را مانند افراد حرفه‌ای پیکر‌بندی کرده و اکنون باید دوره‌های حرفه‌ای‌تری را بگذرانیم. ترکیب تکنولوژی‌های مختلف برای تولید محصولات نرم‌افزاری کاری است که معمولا در دوره‌های آموزشی پروژه‌محور تدریس می‌شوند.

قبلا چندین افزونه مختلف برای انجام این کار وجود داشتند. اما اکنون این عملیات به یکی از عملیات درونی ویژوال استودیو کد تبدیل شده است. این تنظیم در نسخه‌های جدید VS Code به صورت پیش‌فرض فعال است.

با کمک این گزینه، تمام تنظیمات محیط کار ویژوال استودیو کد ذخیره شده و بر روی محیط کاری جدید منتقل می‌شوند. قبل‌ها برای انجام این کار لازم بود که افزونه خاصی را بر روی ویژوال استودیو کد خود نصب کنیم. اما اکنون این ویژگی به شکل درونی داخل VS Code قرار داده شده است. در این مقاله با ویژوال استودیو کد و ویژگی‌های آن آشنا شدیم و تلاش کردیم تا آن را از جنبه‌های مختلف بررسی کنیم.

معرفی نرم افزار ویژوال استودیو برای کدهایHtml

اگر مستندات منتشر شده این نرم‌افزار را مطالعه نکنیم، ممکن است که از بعضی تنظیمات جدید بی‌خبر بمانیم. البته پرداختن به تمام تنظیمات ویژوال استودیو کد هم می‌تواند طاقت‌فرسا بوده و زمانبر باشد. همچنین درک اینکه کدام یک از تنظیمات ارزش دستکاری دارند هم مشکل است.

این بافر برای ذخیره‌سازی داده‌های خروجی به کار برده می‌‌شود. بافر Scrollback به صورت پیش‌فرض برای ذخیره‌سازی خط متن تنظیم شده است. با استفاده از تنظیم Scrollback می‌توانیم تعداد خط ذخیره شده در بافر را افزایش دهیم. در تصویر زیر قبل از اعمال این تنظیم، می‌توان دید که نوارابزار دیباگ بخشی از ابزارهای کنترلی را پوشانده است. بعد از انجام این کار، تنظیم نمایش فایل‌ها به شکل زیر تغییر می‌کند.

کد مربوط به این پیکربندی در فایل «Settings.json» به شکل زیر نوشته می‌‌شود. منتهی وقتی برنامه پایتون مینویسم و ران و دیباگ رو میزنم، فقط در ترمینال ران میشه و در debug console هیچ چیزی نمایش داده نمیشه. در واقع انگار debug console عملیاتی نیست یا متصل نیست چون وقتی روش کلیک میکنم فضای داخلش خالیه. بهترین مزیت استفاده از ویژوال استودیو کد این است که می‌توان افزونه‌های زیادی را با استفاده از سیستم مدیریت افزونه‌ها نصب کرد. درمورد این قابلیت در بخش بعدی به طور مفصل صحبت می‌کنیم.

هر سایتی که در اینترنت مشاهده می‌کنید، از یک فایل HTML ساخته شده است. اگر شما نیز می‌خواهید یک صفحه وب با HTML بسازید، در این مقاله با آموزش ساخت فایل HTML و نمایش آن در مرورگر آشنا خواهید شد. نرم‌افزارهای زیادی برای ساخت فایل‌های اچ تی ام ال وجود دارد. پس در ادامه با دولوپرشو همراه باشید تا با نحوه ساخت سند HTML به‌صورت گام به گام آشنا شوید.

این نقشه در بخش سمت راست ویرایشگر کد نمایش داده شده و به جای نوار اسکرول سنتی به کار برده می‌شود. بعد از اعمال تنظیمات بالا، نوار Breadcrumb در بالای ادیتور به شکل زیر نمایش داده می‌شود. پس از اتمام دانلود فایل Visual Studio Code باید آن را نصب کنیم. فایل Visual Studio Code را در مدیر فایل خود پیدا کنید، برنامه ای که به شما امکان می دهد فایل ها و پوشه ها را در رایانه خود مشاهده کنید. ویرایشگر های متنی که ویرایشگر کد نیز نامیده می شوند، برنامه هایی هستند که توسعه دهندگان برای نوشتن کد از آن ها استفاده می کنند. آن ها می توانند کد شما را برجسته و قالب بندی کنند تا خواندن و درک آن آسان تر باشد.

اضافه کردن دکمه آپلود رسانه در وردپرس با کدنویسی

به صورت پیش‌فرض این تنظیم کل فایل را قالب‌بندی می‌کند. اما شاید کاربری ترجیح دهد که فقط خطوط ویرایش شده‌ قالب‌بندی شوند. برای انجام این کار از مقدار modifications  برای تنظیم formatOnSaveMode  استفاده می‌‌کنیم.

بعد از نصب ویژوال استودیو کد، ابتدا آن را باز کنید و در قسمت بالا سمت چپ روی گزینه File کلیک کنید. اگر قبلا فایل HTML را با نوت پد ساخته باشید، می‌توانید روی گزینه Open File کلیک کنید و کدهای HTML را ویرایش کنید. اما اگر اولین بار می‌خواهید یک فایل HTML ایجاد کنید، باید بعد از File روی گزینه New Text File کلیک کنید. استفاده از این گزینه برای راه‌اندازی تنظیمات ویژوال استودیو کد، به طور خاص در زمان خاموش و روشن کردن کردن کامپیوتر یا استفاده از کامپیوتر جدید، مزیت خود را نشان می‌دهد.

این روش نمایش فایل، به صورت پیش‌فرض برنامه‌ریزی شده است. در ویژوال استودیو کد فقط یک سربرگ پیش‌نمایش وجود دارد. بنابراین اگر بر روی فایل دیگری در درخت فایل کلیک کنیم، برای باز کردن سربرگ پیش‌نمایش آن فایل ابتدا باید صفحه پیش‌نمایش فعلی بسته شود. استفاده از فیلم‌های آموزشی فرادرس از بسیاری جهات مانند هزینه، زمان، کیفیت تدریس و غیره نسبت به کلاس‌های حضوری، مفید‌تر است.

با استفاده از تنظیم «Auto Stash»، می‌توانیم به صورت خودکار تغییرات ایجاد شده در کدها را ذخیره کنیم. این ذخیره‌سازی قبل از واکشی داده‌ها از مخزن گیت انجام می‌شود. بعد از اینکه واکشی داده‌ها با موفقیت انجام شد، تغییرات ذخیره شده بازیابی می‌شوند. ترمینال متصل شده به VS Code، دارای بافری است که برای انجام عملیات «Scrollback» به‌ کار برده می‌شود. Scrollback به معنای برگشتن به داده‌های خروجی دستورات پیشین در ترمینال است.

به همین دلیل در این مطلب از مجله فرادرس، مفید‌ترین تنظیمات ویژوال استودیو کد را معرفی کرده‌ایم. البته شاید نیاز به تغییر دادن همه این تنظیمات نباشد، اما به عنوان برنامه نویس و کاربر این کد ادیتور خوب است که با آن‌ها آشنایی کافی داشته باشیم. ابتدا تمام تنظیمات را با توجه به کارکردشان توضیح داده و سپس روش اعمال تغییر در آن‌ها را نیز بررسی کرده‌ایم.

استایل دهی به رابط کاربری با CSS

در صورت تمایل بر روی تصویر پایین کلیک کرده و از سایر فیلم‌های تولید شده نیز دیدن کنید. شاید ترمینالی که می‌‌خواهید استفاده کنید، در فهرست وجود نداشته باشد. در این صورت هم می‌توانید آن را به فهرست ترمینال‌های خود اضافه کنید.

اگر از ترمینال یکپارچه شده با VS Code استفاده می‌کنید، امکان تغییر آن وجود دارد. ترمینال پیش‌فرض VS Code در ویندوز «Cmd.exe» و در لینوکس و macOS ترمینال «Bash» است. شاید به عنوان توسعه‌‌دهنده ترجیح دهید که از کنسول PowerShell به عنوان ترمینال پیش‌فرض، استفاده کنید.

وجود تنظیمات درست، برای همه افراد مبتدی و حرفه‌ای لازم است. ویژوال استودیو کد یکی از بهترین ابزارها برای نوشتن کدها است. این کد ادیتور کیفیت بالایی داشته و می‌تواند هم سطح IDE-های حرفه‌ای برنامه نویسی، وظایف مختلفی را مدیریت کند.

معرفی زبان JavaScript  و کاربردهای آن در طراحی وب

اگر در فکر ورودی قدرتمند به حوزه برنامه نویسی و طراحی وب هستید آموزش html و css پایه کار است. در پایین فهرستی از مفید‌ترین تنظیمات ویژوال استودیو کد را درباره ترمینال ارائه کرده‌ایم. برای مثال، فرض کنیم که توسعه‌دهنده‌ای تمرکز خود را بر روی کار با «PowerShell» گذاشته است. بنابراین می‌تواند زبان پیش‌فرض سربرگ‌های جدید را بر روی PowerShell تنظیم کند. البته هر کس می‌تواند زبان مورد استفاده خود را در بخش تنظیمات، به این ویژگی، معرفی کند.

کد مربوط به تنظیم Auto Stash  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Autofetch  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. گیت، سیستم کنترل نسخه متن‌بازی است که به توسعه‌دهندگان برای مدیریت و اشتراک‌گذاری تغییرات در کدهای منبع کمک می‌کند. توسعه‌دهندگان مختلف می‌توانند به طور هم‌زمان بر روی پروژه یکسانی کار کنند. در صورت نیاز به آموزش استفاده از این ابزار کمکی می‌توانید فیلم آموزش برنامه‌ نویسی تیمی با گیت و گیت هاب، مدیریت پروژه یونیتی با Git و GitHub را از فرادرس مشاهده کنید.

علاوه بر این، با استفاده از افزونه‌های موجود، می‌توانید آن را به دلخواه خود گسترش دهید و قابلیت‌های جدیدی به آن اضافه کنید. حتی امکان کدنویسی به زبان‌هایی که به صورت عادی، در محیط Visual Studio Code  قابل استفاده نیستند نیز وجود دارد. همین موضوع، اهمیت یادگیری و شرکت در یک دوره آموزش vs code را توجیه می‌کند. برای اعمال این تغییر ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Terminal» گزینه Integrated  را پیدا کرده و مقدار Default Profile.

دوره های پیشنهادی

اگر به یادگیری بیشتر در زمینه‌ی برنامه نویسی پایتون علاقه داری، یادگیری زبان پایتون بسیار ساده است. و با شرکت در دوره‌ی متخصص آموزش جنگو در آینده می‌تونی اپلیکیشن موبایل و دسکتاپ بسازی و وارد حوزه‌ی هوش مصنوعی هم شوی. وب‌سایت آموزش برنامه نویسی دولوپر شو در 6ام تیر ماه سال 1401 تاسیس شد. هدف ما این است که برنامه نویسی را با استفاده از مقالات و ویدئوهای آموزشی برنامه نویسی در سطح استاندارد جهانی برای شما فراهم کنیم. اما اگر در گام اول از روش دوم استفاده کرده‌اید، بعد از قرار دادن تگ‌های HTML با زدن کلیدهای ترکیبی CTRL + S فایل را ذخیره کنید.

سلامآیا سرفصل آموزش کدنویسی در نرم افزار visual studio code رو در همین مقاله مطالعه کردید؟ همون پاراگراف اولش درمورد اینکه نوع فایل رو چطور پایتون کنید توضیح دادیم. سبک بودن و سریع بودن ویژوال استودیو کد باعث شده است تا اغلب توسعه دهندگان وب از این کد ادیتور استفاده کنند. به همین منظور سه مقاله‌ی جدا با عناوین بهترین افزونه‌های vscode  و بهترین افزونه‌های ویژوال استودیو کد برای php را برای شما در نظر گرفتیم. علاوه بر آن، این امکانات زیاد باعث می‌شود که سرعت ویژوال استودیو بسیار کمتر از ویژوال استودیو کد باشد.

بعضی از افراد تصمیم می‌گیرند که هیچ پیام متنی از سمت ویژوال استودیو کد دریافت نکنند. همین‌طور می‌خواهند که تمام تغییرات اعمال شده به صورت خودکار قبل از تثبیت شدن در مخزن، وارد Stage شوند. کد مربوط به تغییر دادن ترمینال پیش‌ فرض در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

حال وقت آن است که خود را شگفت زده کنید و از کار دستی خود متعجب شوید – شما اولین پروژه خود را با Visual Studio Code ساختید. قبل از اینکه یاد بگیرید چگونه می توانید فایل ها را به یک پوشه پروژه اضافه کنید، مهم است که هدف از پسوند فایل ها را بدانید. پسوند فایل، پسوند یک نام فایل است (3 یا 4 نویسه آخر در یک نام فایل، قبل از آن یک نقطه وجود دارد) و نوع محتوای فایل را توصیف می کند. به عنوان مثال، پسوند فایل های اچ تی ام ال html است و به مرورگر (و سایر برنامه ها) می گوید که محتوای فایل را به عنوان یک سند HTML تفسیر کنند. پس از دانلود پوشه پروژه توسط Visual Studio Code می توانید فایل ها را اضافه کنید.

تصویر سمت چپ، ظاهر درخت فایل‌ را قبل از اعمال این تنظیم و تصویر سمت راست بعد از اعمال این تنظیم نشان می‌دهد. این تنظیم، در زمان کلیک بر روی کد‌ها خط افقی یا عمودی به صفحه کار VS Code اضافه می‌کند. این خط جفت‌پرانتز یا جفت‌آکولادی را نشان می‌دهد که در حال حاضر بر روی آن کار می‌‌کنید. فقط کافیست که در محوطه مربوط به آن پرانتز‌ها یا آکولاد‌ها کلیک کنید.

احتمالا فایلهای نهانی دارید که همچنان بی فایده در سیستم باقی موندند. درودتاجایی که اطلاع دارم خیر اما برای اطمینان با مجموعه تماس بگیرید اگر دوره ای باشه بهتون معرفی میکنند. مشابه با قابلیت بالاست، با این تفاوت که عبارات درون فایل‌ها را جستجو می‌کند. این وب‌سایت یک موتور جستجوگر اینترنتی است و هیچ دخالت انسانی در دریافت و چینش مطالب وجود ندارد.