<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
  "translation_date": "2025-08-25T23:17:03+00:00",
  "source_file": "8-code-editor/1-using-a-code-editor/README.md",
  "language_code": "bn"
}
-->
# কোড এডিটর ব্যবহার করা

এই পাঠে [VSCode.dev](https://vscode.dev) নামক একটি ওয়েব-ভিত্তিক কোড এডিটর ব্যবহারের মৌলিক বিষয়গুলো আলোচনা করা হয়েছে, যাতে আপনি আপনার কোডে পরিবর্তন আনতে এবং কোনো প্রকল্পে অবদান রাখতে পারেন, আপনার কম্পিউটারে কিছু ইনস্টল না করেই।

## শেখার লক্ষ্যসমূহ

এই পাঠে আপনি শিখবেন কীভাবে:

- কোড প্রকল্পে একটি কোড এডিটর ব্যবহার করবেন
- ভার্সন কন্ট্রোলের মাধ্যমে পরিবর্তনগুলো ট্র্যাক করবেন
- ডেভেলপমেন্টের জন্য এডিটর কাস্টমাইজ করবেন

### পূর্বশর্ত

শুরু করার আগে, আপনাকে [GitHub](https://github.com) এ একটি অ্যাকাউন্ট তৈরি করতে হবে। [GitHub](https://github.com/) এ যান এবং যদি আপনার অ্যাকাউন্ট না থাকে তবে একটি অ্যাকাউন্ট তৈরি করুন।

### ভূমিকা

কোড এডিটর হলো প্রোগ্রাম লেখার এবং বিদ্যমান কোডিং প্রকল্পে সহযোগিতা করার জন্য একটি অপরিহার্য টুল। একবার আপনি এডিটরের মৌলিক বিষয়গুলো এবং এর বৈশিষ্ট্যগুলো কীভাবে ব্যবহার করবেন তা বুঝতে পারলে, আপনি এগুলো কোড লেখার সময় প্রয়োগ করতে পারবেন।

## VSCode.dev দিয়ে শুরু করা

[VSCode.dev](https://vscode.dev) হলো একটি ওয়েব-ভিত্তিক কোড এডিটর। এটি ব্যবহার করতে কিছু ইনস্টল করার প্রয়োজন নেই, এটি ঠিক অন্য কোনো ওয়েবসাইট খোলার মতো। এডিটরটি শুরু করতে, এই লিঙ্কটি খুলুন: [https://vscode.dev](https://vscode.dev)। যদি আপনি [GitHub](https://github.com/) এ সাইন ইন না করেন, তাহলে সাইন ইন করার বা নতুন অ্যাকাউন্ট তৈরি করার জন্য প্রম্পট অনুসরণ করুন এবং তারপর সাইন ইন করুন।

লোড হওয়ার পর, এটি নিচের ছবির মতো দেখতে হবে:

![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.bn.png)

এখানে তিনটি প্রধান অংশ রয়েছে, বাম থেকে ডানে:

1. _অ্যাক্টিভিটি বার_, যেখানে কিছু আইকন রয়েছে, যেমন ম্যাগনিফাইং গ্লাস 🔎, গিয়ার ⚙️, এবং আরও কিছু।
1. অ্যাক্টিভিটি বারটি প্রসারিত হয়ে _এক্সপ্লোরার_ নামে পরিচিত _সাইড বার_।
1. এবং শেষের দিকে, ডানদিকে কোডের এলাকা।

প্রতিটি আইকনে ক্লিক করে বিভিন্ন মেনু প্রদর্শন করুন। কাজ শেষ হলে, _এক্সপ্লোরার_ এ ক্লিক করুন যাতে আপনি আবার শুরুতে ফিরে আসেন।

যখন আপনি কোড তৈরি করা শুরু করবেন বা বিদ্যমান কোড পরিবর্তন করবেন, এটি ডানদিকে সবচেয়ে বড় এলাকাতে ঘটবে। আপনি এই এলাকাটি বিদ্যমান কোড দেখতে ব্যবহার করবেন, যা আপনি পরবর্তী ধাপে করবেন।

## একটি GitHub রিপোজিটরি খুলুন

প্রথমে আপনাকে একটি GitHub রিপোজিটরি খুলতে হবে। রিপোজিটরি খোলার বিভিন্ন উপায় রয়েছে। এই অংশে আপনি দুটি ভিন্ন উপায় দেখতে পাবেন যার মাধ্যমে আপনি রিপোজিটরি খুলে পরিবর্তন করতে পারবেন।

### ১. এডিটরের মাধ্যমে

এডিটর ব্যবহার করে একটি রিমোট রিপোজিটরি খুলুন। যদি আপনি [VSCode.dev](https://vscode.dev) এ যান, আপনি একটি _"Open Remote Repository"_ বোতাম দেখতে পাবেন:

![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.bn.png)

আপনি কমান্ড প্যালেটও ব্যবহার করতে পারেন। কমান্ড প্যালেট হলো একটি ইনপুট বক্স যেখানে আপনি কোনো কমান্ড বা অ্যাকশনের অংশ হিসেবে কোনো শব্দ টাইপ করতে পারেন সঠিক কমান্ডটি খুঁজে বের করার জন্য। মেনুতে যান, তারপর _View_ নির্বাচন করুন, এবং তারপর _Command Palette_ নির্বাচন করুন, অথবা এই কিবোর্ড শর্টকাট ব্যবহার করুন: Ctrl-Shift-P (MacOS এ এটি Command-Shift-P হবে)।

![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.bn.png)

মেনু খোলার পর, _open remote repository_ টাইপ করুন এবং তারপর প্রথম অপশনটি নির্বাচন করুন। আপনি অংশগ্রহণ করা বা সম্প্রতি খোলা রিপোজিটরিগুলোর তালিকা দেখতে পাবেন। আপনি একটি সম্পূর্ণ GitHub URL ব্যবহার করেও একটি রিপোজিটরি নির্বাচন করতে পারেন। নিচের URL টি ব্যবহার করুন এবং বক্সে পেস্ট করুন:

```
https://github.com/microsoft/Web-Dev-For-Beginners
```

✅ সফল হলে, আপনি এই রিপোজিটরির সব ফাইল টেক্সট এডিটরে লোড হতে দেখবেন।

### ২. URL ব্যবহার করে

আপনি সরাসরি একটি URL ব্যবহার করেও রিপোজিটরি লোড করতে পারেন। উদাহরণস্বরূপ, বর্তমান রিপোজিটরির সম্পূর্ণ URL হলো [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), তবে আপনি GitHub ডোমেইনটি `VSCode.dev/github` দিয়ে পরিবর্তন করে সরাসরি রিপোজিটরি লোড করতে পারেন। ফলাফল URL হবে [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners)।

## ফাইল সম্পাদনা করুন

একবার আপনি ব্রাউজারে বা vscode.dev এ রিপোজিটরি খুলে ফেললে, পরবর্তী ধাপ হবে প্রকল্পে আপডেট বা পরিবর্তন করা।

### ১. একটি নতুন ফাইল তৈরি করুন

আপনি বিদ্যমান ফোল্ডারের ভিতরে একটি ফাইল তৈরি করতে পারেন, অথবা মূল ডিরেক্টরি/ফোল্ডারে এটি তৈরি করতে পারেন। একটি নতুন ফাইল তৈরি করতে, সেই অবস্থান/ডিরেক্টরি খুলুন যেখানে আপনি ফাইলটি সংরক্ষণ করতে চান এবং _'New file ...'_ আইকনটি অ্যাক্টিভিটি বারে _(বামে)_ নির্বাচন করুন, একটি নাম দিন এবং এন্টার চাপুন।

![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.bn.png)

### ২. রিপোজিটরিতে একটি ফাইল সম্পাদনা এবং সংরক্ষণ করুন

vscode.dev ব্যবহার করা সুবিধাজনক যখন আপনি আপনার প্রকল্পে দ্রুত আপডেট করতে চান, কোনো সফটওয়্যার লোকালি লোড না করেই। আপনার কোড আপডেট করতে, অ্যাক্টিভিটি বারে থাকা 'Explorer' আইকনে ক্লিক করুন যাতে রিপোজিটরিতে থাকা ফাইল ও ফোল্ডারগুলো দেখতে পারেন। একটি ফাইল নির্বাচন করুন যাতে এটি কোড এলাকায় খুলে যায়, আপনার পরিবর্তনগুলো করুন এবং সংরক্ষণ করুন।

![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.bn.png)

আপনার প্রকল্প আপডেট করা শেষ হলে, _`source control`_ আইকনটি নির্বাচন করুন যেখানে আপনি আপনার রিপোজিটরিতে করা নতুন পরিবর্তনগুলো দেখতে পাবেন।

আপনার প্রকল্পে করা পরিবর্তনগুলো দেখতে, প্রসারিত অ্যাক্টিভিটি বারে `Changes` ফোল্ডারে থাকা ফাইলগুলো নির্বাচন করুন। এটি একটি 'Working Tree' খুলবে যেখানে আপনি ফাইলের পরিবর্তনগুলো ভিজ্যুয়ালি দেখতে পারবেন। লাল রঙ প্রকল্প থেকে কিছু বাদ পড়া নির্দেশ করে, আর সবুজ রঙ যোগ করা নির্দেশ করে।

![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.bn.png)

যদি আপনি আপনার করা পরিবর্তনগুলো নিয়ে সন্তুষ্ট হন, তাহলে `Changes` ফোল্ডারে হোভার করুন এবং পরিবর্তনগুলো স্টেজ করতে `+` বোতামে ক্লিক করুন। স্টেজিং মানে হলো আপনার পরিবর্তনগুলো GitHub এ কমিট করার জন্য প্রস্তুত করা।

যদি আপনি কিছু পরিবর্তন নিয়ে স্বাচ্ছন্দ্যবোধ না করেন এবং সেগুলো বাতিল করতে চান, তাহলে `Changes` ফোল্ডারে হোভার করুন এবং `undo` আইকনটি নির্বাচন করুন।

তারপর একটি `commit message` টাইপ করুন _(আপনার প্রকল্পে করা পরিবর্তনের একটি বিবরণ)_, এবং পরিবর্তনগুলো কমিট ও পুশ করতে `check icon` এ ক্লিক করুন।

আপনার প্রকল্পে কাজ শেষ হলে, উপরের বাম দিকে থাকা `hamburger menu icon` নির্বাচন করুন যাতে github.com এ রিপোজিটরিতে ফিরে যেতে পারেন।

![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev.gif)

## এক্সটেনশন ব্যবহার করা

VSCode এ এক্সটেনশন ইনস্টল করলে আপনি নতুন বৈশিষ্ট্য যোগ করতে পারেন এবং আপনার এডিটরে কাস্টমাইজড ডেভেলপমেন্ট এনভায়রনমেন্ট অপশন যোগ করতে পারেন যা আপনার ডেভেলপমেন্ট ওয়ার্কফ্লো উন্নত করে। এই এক্সটেনশনগুলো আপনাকে একাধিক প্রোগ্রামিং ভাষার জন্য সাপোর্ট যোগ করতে সাহায্য করে এবং সাধারণত জেনেরিক এক্সটেনশন বা ভাষা-ভিত্তিক এক্সটেনশন হয়ে থাকে।

সব উপলব্ধ এক্সটেনশনের তালিকা দেখতে, অ্যাক্টিভিটি বারে _`Extensions icon`_ এ ক্লিক করুন এবং _'Search Extensions in Marketplace'_ লেবেলযুক্ত টেক্সট ফিল্ডে এক্সটেনশনের নাম টাইপ করা শুরু করুন। আপনি এক্সটেনশনের একটি তালিকা দেখতে পাবেন, প্রতিটিতে **এক্সটেনশনের নাম, প্রকাশকের নাম, একটি বাক্য বিবরণ, ডাউনলোড সংখ্যা** এবং **একটি তারকা রেটিং** থাকবে।

![Extension details](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.bn.png)

আপনি পূর্বে ইনস্টল করা সব এক্সটেনশন _`Installed folder`_ এ, অধিকাংশ ডেভেলপারদের ব্যবহৃত জনপ্রিয় এক্সটেনশন _`Popular folder`_ এ এবং আপনার জন্য সুপারিশকৃত এক্সটেনশন _`recommended folder`_ এ দেখতে পারেন, যা একই ওয়ার্কস্পেসে থাকা ব্যবহারকারীদের দ্বারা বা আপনার সম্প্রতি খোলা ফাইলের ভিত্তিতে সুপারিশ করা হয়।

![View extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.bn.png)

### ১. এক্সটেনশন ইনস্টল করুন

একটি এক্সটেনশন ইনস্টল করতে, সার্চ ফিল্ডে এক্সটেনশনের নাম টাইপ করুন এবং এটি প্রসারিত অ্যাক্টিভিটি বারে প্রদর্শিত হলে অতিরিক্ত তথ্য দেখতে ক্লিক করুন। আপনি প্রসারিত অ্যাক্টিভিটি বারে থাকা _নীল ইনস্টল বোতাম_ ব্যবহার করে ইনস্টল করতে পারেন অথবা কোড এলাকায় এক্সটেনশনটি নির্বাচন করলে প্রদর্শিত ইনস্টল বোতাম ব্যবহার করতে পারেন।

![Install extensions](../../../../8-code-editor/images/install-extension.gif)

### ২. এক্সটেনশন কাস্টমাইজ করুন

এক্সটেনশন ইনস্টল করার পর, আপনি এর আচরণ পরিবর্তন করতে এবং আপনার পছন্দ অনুযায়ী কাস্টমাইজ করতে পারেন। এটি করতে, Extensions আইকন নির্বাচন করুন, এবং এবার আপনার এক্সটেনশনটি _Installed folder_ এ প্রদর্শিত হবে। _**Gear icon**_ এ ক্লিক করুন এবং _Extensions Setting_ এ যান।

![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.bn.png)

### ৩. এক্সটেনশন ম্যানেজ করুন

এক্সটেনশন ইনস্টল এবং ব্যবহার করার পর, vscode.dev বিভিন্ন প্রয়োজন অনুযায়ী আপনার এক্সটেনশন ম্যানেজ করার অপশন প্রদান করে। উদাহরণস্বরূপ, আপনি নিম্নলিখিত কাজ করতে পারেন:

- **ডিসেবল:** _(যখন আপনি একটি এক্সটেনশন সাময়িকভাবে ব্যবহার করতে চান না কিন্তু সম্পূর্ণভাবে আনইনস্টল করতে চান না)_

    প্রসারিত অ্যাক্টিভিটি বারে ইনস্টল করা এক্সটেনশন নির্বাচন করুন > Gear আইকনে ক্লিক করুন > 'Disable' বা 'Disable (Workspace)' নির্বাচন করুন **অথবা** কোড এলাকায় এক্সটেনশন খুলুন এবং নীল Disable বোতামে ক্লিক করুন।

- **আনইনস্টল:** প্রসারিত অ্যাক্টিভিটি বারে ইনস্টল করা এক্সটেনশন নির্বাচন করুন > Gear আইকনে ক্লিক করুন > 'Uninstall' নির্বাচন করুন **অথবা** কোড এলাকায় এক্সটেনশন খুলুন এবং নীল Uninstall বোতামে ক্লিক করুন।

---

## অ্যাসাইনমেন্ট

[vscode.dev ব্যবহার করে একটি রিজিউম ওয়েবসাইট তৈরি করুন](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)

## পর্যালোচনা ও স্ব-অধ্যয়ন

[VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) এবং এর অন্যান্য বৈশিষ্ট্য সম্পর্কে আরও পড়ুন।

**অস্বীকৃতি**:  
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়বদ্ধ নই।