VS Code — নিত্য প্রয়োজনীয় কিছু এক্সটেনশন

প্রোগ্রামার, ডেভেলপার বা প্রোগ্রামিং এর ছাত্র হিসেবে দিনের উল্লেখযোগ্য একটা অংশ আমাদের কোড এডিটরে কাটাতে হয়। এক্ষেত্রে একেকজন একেক এডিটর ব্যবহারে স্বাচ্ছন্দ্য বোধ করেন। জনপ্রিয় এডিটর গুলোর মধ্যে রয়েছে সাবলাইম টেক্সট, এটম, ভিএস কোড , ব্রাকেটস ইত্যাদি। এসব এডিটরগুলোর কাজকে আরো স্বাচ্ছন্দ্যময় ও গতিশীল করতে রয়েছে বিভিন্ন ধরণের প্লাগইন বা এক্সটেনশন।

মাইক্রোসফটের ভিএস কোড এডিটরটি ২০১৫ তে উন্মুক্ত করা হলেও খুব দ্রুতই এটি ডেভেলপারদের মধ্যে জনপ্রিয় হয়ে উঠে। আর এই জনপ্রিয়তার ক্ষেত্রে অন্যতম প্রধান আকর্ষণ এর অজস্র এক্সটেনশন। আজকে আমরা কথা বলবো মাইক্রোসফটের ভিএস কোডের কিছু নিত্য ব্যবহার্য এক্সটেনশন নিয়ে।

নিচে আমার ব্যবহৃত কিছু এক্সটেনশন এর সংক্ষিপ্ত পরিচয়(অক্ষরের ক্রমানুসারে) তুলে ধরলাম-

• Auto Rename Tag(Jun Han)

এই এক্সটেনশনটি মূলত ফ্রন্টএন্ড ডেভেলপার দের জন্যে। html পেজের ওপেনিং এবং ক্লোজিং ট্যাগ একই সাথে পরিবর্তনের সুবিধা দেয় এই এক্সটেনশনটি। যেমন ধরুন আপনি হয়তো একটি টেক্সট লিখলেন <h1> <h1/> ট্যাগের ভেতর। পরে মনে হলো এখানে <h3> হলে বেশি ভালো হবে। আলাদাভাবে শুরুর আর শেষের ট্যাগ না পালটে যেকোনো একটি ট্যাগ পরিবর্তন করলে স্বয়ংক্রিয়ভাবে তার জোড়ার ট্যাগটিও পরিবর্তন হয়ে যাবে এই এক্সটেনশনটির মাধ্যমে।

ভিএস কোডের মার্কেটপ্লেসে এক্সটেনশনটি এখানে পাওয়া যাবে।

• Auto-Open Markdown Preview(hnw)

এই এক্সটেনশনটির ব্যবহার তূলনামূলক কম হলেও তা বেশ উপকারী। মার্কডাউন ফরম্যাটের ফাইল, যেমন গিটহাবের রিডমি লেখার সময় আউটপুট কেমন হচ্ছে তা দেখতে পারলে খুবই ভালো হতো। গিটহাবে যদিও একটি প্রিভিও ট্যাব থাকে, তবু লাইভ আউটপুট দেখার জন্যে বা আমাদের এডিটরে থাকা অবস্থায়ই পরিবর্তন দেখার জন্যে এই এক্সটেনশনটি উপকারী।

পাওয়া যাবে এখানে।

• Bracket Pair Colorizer(CoenraadS)

জাভাস্ক্রিপ্ট বা অন্য ল্যাংগুয়েজ যেগুলোতে ব্রাকেটের মাধ্যমে ফাংশন বা কন্ডিশনাল ব্লক আলাদা করা হয়, সেগুলোর ক্ষেত্রে এই এক্সটেনশনটি খুবই উপকারী। অনেক সময় এরকম ব্লকের ভেতরে ব্লক, তার ভেতরে ব্লক থাকলে কোন ব্রাকেট কোন ব্লকের তা খুঁজে বের করতে কষ্ট হয়। কিন্তু এই এক্সটেনশনটির মাধ্যমে ভেতরের প্রতিটি ব্লকের ওপেনিং আর ক্লোজিং ব্র‍্যাকেট ভিন্ন রঙের মাধ্যমে দেখানো হয়। ফলে সহজেই বোঝা যায় কোনো ব্র‍্যাকেটের শুরুর বা শেষের ব্র‍্যাকেট কোনটি।

