"آموزش vscode" به صورت کامل + نحوه کار با اکستنشن ها

کد مربوط به تنظیم Default Language  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. برای مثال، فرض کنیم که توسعه‌دهنده‌ای تمرکز خود را بر روی کار با «PowerShell» گذاشته است. بنابراین می‌تواند زبان پیش‌فرض سربرگ‌های جدید را بر روی PowerShell تنظیم کند.

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

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

سیستم لازم برای نصب و اجرای ویژوال استودیو

به همین دلیل در این مقاله، سعی کرده‌ایم تا به آموزش کار با نرم افزار ویژوال استودیو کد بپردازیم. اگر به یادگیری نحوه کدنویسی با ویژوال استودیو کد علاقه دارید و می‌خواهید ویژگی‌ها و ترفندهای ویژوال استودیو کد را بهتر بشناسید، تا انتهای این مقاله با ما همراه باشید. در پایان نیز مطالب کاربردی بسیاری پیرامون آموزش Visual Studio Code‌ فهرست شده است که مطالعه آن‌ها پس از مطالعه این مطلب برای یادگیری بهتر VS Code پیشنهاد می‌شود. Visual Studio Code یک ویرایشگر کد منبع (Source Code Editor) سبک اما قدرتمند است که روی کامپیوتر دسکتاپ اجرا می‌شود. هنگامی که در درخت فایل‌ بر روی یکی از فایل‌ها کلیک می‌کنیم، کد ادیتور این فایل‌ را در «سربرگ ویرایشگر پیش‌نمایشی» (Preview Editor Tab) باز می‌کند.

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

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

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

درودحقیقتا بنده با این زبان کار نکردم اما معمولا ویژوال کد مشکلی در نمایش utf-8 نداره. تنها راه حلی که به ذهنم میرسه همون جیسون ادیتوره که اونم میفرمایید تست کردید. کامنت تون رو تایید میکنم اگر فردی تجربه ای داشت بتونه کمک تون کنه. با استفاده از زبانه Run می‌توان Debugger‌ (اشکال‌یاب) را اجرا کرد. همچنین می‌توان عملیات اشکال‌زدایی (Debug) را با استفاده از فایل تنظیماتی در قالب JSON‌ شخصی‌سازی کرد.

ساخت اولین سایت با HTML در VS Code

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

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

جلسات دوره

به صورت پیش‌فرض، «نوار کنار» (Side Bar) ویژوال استودیو کد در سمت چپ ویرایشگر قرار می‌گیرد. اما به‌هرحال کسانی هستند که ترجیح می‌دهند نوار کناری در سمت راست صفحه کار قرار بگیرد. زیرا با این روش، وقتی که نوار کناری را باز کرده یا می‌بندیم، تمام متن داخل ویرایشگر به صورت ناگهانی جابه‌جا نمی‌شوند. به صورت پیش‌فرض، نوار‌ابزار بخش دیباگ بر روی صفحه کار، شناور است. بنابراین همیشه دیده شده و قابل جابه‌جایی به بخش‌های مختلف ویژوال استودیو کد است.

آموزش vs code رایگان جامع ترین دوره آموزش وی اس کد

برای اعمال این تغییر ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Terminal» گزینه Integrated  را پیدا کرده و مقدار Default Profile. برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی Setting شوید. سپس در بخش «Workbench» به قسمت Editor رفته و مقدار Pinned Tab Sizing  را بر روی shrink  تنظیم کنید.

کد مربوط به تنظیم Format On Save  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Format On Paste  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Trim Final Newlines  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

{
• کامنت تون رو تایید میکنم اگر فردی تجربه ای داشت بتونه کمک تون کنه.
|}
• در این دوره آموزشی تمامی مباحث و موضوعات مقدماتی و پایه زبان برنامه‌نویسی پایتون پوشش داده شده است.
• در این حالت بسیار راحت‌تر می‌توانید بخش‌های تودرتوی کدها را تشخیص دهیم.
{
• پیکربندی صحیح تنظیمات ویژوال استودیو کد بر روی ساده‌تر شدن فرایند کدنویسی و در نتیجه افزایش کیفیت و سرعت انجام کار تاثیر می‌گذارد.
|}{
• برای نمایش کاراکترهای فضای خالی باید در تنظیمات از گزینه boundary  استفاده کنیم.
|}
• قبل از استفاده از ویرایشگر متن، ایجاد یک سیستم فایل سازمان یافته مهم است.

قابلیت MiniMap در VS Code

