آموزش html با visual studio code2024-07-26
"آموزش vscode" به صورت کامل + نحوه کار با اکستنشن ها
در پایان مطلب آموزش Visual Studio Code به یک جمعبندی اجمالی از مباحث مطرح شده پرداخته شده است. در Visual Studio Code یک زمین بازی تعاملی (Interactive Playground) برای امتحان کردن ویژگیهای مختلف این ویرایشگر وجود دارد. دسترسی به صفحه زمین بازی تعاملی باز هم از طریق جستجوی عبارت «Interactive Playground» در Command Palette امکانپذیر است. وقتی که مخزن فعال شد، باید سیستم را بهروزرسانی کرده و Visual Studio Code را با دستورات زیر نصب کرد. نسخه VS Code، اولین شماره نسخه فهرست شده است و قالب نسخه آن به صورت «major.minor.release» است.
آموزش Visual Studio Code – از نصب تا اجرای اولین پروژه در VS Code
بنابراین تبهای جدید باز شده و هنوز ذخیره نشده هم میتوانند از ابزارهای کاربردی ویژوال استودیو کد برای زبان مورد نظر استفاده کنند. در ویژوال استودیو کد میتوانیم عرض سربرگهای پین شده را طوری تنظیم کنیم که کوچکتر دیده شوند. بعضی از برنامه نویسان وقتی که سربرگها را پین میکنند به سادگی محتویات درون آنها را به یاد میآورند. با کوتاهتر کردن اندازه سربرگها به ازای سربرگهای پین شده، میتوانیم در مصرف فضای افقی صرفهجویی کنیم. این مسئله به طور خاص زمانی مفید است که بعضی از فایلهای پین شده نامهای طولانی دارند.
ویرایشگر متن، یک رابط ابتدایی را فراهم میکند که این رابط، از قابلیتهای ساده کپی و الصاق پشتیبانی میکند. در تصویر متحرک زیر روش کارکرد این تنظیم ویژوال استودیو کد را نمایش دادهایم. کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نوشته میشود.
- VS Code ویرایشگر محبوب و پراستفادهای است و مزایای بسیاری دارد که در این بخش تنها به برخی از آنها اشاره شد. {
- شروع فرایند آموزش برنامه نویسی معمولا ساده است اما به نتیجه رسیدن این فرایند، تلاش و پشتکار زیادی میطلبد. |}{
- اما طراحان VS Code تنظیمات بسیار زیاد دیگری هم برای آن معرفی کردهاند. |}
- در پایان نیز مطالب کاربردی بسیاری پیرامون آموزش Visual Studio Code فهرست شده است که مطالعه آنها پس از مطالعه این مطلب برای یادگیری بهتر VS Code پیشنهاد میشود.
- اگر نیاز به ادامه کار از محل برنامهنویسی قبلی وجود داشته باشد، باید دستور code را بدون «n-» که به آن Flag گفته میشود، وارد کرد. {
- در اصل میتوان گفت، ما این را وظیفه خود میدانیم که کار با این ویرایشگر را به همه آموزش دهیم. |}
فصل دوم – شروع به کار
افزونه tropicRPC امکان آزمایش خودکار APIهای gRPC را با استفاده از تنظیمات مربوط به تست که در پروژه VS Code ذخیره شده به وجود میآورد. افزونه openapi-lint امکان تایید اعتبار و تحلیل کد برای مشخص کردن خطاها (Linting) را برای فایلهای OpenAPI فراهم میکند. API ابزاری است که امکان ارتباط و همکاری قطعات نرمافزاری را فارغ از محل اجرا و بستر توسعه آنها فراهم میکند. تعدادی افزونه در Visual Studio Code وجود دارد که امکان آزمایش APIها و کار با قالبهای توصیف API در داخل ویرایشگر را فراهم میسازند.
درودپیشنهاد میکنم از برنامه هایی مانند c cleaner استفاده کنید. احتمالا فایلهای نهانی دارید که همچنان بی فایده در سیستم باقی موندند. درودبه این شکل هست که در ترمینال دستور اجرا رو میزنید و در بخش اوت پوت میتونید خروجی رو ببینید. درودتاجایی که اطلاع دارم خیر اما برای اطمینان با مجموعه تماس بگیرید اگر دوره ای باشه بهتون معرفی میکنند. مشابه با قابلیت بالاست، با این تفاوت که عبارات درون فایلها را جستجو میکند. البته توجه کنید که یک IDE میتواند ویژگیها و امکانات بسیار دیگری نیز داشته باشد.
پیشنیازهای دوره
کد مربوط به تنظیم فونت ترمینال در فایل «Settings.json» به شکل زیر نمایش داده میشود. کد مربوط به تنظیم Default Language در فایل «Settings.json» به شکل زیر نمایش داده میشود. برای مثال، فرض کنیم که توسعهدهندهای تمرکز خود را بر روی کار با «PowerShell» گذاشته است. بنابراین میتواند زبان پیشفرض سربرگهای جدید را بر روی PowerShell تنظیم کند. البته هر کس میتواند زبان مورد استفاده خود را در بخش تنظیمات، به این ویژگی، معرفی کند. برای تعریف زبانهای برنامه نویسی مختلف باید از کلمات کلیدی مرتبط با هر زبان استفاده کرد.
در ابتدا به برخی سوالات رایج درباره VS Code پرداخته میشود. یکی از ویژگیهای کلیدی Visual Studio Code، پشتیبانی قدرتمند آن برای «دیباگ کردن» (Debugging) است. Debugger درونی VS Code به سرعت بخشیدن در چرخه ویرایش، کامپایل و اشکالزدایی کدها کمک میکند. ویرایشگر VS Code امکانات و ویژگیهای بسیاری دارد که در این بخش از مطلب آموزش Visual Studio Code به برخی از آنها اشاره شده است. در ادامه، شرحی از ویژگیهای کاربردی VS Code با هدف درک بیشتر اهمیت آموزش Visual Studio Code ارائه شده است. ما سعی کردهایم که در دوره آموزش VSCode این ویرایشگر را به شکل کامل و دقیق به شما آموزش دهیم، به شکلی که محتوای این دوره به شکل مستقیم در استفاده از VSCode برای شما نقش اساسی داشته باشد.
زبان پایتون یکی از محبوبترین و پراستفادهترین زبانهای برنامهنویسی در سطح جهان است. پایتون کاربردهای گستردهای دارد و با یادگیری آن میتوان در حوزههای مختلف علوم کامپیوتر فعالیت داشت. این دوره آموزشی برای علاقهمندان و افراد مبتدی که قصد شروع یادگیری پایتون را دارند مناسب است. از جمله سرفصلهای این دوره میتوان به آشنایی با پایتون، ساختمان داده در پایتون، توابع و ماژولها، کلاس و سایر موارد اشاره کرد.
در تصویر متحرک زیر، بهتر میتوانید اثر استفاده از این تنظیم را بر روی کدهای زبان Markdown مشاهده کنید. برای نمایش کاراکترهای فضای خالی باید در تنظیمات از گزینه boundary استفاده کنیم. با استفاده از گزینه، تمام نمادهای فضای خالی در دندانهگذاریها قابل تشخیص میشوند. پیکربندی گزینه boundary باعث رعایت صحیح سطحهای دندانهگذاری - به طور خاص در زبانهای پایتون و YAML - میشود. فایده دیگر این تنظیم در آن است که دیگر کاراکتر فضای خالی را با کاراکتر «تب» (Tab) اشتباه نمیگیریم.
نحوه اجرای کد در ویژوال استودیو کد
سپس در بخش «Editor» گزینه Format On Paste را پیدا کرده و مقدار آن را بر روی true تنظیم کنید. سپس در بخش «Files» گزینه Trim Final Newlines را پیدا کرده و مقدار آن را بر روی true تنظیم کنید. سپس در بخش «Files» گزینه Insert Final Newline را پیدا کرده و مقدار آن را بر روی true تنظیم کنید.
این قابلیت کار توسعهدهندگان را در ملاحظه و بررسی تغییراتی که در پروژه انجام میشود راحت میکند. از طریق زبانه مدیریت منبع در نوار فعالیت VS Code میتوان گیت را راهاندازی کرده و بسیاری از دستورات Git از جمله commit ،pull ،push و rebase قابل اجرا است. VS Code از خط فرمانی داخلی به نام Command Palette (طیف دستورات) پشتیبانی میکند که موقعیت آن در مبدأ پروژه در حال اجرا قرار میگیرد. این ویژگی، کار را بسیار راحت میکند؛ زیرا، برنامهنویس ناچار نخواهد بود که وضعیت خط فرمان فعلی را برای اجرای یک دستور سریع خط فرمان، تغییر دهد. برای باز کردن این خط فرمان، میتوان به سادگی از کلیدهای ترکیبی « Command/Control+Shift+P» استفاده کرد.
در تصویر زیر، تنظیم مربوط به «سربرگهای پین شده در ردیف جداگانه» را اعمال کردهایم. بعد از اجرای این دستور، نوار سربرگهای باز شده به شکل زیر در میاید. اگر شما از سربرگهای دیگری به تعداد دیگری استفاده کنید، نوار سربرگهای متفاوتی را مشاهده خواهید کرد. بعد از اعمال این تغییر، در صورتی که بر روی ساختار تودرتویی اسکرول کنیم با چیزی مانند تصویر زیر روبهرو میشویم.
با دیدن این دوره کامل VSCode را یاد میگیریم؟
به صورت پیشفرض، VS Code از اشکالزدایی فریمورک NodeJS پشتیبانی میکند و به طور کلی میتواند هر چیزی را که به جاوا اسکریپت ترجمه میشود، اشکالزدایی کند. اگرچه، برای اشکالزدایی سایر زبانهای زمان اجرا (Runtime) مثل C++ یا پایتون، نیاز به نصب افزونه مخصوص وجود دارد. برای مثال، افزونه vscode-database اتصال سریع و جستجو در MySQL و PostgreSQL را فراهم میکند.
همانطور که میبینید، در بالا انواع زبانهای برنامه نویسی نمایش داده میشود. اگر زبان موردنظر خود را پیدا نکردید، در بالا جستجو کنید و آن را انتخاب کنید. حالا میتوانید برای نوشتن برنامهی خود را در ویرایشگر شروع به کدنویسی کنید. برای مثال، ما یک پیام Hello world ساده را با استفاده از زبان پایتون نوشتیم. آموزش نصب نرم افزار VS Code و ساخت فایل html به صورت ویدیویی در این مقاله آموزش داده میشه برای دیدن آموزش کامل html و css وارد صفحه این دوره شوید و جلسات رو مشاهده کنید. بنابراین در ادامه یک آموزش کامل و جامع برای نصب نرمافزار Visual Studio Code و ایجاد یک فایل HTML قدم به قدم آورده شده است.
پسوند فایل، پسوند یک نام فایل است (3 یا 4 نویسه آخر در یک نام فایل، قبل از آن یک نقطه وجود دارد) و نوع محتوای فایل را توصیف می کند. به عنوان مثال، پسوند فایل های اچ تی ام ال html است و به مرورگر (و سایر برنامه ها) می گوید که محتوای فایل را به عنوان یک سند HTML تفسیر کنند. پس از دانلود پوشه پروژه توسط Visual Studio Code می توانید فایل ها را اضافه کنید. با استفاده از مدیر فایل یا داخل ویژال کد خود یک پوشه بسازید. مطمئن شوید که پوشه ای است که مرتباً از آن بازدید می کنید و آن را به خاطر می سپارید.
در پایین نیز گزینه Launch Visual Studio Code برای اجرا شدن آن در دسترس است. براساس امکانات زیاد، IDE نرم افزار حجیمتری نسبت به یک کد ادیتور است؛ به همین دلیل حجم ویژوال استودیو بالای 20 گیگابایت است اما فایل نصبی ویژوال استودیو کد به زحمت به 70 مگابایت میرسد. علاوه بر آن، این امکانات زیاد باعث میشود که سرعت ویژوال استودیو بسیار کمتر از ویژوال استودیو کد باشد. طول مدت این دوره آموزشی ۱۹ ساعت و ۱۹ دقیقه است و مدرس آن دکتر مصطفی کلامی هریس هستند.
چگونه با ویژوال استودیو کد (Visual Studio Code) یک وب سایت طراحی کنیم؟
میدانیم که Git یکی از مهمترین و مفیدترین ابزارهای کمکی برای جامعه توسعهدهندگان و برنامه نویسان است. حتی بعضی دیگر از صنایع هم برای نگهداری مسیر روند تغییرات مستندات خود از گیت استفاده میکنند. طراحان ویژوال استودیو کد این ویژگی را در نظر گرفته و تنظیمات خوبی را برای کار با Git ارائه دادهاند. اگر هنوز گزینه همگامسازی تنظیمات ویژوال استودیو کد را راهاندازی نکردهاید، باید آن را فعال کنید.
علاوه بر این، به صورت منبع باز ارائه شده و دست برنامه نویسان را برای توسعه و شخصی سازی هرچه بیشتر نرم افزار باز میگذارد. سبک بودن و سریع بودن ویژوال استودیو کد باعث شده است تا اغلب توسعه دهندگان وب از این کد ادیتور استفاده کنند. به همین منظور سه مقالهی جدا با عناوین بهترین افزونههای vscode و بهترین افزونههای ویژوال استودیو کد برای php را برای شما در نظر گرفتیم. Visual Studio Code از ادغام چندین ارائه دهنده مدیریت کد منبع (نسخه) همچون TFS ،Git و SVN پشتیبانی میکند.
Visual Studio Code از زبانهای برنامهنویسی متعددی پشتیبانی میکند. برخی از این زبانها به صورت پیشفرض در VS Code پشتیبانی میشوند. یکی از قابلیتها و ویژگیهای کلیدی VS Code افزونههای متعددی است که اکثراً به صورت رایگان قابل نصب و استفاده هستند. بعضی وقتها موقع کار کردن فراموش میکنیم که تغییرات اعمال شده را وارد حالت «Stage» کنیم. بعد از آن ویژوال استودیو کد، گزینههای Yes و No و Always و Never را به عنوان پاسخ قابل انتخاب نشان میدهد.
ویرایشگر Visual Studio Code و محیط توسعه Visual Studio چه تفاوتی با هم دارند؟
فرادرس برای رسیدن به این هدف، مجموعهای نسبتا کامل از فیلمهای پروژه محور برنامهنویسی را آماده کرده است. با استفاده از این تنظیم، تعقیب کردن چشمی مسیر حرکت کرسر سادهتر شده است. سپس در بخش «Editor» مقدار گزینه Cursor Smooth Caret Animation را به مقدار true تغییر دهید. هدف اصلی از به کار بردن تنظیمات ویژوال استودیو کد این است که فرایند اجرای وظایف برنامه نویسی را به شکل راحتتر و با سرعت بیشتری انجام دهیم. وجود تنظیمات درست، برای همه افراد مبتدی و حرفهای لازم است. ویژوال استودیو کد یکی از بهترین ابزارها برای نوشتن کدها است.
در VS Code، پیشنهاداتی برای عناصر، تگها، برخی مقادیر و تگهای Ionic و AngularJS نیز ارائه میشود. همچنین میتوان از CSS و JavaScript نیز در داخل کدهای HTML استفاده کرد. معمولاً اکثر توسعهدهندگان برای تحویل پروژه خود محدودیت زمانی دارند. استفاده از کلیدهای میانبر میتواند به میزان قابل توجهی از اتلاف وقت جلوگیری کند. یک توسعهدهنده و برنامهنویس حرفهای باید کلیدهای میانبر ابزار توسعه خود را بشناسد و از آنها به بهترین شکل استفاده کند. میتوان با استفاده از Command Palette یا طیف دستورات به تمام امکانات در VS Code دسترسی پیدا کرد.
یسری مورد هم در بخش بهترین افزونهها نام بردیم که پیشنهاد میکنم ازشون استفاده کنید تا کدنویسی براتون راحتتر و جذابتر بشه. سلاماین مشکل اصلا عادی نیست.برنامه رو به طور کامل پاک کنید و مجددا سورسش رو از سایتهای معتبر دانلود و نصب کنید. درودممکنه اصلا مشکلی نداشته باشه و صرفا اون ورژن VSCode جای دیگری نشون بده.بهتر است برای اطمینان از نصب پایتون و مشاهده ورژنش، از دستورات مربوطه در بخش ترمینال کمک بگیرید. دروداحتمالا تنظیمات اجرا بهم خورده یا منوی کناری رو به اشتباه بستید. میتونید از منوی بالا گزینه run رو بزنید و start debugging و سایر موارد مربوط به اجرا هستند. درودبه این دلیل هست که ماکروسافت پشتیبانی برنامهها رو از ویندوز 8 به بعد ارائه میده.
همچنین، افزونه vscode-sqlite امکان کار با پایگاهداده چندمنظوره SQLite را فراهم میکند. در ادامه مطلب آموزش Visual Studio Code به بحث در خصوص کاربردهای VS Code پرداخته شده است. قبل از آن، مجموعه کاملی از فیلمهای آموزش برنامهنویسی برای علاقهمندان به یادگیری مهارتها و زبانهای مختلف برنامهنویسی ارائه شده است. VSCode یک ابزار توسعه بوده و برای یادگیری استفاده از آن هیچگونه پیشنیازی لازم نیست.
در این صفحه فهرستی از کلیدهای میانبر قابل استفاده در VS Code ارائه شده و میتوان در میان آنها میانبر مورد نظر را جستجو کرد. در ادامه آموزش Visual Studio Code به معرفی ده تا از رایجترین و کاربردیترین میانبرهای صفحه کلید در VS Code پرداخته شده است. به همین شکل میتوان ویرایشگرها را در گروههای مختلف تنظیم کرد، و مثلاً دو پنجره را زیر هم و یک پنجره را در سمت راست قرار داد. در ادامه آموزش Visual Studio Code زبانه Search یا جستجو در نوار فعالیت معرفی و آموزش داده شده است. در ادامه آموزش Visual Studio Code به معرفی و آموزش امکانات و قابلیتهای رابط کاربری این ویرایشگر کد پرداخته شده است.
در صورت فراموشی محل هر یک از بخشهای رابط کاربری، با استفاده از گزینه «Interface Overview» در صفحه خوشآمدگویی، راهنمایی از محل بخشهای اصلی رابط کاربری VS Code روی صفحه ظاهر میشود. همواره میتوان از طریق Command Pallete و با جستجو در آن به صفحه خوشآمدگویی دسترسی داشت. در ادامه این بخش از آموزش Visual Studio Code، ابتدا به معرفی نوار وضعیت یا Status Bar و هر یک از زبانههای این بخش از رابط کاربری VS Code پرداخته شده است.
فرض کنیم که میخواهیم از فونت «CaskaydiaCove Nerd Font Mono» برای ترمینال استفاده کنیم. لازم به اشاره است که برای استفاده از فونتها در ترمینال و ادیتور هیچ محدودیتی وجود ندارد. فقط باید توجه کنید که فونت انتخاب شده باید از تمام «لیگچرهای» (Ligatures) مورد نظر پشتیبانی کند. فونت ترمینال را هم میتوانیم مانند فونت ادیتور پیکربندی کنیم. در تصویر زیر چند تب دلخواه را در دو ردیف مجزا دستهبندی کردهایم.
در ادامه فرآیند آموزش Visual Studio Code به شرح نحوه نصب این ویرایشگر کد در سه پلتفرم ویندوز، macOS و لینوکس پرداخته شده است. Visual Studio Code یک ویرایشگر کد چابک است که از عملیات توسعه نرمافزار مانند اشکالزدایی، اجرای وظایف و کنترل نسخه پشتیبانی میکند. هدف VS Code فراهم کردن ابزارهای مورد نیاز یک توسعهدهنده برای انجام چرخه «کدنویسی-ساخت-اشکالزدایی» است. در این راستا، جریانهای کاری پیچیدهتر به محیطهای توسعه مثل Visual Studio IDE سپرده میشود که امکانات کاملتری دارند. در فهرست زیر، دو مورد از مهمترین تنظیمات ویژوال استودیو کد را برای استفاده از فایلهای «Markdown» معرفی کردهایم. کد مربوط به تنظیم Suggest Smart Commit در فایل «Settings.json» به شکل زیر نمایش داده میشود.
آموزش Blazor از مقدماتی تا پیشرفته به همراه چند پروژه عملی و کاربردی
در ادامه آموزش Visual Studio Code در قسمت معرفی بخشهای اصلی VS Code به معرفی و آموزش زبانه Run (اجرا) پرداخته شده است. VS Code از مجموعه گستردهای از زبانهای برنامهنویسی شامل ++Java ،C و Python گرفته تا CSS ،Go و Dockerfile پشتیبانی میکند. همانطور که در ابتدای این قسمت نوشتیم یکی از ویژگیهای بسیار کاربردی ویژوال استدیو کد قابلیت پشتیبانی از تمام زبانهای برنامهنویسی است.
با استفاده از این تنظیم میتوانیم تعیین کنیم که آیا کرسر چشمک بزند یا نه. همچنین انیمیشن مورد استفاده برای چشمک زدن هم قابل انتخاب است. این مسئله در رابط کابری شاید زیاد به چشم نیاید اما بههرحال بعضی از برنامه نویسان علاقهدارند که مدل چشم زدن کرسر را تغییر دهند. با اعمال تغییرات مختلف میتوانید ظاهر مورد علاقه خود را انتخاب کنید. البته بیشتر برنامه نویسان همان شکل پیشفرض کرسر را میپسندند.
لینک مربوط به این فیلم آموزشی را در پایین نیز قرار دادهایم. از آنجا که هنوز آن را ذخیره نکردهایم و هیچ پسوندی هم به نام آن اختصاص داده نشده است، ویرایشگر کد VS Code نمیتواند نوع فایل و زبان کدهای نوشته شده در آن را تشخیص دهد. بنابراین امکان فراهم کردن خدماتی مانند هایلایتکردن سینتکس، تکمیل خودکار کدها و غیره هم وجود ندارد. به عنوان توسعهدهنده میتوانیم زبان پیشفرضی را برای تبهای جدید تعریف کنیم.
{یک پوشه توسعه ایجاد کنید
|}سپس گزینه «Editor» را انتخاب کرده و مقدار کاراکترهای مخفی را (در خط اول کد زیر) به مقدار به true تغییر میدهیم. بعد از انجام این کار، میتوانیم درون فایل Settings.json، تنظیمات زیر را مشاهده کنیم. البته این تنظیم - به غیر از «Plain Text» و «Markdown» - بر روی تمام زبانهای برنامه نویسی فعال است. بنابراین برای آنها باید این تنظیم را به صورت دستی فعال کنیم. Visual Studio Code یکی از محبوبترین ویرایشگرهای کد در دنیای برنامهنویسان است.
{مهم ترین تنظیمات ویژوال استودیو کد چه هستند؟
|}کد مربوط به تنظیم «دستور Commit هوشمند» در فایل «Settings.json» به شکل زیر نمایش داده میشود. کد مربوط به تنظیم Auto Stash در فایل «Settings.json» به شکل زیر نمایش داده میشود. کد مربوط به تنظیم Autofetch در فایل «Settings.json» به شکل زیر نمایش داده میشود. کد مربوط به تنظیم Scrollback در فایل «Settings.json» به شکل زیر نمایش داده میشود. کد مربوط به تنظیم «ظاهر کرسر ترمینال» در فایل «Settings.json» به شکل زیر نمایش داده میشود. در تنظیمات ویژوال استودیو کد حتی میتوانیم ظاهر کرسر ترمینال را هم پیکربندی کنیم.
IntelliSense یک اصطلاح کلی است که برای اشاره به مجموعهای از چند ویژگی و قابلیت که در ویرایش کد به کار میرود و توسط مایکروسافت ارائه شده است. این قابلیتها به حصول اطمینان از نوشته شدن کد بر اساس معیارهای تعیین شده آن زبان توسعه خاص، کمک میکنند. اما اگر تصمیم بگیرید که تغییرات مورد نظر قبل از تثبیت شدن در مخزن به صورت دستی Stage شوند. همچنین علاقهای به دیدن پیغام از طرف VS Code ندارید، هم باید مقدار enableSmartCommit را بر بروی false تنظیم کنید و هم مقدار suggestSmartCommit را.
یکی دیگر از قابلیت های جالب این کد ادیتور داشتن تم های رنگی مختلف هست که شما میتونید بر اساس سلیقه خودتون یکی رو انتخاب کنید. به همین دلیل، وجود محیطی که بتونه به برنامه نویس ها کمک کنه از زمان بهتر استفاده کنن و بهره وری بیشتری داشته باشن، موضوع خیلی ضروری بود. خوشحالیم که مقاله براتون مفید بوده.آموزش عملی کار با VSCode رو چون در قالب مقاله نمیگنجه و درخواستهای زیادی برای ویدیو داشتیم، در دورههای متخصص تهیه کردیم و الان هم در دسترس هست. درودتوصیه میکنم برای راحتی کار صفحه تون رو دو قسمت کنید تا نیاز به جابجایی نداشته باشید.همچنین این راهنمای تصویری live server رو ببینید تا منظورمو دقیقتر متوجه بشید. درودروی نوار سمت چپ راست کلیک کرده و بررسی کنید که گزینه Explorer تیک خورده باشه. من هر کدی رو تو vs مینویسم و ران میکنم هیچ خروجی به من نمیده حتی پروژه hello world .
حتی اگر پین کردن فایلها در ردیفهای جداگانهای انجام شود هم وجود نامهای طولانی میتواند بعضی از فایلهای پین شده را از دید خارج کند. بعضی از ساختارها در زبانهای برنامه نویسی مانند توابع، کلاسهای برنامه نویسی و Structure-ها را میتوان به صورت تودرتو تعریف کرد. استفاده از این تنظیم باعث میشود که بعد از اسکرول کردن صفحه به پایین نام مربوط به سطوح مختلف این ساختارها به بالای ویرایشگر بچسبد. در این حالت بسیار راحتتر میتوانید بخشهای تودرتوی کدها را تشخیص دهیم.
دروداز خود microsoft store در ویندوزتون عبارت vscode رو سرچ کنید و برنامه رو نصب کنید. در این بخش، مطالب مرتبط با آموزش Visual Studio Code که دارای محتوای آموزشی پیرامون نکات، ترفندها، میانبرها و سایر موارد مرتبط با VS Code هستند، ارائه شده است. در VS Code، «رابط کاربری انتخاب رنگ» در بخشهای مربوط به استایلدهی HTML در دسترس است. همچنین با تایپ کردن کاراکتر «/»، که در ابتدای تگ پایانی استفاده میشود، تگ متناظر بسته میشود.
این قابلیت برای باز کردن فایلهای یک پروژه بسیار مفید است. برای این کار کافی است به مسیر فایلهای اصلی در سیستم عامل خود رفته و سپس از راست کلیک، گزینهی Open with Code را انتخاب کنید. میبینید که در ویژوال استودیو کد شاخهی اصلی پروژه باز شده و از آنجا میتوانید به فایلهای مورد نیاز دسترسی داشته باشید. اگر به صورت پیوسته از ویژوال استودیو کد برای برنامه نویسی استفاده میکنید، توصیه میکنیم تا این گزینه را انتخاب کنید. در طرف دیگر، ویژوال استودیو کد به عنوان یک کد ادیتور قرار دارد.
نرم افزار ویژوال استودیو کد بهجای تبدیل کردن ساختار فایل به رمزگذاری پیشفرض خود، به شکل خودکار نوع رمزنگاری فایل را حدس میزند. در نتیجه میتواند فایل مورد نظر را به شکل صحیحی نمایش دهد. به همین ترتیب در زمان ذخیرهسازی فایلهم از همان قائده رمزنگاری استفاده میکند. نوع پیشفرض رمزنگاری فایلهای VS Code در تنظیمات files.encoding تعریف شده است. با کمک این تنظیم میتوانیم رنگ خطوط راهنمای دندانهگذاری در درخت فایل را تغییر دهیم. این تکنیک هم یکی دیگر از روشهای موجود در تنظیمات ویژوال استودیو کد است که به تشخیص راحتتر فایلها و فولدرهای مرتبط با هم در درخت فایل کمک میکند.
Visual Studio Code یک ویرایشگر کد منبع (Source Code Editor) سبک اما قدرتمند است که روی کامپیوتر دسکتاپ اجرا میشود. هنگامی که در درخت فایل بر روی یکی از فایلها کلیک میکنیم، کد ادیتور این فایل را در «سربرگ ویرایشگر پیشنمایشی» (Preview Editor Tab) باز میکند. بنابراین اگر بر روی فایل دیگری در درخت فایل کلیک کنیم، برای باز کردن سربرگ پیشنمایش آن فایل ابتدا باید صفحه پیشنمایش فعلی بسته شود. شاید بتوان گفت که مهمترین و مفیدترین تنظیمات ویژوال استودیو کد برای بخش رابط کاربری این نرمافزار طراحی شدهاند.
اگر مستندات منتشر شده این نرمافزار را مطالعه نکنیم، ممکن است که از بعضی تنظیمات جدید بیخبر بمانیم. البته پرداختن به تمام تنظیمات ویژوال استودیو کد هم میتواند طاقتفرسا بوده و زمانبر باشد. همچنین درک اینکه کدام یک از تنظیمات ارزش دستکاری دارند هم مشکل است. به عنوان برنامه نویس حرفهای، نیاز داریم که به طور کامل بر روی محیط و ابزار کار خود مسلط باشیم. زیرا کیفیت محصولی که تحویل میدهیم، اهمیت بسیار بیشتری نسبت به تعداد مهارتهای ما دارد.
در این بخش از آموزش Visual Studio Code نحوه ایجاد یک فایل جدید در VS Code و نوشتن اولین برنامه در این ویرایشگر به زبان پایتون توضیح داده شده است. همچنین میتوان VS Code را از طریق خط فرمان (Terminal) در macOS با وارد کردن دستور «code» اجرا کرد. البته قبل از اجرای این دستور، باید VS Code به Path مک OS اضافه شده باشد. برای این کار، باید به صورتی که در ادامه فهرست شده است اقدام شود.
{توضیحات دوره
|}با پشتیبانی از کنترل Git جاسازی شده، اشکال زدایی، تکمیل کد هوشمند، refactoring کد و غیره می آید. در این پنجره اطلاعات و تنظیماتی که هنگام نصب درنظر گرفتید، به شما نمایش داده میشود. پس از اتمام نصب ویژوال استودیو کد، یک پنجره با پیام موفقیت آمیز بودن نصب نشان داده میشود.
با استفاده از زبانه Run میتوان Debugger (اشکالیاب) را اجرا کرد. همچنین میتوان عملیات اشکالزدایی (Debug) را با استفاده از فایل تنظیماتی در قالب JSON شخصیسازی کرد. در سمت چپ صفحه، نوار فعالیت (Activity Bar) قرار دارد که در ادامه به معرفی و آموزش آن پرداخته شده است. پس از نصب Visual Studio Code، میتوان این ویرایشگر را با وارد کردن دستور «code -n» در خط فرمان، اجرا کرد.
{ساخت جدول در HTML و کار با تگ table
|}VS Code با هر نوع مخزن گیت، چه راه دور و چه محلی، کار میکند و برای رفع مغایرتها قبل از Commit کردن کدها، از نمادهای بصری استفاده میکند. این خط فرمان، یک PowerShell در داخل محیط توسعه VS Code به حساب میآید که آماده انجام وظایف معمول به صورت میانبر است. در این بخش از آموزش Visual Studio Code، به مزایا و نقاط قوت این ویرایشگر کد قدرتمند و کاربردی پرداخته شده است.
برچسبزنی خودکار، دیباگر زنده و واحد کنترل نسخه، تنها برخی از امکاناتی هستند که در VSCode موجود است. همچنین، جامعه برنامهنویسی فعالی در اطراف آن تشکیل شده است که افزونهها و تمهای بسیاری را برای این ویرایشگر ایجاد کردهاند. این ویرایشگر کد مشهور برای اولین بار در آوریل 2015 رونمایی و منتشر شد و به سرعت بازخوردهای مثبتی را از برنامه نویسان مختلف دریافت کرد. Visual Studio Code طی سالهای پس از عرضه، با دریافت بازخوردها و درخواستهای کاربران، ارتقاهای متعددی را تجربه کرده است.
آموزش html css مقدماتی تاپ لرن