এক্সটেনশনটি পাওয়া যাবে এখানে ।

• Clock (Angelo Breuer)

সময় দেখার জন্য বারবার ডেস্কটপ স্ক্রিন কিংবা টপবারে না গিয়ে এডিটরের স্ট্যাটাসবারে সময় দেখার জন্য এই এক্সটেনশনটি রাখা যেতে পারে। যদিও আমি খুঁজছিলাম এডিটরের ব্যাকগ্রাউন্ডে ট্রান্সপারেন্ট ওয়ালপেপারের মতোন ক্লকের কোনো এক্সটেনশন আছে কিনা।

মন্দের ভালো হিসেবে এটা পেয়েছি। কেউ অমন পেলে আমাকে জানাবেন অবশ্যই।

এক্সটেনশনটি পাওয়া যাবে এখানে ।

• Django Template(bibhasdn)

যারা জ্যাংগো ব্যবহার করেন, তারা দেখে থাকবেন, টেমপ্লেটে ট্যাগ বা ফিল্টার ব্যবহার করে কোনো কিছু লিখলে আগে পরের html ট্যাগগুলো সুন্দরমতো ফরম্যাট হলেও জ্যাংগোর টেম্পলেট ল্যাংগুয়েজের অংশগুলো ঠিকঠাক ফরম্যাট হয় না। আমি ব্যক্তিগত ভাবে এতে অনেক বিরক্ত বোধ করতাম।

এক্ষেত্রে আমার মুশকিল আসান করার জন্যে এই এক্সটেনশনটি অনেক উপকারে এসেছে। এখন html বা জ্যাংগো ট্যাগ — সবই ফরম্যাট হবে এই এক্সটেনশনটির কল্যানে। তবে এই এক্সটেনশটি intellisense এর সাথে কম্পেটিবল নয় । ফলে এটি একটিভ থাকলে অটোকমপ্লিট ইত্যাদি ফিচারগুলো কাজ করে না। দুঃখজনক ।

পাওয়া যাবে এখানে ।

• GitLense(Eric Amodio)

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

যাই হোক, ভার্সন কন্ট্রোলের ক্ষেত্রে জনপ্রিয় হচ্ছে গিট। যদিও গিট বিল্ট-ইন ভাবে ভিএসকোডে থাকে, তবু আরো সহজ করার জন্যে বিভিন্ন এক্সটেনশন আছে, তার মধ্যে এই এক্সটেনশনটি অন্যতম। গিটের সকল কমান্ড ইউজার ইন্টারফেস বা ক্লিকের মাধ্যমে করা যাবে এর মাধ্যমে। আমি কিন্তু ব্যক্তিগত ভাবে ক্লিকের বদলে কমান্ড লিখে গিটের কাজ করি, এবং সেটাই করা উচিত বলে মনে করি। আমি মূলত যে কারণে এটি ব্যবহার করি, তা হচ্ছে, কোডের যেকোনো লাইনে ক্লিক করলে পাশে ছোট্ট করে লাইনটির লাস্ট চেঞ্জ সম্পর্কে কিছু তথ্য দেখানো হয় ।

যদিও যে পরিমান সুবিধা এক্সটেনশনটি দিচ্ছে, তার তুলনায় খুবই নগন্য এবং কম গুরুত্বপূর্ণ একটি কারণে আমি এক্সটেনশনটি ব্যবহার করি। তবু, ভালো লাগা বলে কথা। এছাড়া বাকি সব ফিচার তো রয়েছেই হাতের নাগালে। আপনারাও ট্রাই করে দেখতে পারেন।

পাওয়া যাবে এখানে ।

• HTML CSS Support(ecmel)