VSCode یا Visual Studio Code، یک ویرایشگر متن‌باز و بسیار قدرتمند است که توسط ابرشرکت مایکروسافت توسعه داده شده است. این برنامه، به عنوان یک ابزار توسعه چند منظوره شناخته می‌شود که برای برنامه‌نویسان و توسعه‌دهندگان زبان‌های برنامه نویسی مختلف، ایده‌آل است. بعد از اون به سراغ بخش جذاب دوره یعنی معرفی افزونه های کاربردی مختلف خواهیم رفت و  شما با هر زبان برنامه نویسی که کار میکنید میتونید از این افزونه ها استفاده کنید. بهترین مزیت استفاده از ویژوال استودیو کد این است که می‌توان افزونه‌های زیادی را با استفاده از سیستم مدیریت افزونه‌ها نصب کرد. این بخش برای افرادی مناسب است که می‌خواهند از راه دور کدنویسی کنند.

آموزش نصب و راه اندازی ویژوال استودیو کد

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

آیا همه افزونه های VS Code رایگان هستند؟

سلام دوست عزیز، لطفا سوالات خودتون رو در انجمن پرسش و پاسخ درسمن مطرح کنید، تا کارشناسان سریع تر جواب مورد نظرتون رو بدهند، این قسمت بخش نظرات دوره هست. بله؛ اتفاقا در جلسه چهارم این دوره شما به یادگیری کلید های میانبر خواهید پرداخت، سعی کرده ایم تا تمامی کلید های میانبری که می تواند کار شما را تسریع ببخشد استفاده کنیم. برای شروع از قسمت File روی گزینه Add Folder to Workspace کلیک کنید. لطفا پرسش مربوط به هر درس یا ویدئو دوره را در صفحه همان ویدئو مطرح کنید.

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

دوره آموزش وی اس کد، نحوه کار و استفاده از حداکثر پتانسیل برنامه VSCode را به شما یاد می‌دهد. یادگیری استفاده‌ی صحیح از ابزارهای توسعه، تأثیر چشمگیری در افزایش سرعت، کیفیت و بهره‌وری کار شما خواهد داشت، به‌ویژه در دنیای رقابتی برنامه‌نویسی. ندیدن این دوره و یاد نگرفتن vs code  قطعا به مرور زمان میتونه نتایج بدی به همراه داشته باشه.

اگر به یادگیری بیشتر در زمینه‌ی برنامه نویسی پایتون علاقه داری، یادگیری زبان پایتون بسیار ساده است. و با شرکت در دوره‌ی متخصص آموزش جنگو در آینده می‌تونی اپلیکیشن موبایل و دسکتاپ بسازی و وارد حوزه‌ی هوش مصنوعی هم شوی. با انتخاب این گزینه، در دسکتاپ شورتکاتی برای ویژوال استودیو کد ساخته می‌شود. سلام وقتتون بخیر ببخشید برای اجراگرفتن پروژه ای ک با زبان سی شارپ هست توی vs codeچطور باید فایل رو اجرا کنیم اصلا runنمیشه ممنون میشم راهنمایی کنین. تغییر تنظیمات Hue، شدت و میزان شفافیت رنگ در VS Code پشتیبانی می‌شود. همچنین قابلیت‌ها و امکانات متعدد دیگری نیز برای توسعه با HTML در VS Code وجود دارد.

برای مشاوره تخصصی از کارشناسان درسمن، شماره خود را وارد کنید. از طریق مدیر فایل خود به پرونده index.html در پوشه Hello World بروید. سپس در بخش باز شده، روی آیکون پوشه کلیک کرده و یک پوشه به اسم Hello World ایجاد کنید.

برای نمایش کاراکترهای فضای خالی باید در تنظیمات از گزینه boundary  استفاده کنیم. با استفاده از گزینه، تمام نماد‌های فضای خالی در دندانه‌گذاری‌ها قابل تشخیص می‌شوند. پیکربندی گزینه boundary  باعث رعایت صحیح سطح‌های دندانه‌گذاری - به طور خاص در زبان‌های پایتون و YAML - می‌شود. فایده دیگر این تنظیم در آن‌ است که دیگر کاراکتر فضای خالی را با کاراکتر «تب» (Tab) اشتباه نمی‌گیریم.

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

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

بیشتر توسعه دهندگان جهان در حال استفاده از VSCode برای توسعه اپلیکیشن‌های خود هستند و این بدلیل ویژگی‌های منحصر به فردی‌ست که این ویرایشگر به ارمغان آورده است. همچنین رایگان بودن آن باعث شده تا بدون نیاز به هیچگونه پرداختی از امکانات آن استفاده کنید. در دوره آموزش html و html5 به صورت کامل و جامع از پایه ترین مباحث HTML شروع به یادگیری میکنیم تا به مباحث پیشرفته HTML5 برسیم ، با ما همراه باشید.

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