ফ্রন্ডএন্ড এর কাজ করার সময় html এর কোনো ব্লকে css অথবা এর বিভিন্ন লাইব্রেরী ব্যবহারের জন্যে class বা id এট্রিবিউট ব্যবহার করি। এক্ষেত্রে এক্সটেনশনটি সেসব ক্লাস বা আইডির সাজেশনগুলো লিস্ট আকারে দেখায়। অর্থাৎ সিএসএস ফাইল কিংবা বুটস্ট্রাপ, টেইলউইন্ড ইত্যাদির ক্লাসগুলো লিস্ট আকারে দেখাবে। আপনি হাতে লেখার বদলে পছন্দমতো সিলেক্ট করতে পারবেন।

উল্লেখ্য, auto completion এর মাধ্যমে class বা id অংশটুকু লিখলে ব্রাকেটের ভেতরে সাজেশন দেখায় না। এক্ষেত্রে অটো কমপ্লিটের পর কোটেশনগুলো কেটে দিয়ে আবার লিখলে সাজেশন আসে। এক্সটেনশনটির এটা একটা ডাউনসাইড । তবে উপকারের তুলনায় সেটা ইগনোর করা যেতে পারে।

পাওয়া যাবে এখানে ।

• indent-rainbow(oderwat)

পাইথন যারা ব্যবহার করেন, তারা হাড়ে হাড়ে জানেন indentation কী এবং কেন অবশ্যই দরকার। এছাড়া অন্য সকল ল্যাংগুয়েজের ক্ষেত্রেও সুন্দরভাবে কোড ফরম্যাটের জন্যে indentation বা নির্দিষ্ট পরিমাণ স্পেস( বা ট্যাব) ব্যবহার করা হয়। কয়টি ইনডেন্টেশন ব্যবহার হচ্ছে তা ভিজুয়ালি বোঝানোর জন্যে এই এক্সটেনশনটির মাধ্যম্যে প্রতি লেভেল ইনডেন্টেশনকে আলাদা রঙের মাধ্যমে দেখানো হয়।

উজ্জ্বল রঙের বদলে ডিফল্টভাবে খুবই হালকা শেডের রঙ ব্যবহার করা হয়, যা দেখতে সুন্দর। এছাড়া চাইলে নিজের মনমতো কালার যুক্ত করার অপশন তো রয়েছেই এক্সটেনশন এর সেটিংসে।

পাওয়া যাবে এখানে ।

• Live Server(Ritwick Dey)

এই এক্সটেনশনটির পরিচয় হয়তো না দিলেও চলে, তারপরেও বলা। ফ্রন্ডএন্ড ডিজাইনের ক্ষেত্রে html ফাইলে কোনো এলিমেন্ট চেঞ্জ বা যুক্ত করলে, কিংবা সিএসএস যোগ করলে আউটপুটে তা দেখতে কেমন তা দেখার জন্যে ব্রাউজারে পেজটি রিফ্রেশ করতে হয়। কিন্তু এই এক্সটেনশনটির মাধ্যমে কোনো html ফাইল ওপেন করলে তা সরাসরি ওপেন হওয়ার বদলে হোস্ট মেশিনের লোকাল সার্ভার এর পোর্টে রান হয়। এবং এডিটরে প্রতি পরিবর্তন সেভ করার সাথে সাথে পেজটি অটো রিফ্রেশ হয়ে পরিবর্তনটি দেখায়। নিঃসন্দেহে খুবই উপকারী একটি এক্সটেনশন।

পাওয়া যাবে এখানে ।

• REST Client(Huachao Mao)

যারা এপিআই নিয়ে কাজ করেন কিংবা ফ্রন্ডএন্ড ডেভেলপার,তাদের বিভিন্ন সময় এপিআই কল করতে হয়। এছাড়া বাইরের কোনো রিসোর্স থেকে http রিকোয়েস্টের মাধ্যম্যে কনটেন্ট ফেচ করার প্রয়োজন পরে। এক্ষেত্রে এই এক্সটেনশনটি এডিটরের ভেতরেই পোস্টম্যানের মতো রেস্ট ক্লায়েন্ট হিসেবে কাজ করে। এর মাধ্যম্যে এডিটর থেকেই কল করে আউটপুটের রেসপন্স বডি, হেডার ইত্যাদি দেখা যায় ।

আমি এর সাথে সম্প্রতি পরিচিত, সেভাবে ব্যবহার এখনো হয়নি। তবে এক্সটেনশনটি যথেষ্ট উপকারে আসবে বলেই আমার ধারণা।

পাওয়া যাবে এখানে।

• Settings Sync(Shan Khan)

ব্যবহারের সময় এডিটরকে আমরা বিভিন্ন এক্সটেনশন বা সেটিংসে আমাদের পছন্দমাফিক পরিবর্তন করে সাজাই। কিন্তু যদি কখনো হোস্ট মেশিন চেঞ্জ করি, বা অপারেটিং সিস্টেম ইন্সটল দিতে হয়, তখন অন্য সব সফটওয়্যারের মতো এডিটরটিও একেবারে নতুন করে শুরু করতে হয়। সেটিংস আর এক্সটেনশনগুলোও খুঁজে খুঁজে ঠিকঠাক করতে হয়। যা কিছুটা সময়সাপেক্ষ এবং বোরিংও বটে।

এই সমস্যা থেকে বাঁচানোর জন্যে রয়েছে এই এক্সটেনশনটি। এর মাধ্যমে ব্যবহারকারীর এডিডরের ডিপেন্ডেন্সি, তথা ব্যবহৃত এক্সটেনশন এবং সেটিংগুলো জেসন ফরম্যাটে আপনার গিটহাবের প্রাইভেট একটি gist এ সেভ করার সুযোগ। পরবর্তীতে প্রয়োজনে এই এক্সটেনশনটির মাধ্যমে গিটহাবের সেই gist ব্যবহার করে সহজেই আগের এক্সটেনশন আর সেটিংসগুলো ইন্সটল করা যায়। অনেকটা package.json কিংবা requirements.txt এর মতোন।

পাওয়া যাবে এখানে।

• Statusbar error(Joe Berria)

যদিও ভিএসকোডে টার্মিনাল বারে আলাদা ট্যাবের মাধ্যমে এরর মেসেজ দেখানো হয়। তবে কেউ সরাসরি স্ট্যাটাসবারে এরর মেসেজ দেখতে চাইলে এই এক্সটেনশনটি ব্যবহার করতে পারেন।

পাওয়া যাবে এখানে।

• WakaTime(WakaTime)

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

দৈনিক এডিটরে আমরা কত সময় কাটাচ্ছি, কোন সময়, কোন ল্যাংগুয়েজ কত সময় এবং শতকরা কত ভাগ সময় ব্যবহার করেছি ইত্যাদি বিস্তারিত তথ্য ড্যাশবোর্ড আকারে দেখা যায় wakatime এর ওয়েবসাইটে। ডেইলি গোল, সময়ভিত্তিক বৈশ্বিক লিডারবোর্ড ইত্যাদি সুন্দর সুন্দর সুবিধা আছে সাইটটিতে। তাদের এই এক্সটেনশনটি ব্যবহারের মাধ্যমে এডিটরের এসকল তথ্যগুলো দেখতে পারবেন wakatime এ আপনার একাউন্টে। লক্ষ্য ঠিক করা, লক্ষ্য পুরণ সহ সেল্ফ ডেভেলপমেন্ট এর ক্ষেত্রে এই এক্সটেনশনটি কাজে আসতে পারে।

পাওয়া যাবে এখানে।

লিস্ট অনেক লম্বা হয়ে গেছে। আজকের মতো এ পর্যন্তই। আপনারাও চাইলে জানাতে পারেন আপনাদের পছন্দের এক্সটেনশনটি। আমার লেখা ভালো লাগলে পড়তে পারেন অন্য আর্টিকেলগুলো। পছন্দের কোনো বিষয়ে লেখা দেখতে চাইলে জানাতে পারেন সেটিও। এছাড়া লেখা সম্পর্কে যেকোনো মন্তব্য-পরামর্শ সর্বদা স্বাগত ।

ধন্যবাদ।