دو گزینه Appearance و Editor Layout برای تغییر ظاهر محیط براساس نیازتون هست. این راهکار و یا سایر نظرات همون صفحه رو ببینید، ایشالا مشکلتون رفع میشه. درودیکبار نرم افزار رو پاک کرده، سیستم رو ریست و مجددا نرم افزار رو نصب کنید. درودباید بعد از نصب ویژوال رو ببندید و مجددا باز کنید تا تنظیمات جدید اعمال بشه.و سعی کنید از درون خود ویژوال برای نصب پکیج استفاده کنید. با استفاده از این افزونه‌ی Git Lens می‌توانید بفهمید که خط مورد نظر از کد، توسط چه کسی و در چه تاریخی تغییر کرده است، تاریخچه‌ی کامیت‌ها را بررسی کنید و...

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

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

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

هزینه برنامه نویسی

تمام سربرگ‌ها را می‌توان به سادگی پین کرده یا از حالت پین شده خارج کرد. فقط کافیست که بر روی آن‌ها کلیک کرده و به سمت ردیف پین شده‌ها بکشیم یا از آن ردیف خارج کنیم. اما در صورت استفاده از همگام‌سازی تنظیمات با نسخه‌های قدیمی VS Code - که به مدت زیادی بروز‌رسانی نشده‌اند - ممکن است این تنظیم خاموش بوده باشد. اما بعد از اعمال تنظیم "editor.cursorSmoothCaretAnimation بر روی on حرکت کرسر به شکل زیر می‌شود. همین‌طور که می‌بینید در تصویر بالا، فضاهای خالی ایجاد شده با دکمه «Space» به شکل نقطه و فضاهای خالی ایجاد شده با دکمه تب به شکل فلش کم رنگ دیده می‌شوند. برای نصب افزونه‌ها، به بخش Extensions بروید و افزونه دلخواه خود را جستجو و نصب کنید.

Customize کردن Vs Code

Visual Studio Code به صورت داخلی دارای انضمام گیت (Git) است. این قابلیت کار توسعه‌دهندگان را در ملاحظه و بررسی تغییراتی که در پروژه انجام می‌شود راحت می‌کند. از طریق زبانه مدیریت منبع در نوار فعالیت VS Code می‌توان گیت را راه‌اندازی کرده و بسیاری از دستورات Git از جمله commit ،pull ،push و rebase قابل اجرا است.

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

زبان فرانسه

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

با اعمال تغییرات مختلف می‌توانید ظاهر مورد علاقه خود را انتخاب کنید. البته بیشتر برنامه نویسان همان شکل پیش‌فرض کرسر را می‌پسندند. اما شاید عده‌ای هم ترجیح دهند که از شکل‌های دیگری به عنوان ظاهر کرسر استفاده کنند. اکثر توسعه دهندگان پروژه های خود را در یک فهرست آسان ذخیره می کنند (آنچه ممکن است برای فراخوانی “پوشه” استفاده کنید). هر زمان که یک پروژه جدید ایجاد می کنید، صرف نظر از اینکه کوچک باشد، باید همیشه یک پوشه جدید در داخل فهرست پروژه های خود ایجاد کنید.

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

البته شاید نیاز به تغییر دادن همه این تنظیمات نباشد، اما به عنوان برنامه نویس و کاربر این کد ادیتور خوب است که با آن‌ها آشنایی کافی داشته باشیم. ابتدا تمام تنظیمات را با توجه به کارکردشان توضیح داده و سپس روش اعمال تغییر در آن‌ها را نیز بررسی کرده‌ایم. VSCode (ویژوال استدیو کُد) نامی آشنا در بین کد ادیتورهای محبوب دنیاست. از زمانی که این ویرایشگر توسط مایکروسافت عرضه شده است توسعه‌دهندگان بسیار زیادی شروع به توسعه اپلیکیشن‌های‌شان با استفاده از این ابزار کرده‌اند. از مهمترین ویژگی‌های این ادیتور می‌توان به متن‌باز/رایگان بودن، چندسکویی بودن، قابلیت بالا در پشتیبانی از زبان‌های برنامه‌نویسی مختلف و... یکی دیگر از مزایای استفاده از این ادیتور نسبت به دیگر موارد، وجود افزونه‌های توسعه‌پذیر بسیار زیاد و کاربردی است که هر کدام آن‌ها به نحوی فرایند توسعه وب اپلیکیشن‌ها را سهولت می‌بخشد.

آموزش html با visual studio code – صباوید

این تجربه اولیه می‌تواند به عنوان پایه‌ای برای یادگیری بیشتر در زمینه توسعه وب شما باشد. در آخرین بخش از مطلب آموزش Visual Studio Code به معرفی برخی از مهم‌ترین فیلم‌های آموزش برنامه‌نویسی پرداخته شده است. در این بخش از مطلب آموزش Visual Studio Code به معرفی مطالب مربوط به میانبرهای مفید و کاربردی VS Code پرداخته شده است. به طور مشابه، می‌توان ویژگی‌ها و قابلیت‌های دیگر ویرایشگر VS Code‌ را آموخته و آن‌ها را در محیط تعاملی ارائه شده در بخش Interactive Playground مورد آزمایش قرار داد. می‌توان با استفاده از حالت Zen Mode در VS Code روی کدها تمرکز بیش‌تری داشت.

علاوه بر این، اگر برنامه نویس وب هستید و استفاده زیادی از HTML و CSS دارید، می‌توانید سرعت کدنویسی خود را با استفاده از Emmet چندبرابر کنید. برای پیکربندی این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» به قسمت «Editor» رفته و مقدار گزینه Decorations.

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

ویژوال استودیو کد، اتم (Atom) و Sublime Text از محبوب‌ترین‌های کد ادیتورها هستند و ما در این مقاله به آموزش کار با نرم افزار ویژوال استودیو کد می‌پردازیم. سپس در بخش «Workbench» به قسمت Editor  رفته و مقدار Pinned Tabs On Separate Row  را بر روی true  تنظیم کنید. ویژوال استودیو کد یک ویرایشگر متن قدرتمند است که با پشتیبانی از پلاگین‌ها و افزونه‌های مختلف، امکانات زیادی را برای توسعه‌دهندگان فراهم می‌کند. از مزایای این نرم‌افزار می‌توان به قابل‌حمل بودن، سبک بودن، و پشتیبانی از بسیاری از زبان‌های برنامه‌نویسی اشاره کرد. علاوه بر این موارد، یک برنامه نویس باید بتواند حداقل با یک محیط توسعه یا یک ویرایشگر کد کار کند و به خوبی به آن مسلط شود.

البته در این حالت که رو cmd اجرا میگیرید، شاید بد نباشه live serve رو مستقیم همونجا نصب کنید. سرچ بزنید راهنمای کامل رو میاره.اما در کل براساس تجربه توصیه میکنم که به پایچارم کوچ کنید و زمان باارزشتون رو تلف نکنید. دروداحتمالا به این دلیل هست که تنظیمات اجرا روی اون زبان انجام نشده.از منوی بالا گزینه Run رو انتخاب کنید و میتونید از دو مورد اول استفاده کنید یا از کلید f5 مستقیم برنامه رو اجرا کنبد. با نصب افزونه‌ی Path Intellisense کار با مفاهیم فایل بسیار آسان‌تر می‌شود.

به دلیل اینکه استفاده درست از یک ویرایشگر حرفه‌ای می‌تواند به آینده کدنویسی شما کمک بسیار زیادی بکند ما تصمیم گرفته‌ایم که کار با این ویرایشگر را به شکل کاملا رایگان به شما آموزش دهیم. در اصل می‌توان گفت، ما این را وظیفه‌ خود می‌دانیم که کار با این ویرایشگر را به همه آموزش دهیم. هدف نهایی ما در این دوره آموزشی این است که شما را به صورت کامل با ویژگی‌های ویژوال استدیو کد (VSCode) آشنا کرده و فرایند مدیریت و توسعه پروژه در این ویرایشگر را به شما آموزش دهیم. در این بخش از آموزش، با محیط نرم افزار Visual Studio Code  آشنا می شوید و کد نویسی را شروع می کنید و تگ های و را به شما عزیزان معرفی می کنیم.

حالا می‌توانید برای نوشتن برنامه‌ی خود را در ویرایشگر شروع به کدنویسی کنید. برای مثال، ما یک پیام Hello world ساده را با استفاده از زبان پایتون نوشتیم. آموزش نصب نرم افزار VS Code و ساخت فایل html به صورت ویدیویی در این مقاله آموزش داده میشه برای دیدن آموزش کامل html و css وارد صفحه این دوره شوید و جلسات رو مشاهده کنید. بنابراین در ادامه یک آموزش کامل و جامع برای نصب نرم‌افزار Visual Studio Code و ایجاد یک فایل HTML قدم به قدم آورده شده است.

پس از دانلود پوشه پروژه توسط Visual Studio Code می توانید فایل ها را اضافه کنید. با استفاده از مدیر فایل یا داخل ویژال کد خود یک پوشه بسازید. مطمئن شوید که پوشه ای است که مرتباً از آن بازدید می کنید و آن را به خاطر می سپارید.

Cursor Style  را پیدا کرده و مقدار آن را بر روی line  تنظیم کنید. Font Family  را پیدا کرده و مقدار آن را بر روی CaskaydiaCove Nerd Font Mono  تنظیم کنید. سپس در بخش «Files» گزینه Default Language  را پیدا کرده و مقدار آن را - با توجه به مثال بالا - بر روی powershell  تنظیم کنید. سپس در بخش «Files» گزینه Auto Guess Encoding  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Editor» گزینه Format On Save Mode  را پیدا کرده و مقدار آن را بر روی modifications  تنظیم کنید.