কোন ঝামেলা নেই ভিজ্যুয়াল কোড থিমিং: একটি এক্সটেনশন css-ট্রিকস প্রকাশ করা

কোন ঝামেলা নেই ভিজ্যুয়াল কোড থিমিং: একটি এক্সটেনশন css-ট্রিকস প্রকাশ করা


আপনার থিম তৈরি করা মজার অংশ। আপনি সম্পন্ন করার পরে, পরবর্তী ধাপ হল আপনার থিম প্রকাশ করা যাতে আপনি – এবং অন্যরা – আপনার সৃষ্টি উপভোগ করতে পারেন!

আপনি মনে করবেন যে একটি ভিএস কোড এক্সটেনশন প্রকাশ করা একটি সহজ প্রক্রিয়া হবে, কিন্তু তা নয়। (সম্ভবত আমি এনপিএম প্যাকেজগুলি সহজেই প্রকাশ করতে অভ্যস্ত এবং রেজিস্ট্রিগুলিকে মঞ্জুর করতে পারি।)

যাইহোক, আপনাকে আপনার থিম দুটি জায়গায় প্রকাশ করতে হবে:

  1. ভিএস কোড ব্যবহারকারীদের জন্য ভিজ্যুয়াল স্টুডিও মার্কেটপ্লেস
  2. অন্যান্য পাঠ্য সম্পাদকের জন্য VSX খুলুন

আপনি npm-এ প্রকাশ করতে চাইতে পারেন যাতে অন্যরা সহজেই আপনার থিমটি অন্যান্য প্রসঙ্গে ব্যবহার করতে পারে – যেমন শিকির মাধ্যমে সিনট্যাক্স হাইলাইট করা।

আপনার থিম প্রস্তুত করা হচ্ছে

আপনি যখন আপনার থিমের নাম দেন, তখন আপনি এটিকে এই ধরনের সুযোগে রাখতে পারবেন না @scope/theme-name. এটি করা আপনাকে VSX খুলতে প্রকাশ করা থেকে বাধা দেবে।

সুতরাং, নিশ্চিত করুন যে আপনার থিমের নামটি আনস্কোপ করা হয়েছে। (দি theme শব্দটি ঐচ্ছিক):

{
  "name": "twilight-cosmos-theme",
}

আপনার থিমের জন্য একটি আইকন অন্তর্ভুক্ত করতে, আপনার একটি প্রয়োজন হবে৷ 128px বর্গাকার চিত্র ফাইল যা আপনার প্রকল্পের মধ্যে অ্যাক্সেসযোগ্য হতে পারে। এটা নিচে রাখুন icon ফাইলের দিকে নির্দেশ করার জন্য সম্পত্তি:

{
  "icon": "path/to/icon.png",
}

এর পরে, আপনি নিশ্চিত করতে চাইবেন যে আপনার কাছে আছে contributes আপনার ভিতরের চাবিকাঠি package.json ফাইল ভিএস কোড এবং অন্যান্য টেক্সট এডিটররা থিম খুঁজে পেতে এটি অনুসন্ধান করে।

{
  "contributes": {
    "themes": [
      {
        "label": "",
        "uiTheme": "vs-dark",
        "path": "./.json"
      }
    ]
  },
}

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

আপনার যদি এতে সমস্যা হয়, তাহলে AI কে আপনার থিম ফাইল দিন এবং এটিকে আপনার জন্য কীওয়ার্ড তৈরি করতে বলুন 😉

{
  "keywords": [
    "theme",
    "dark theme",
    "twilight",
    "cosmos",
    "color-theme",
    "dark",
    "purple",
    "blue",
    "vscode-theme"
  ],
}

ভিজ্যুয়াল স্টুডিও মার্কেটপ্লেসে প্রকাশনা

Microsoft আপনাকে ভিজ্যুয়াল স্টুডিও মার্কেটপ্লেসে প্রকাশ করতে দেয় vsce আপনার যদি Azure DevOps অ্যাকাউন্ট থেকে ব্যক্তিগত অ্যাক্সেস টোকেন থাকে।

দুর্ভাগ্যবশত, এই নিবন্ধটি তৈরি করার সময়, আমি আমার Azure Devops অ্যাকাউন্ট সেট আপ করার সময় বেশ কয়েকটি সমস্যার সম্মুখীন হয়েছিলাম, তাই আমাকে ম্যানুয়াল রুটের মাধ্যমে আমার এক্সটেনশন প্রকাশ করতে হয়েছিল।

আমি এখানে উভয় রুট সম্পর্কে কথা বলব।

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

তারপর নিম্নলিখিতগুলি করুন:

  • ক্লিক করুন এক্সটেনশন প্রকাশ করুন.
  • একটি প্রকাশক অ্যাকাউন্ট তৈরি করুন।

উভয় মাধ্যমে প্রকাশের জন্য এই পদক্ষেপটি প্রয়োজন vsce এবং ম্যানুয়াল রুট।

VSCE এর মাধ্যমে প্রকাশ করা হচ্ছে

এটি কাজ করার জন্য, আপনার একটি Azure DevOps অ্যাকাউন্ট প্রয়োজন। আপনার কাছে এটি থাকলে, আপনি এই পদক্ষেপগুলি সহ একটি ব্যক্তিগত অ্যাক্সেস টোকেন তৈরি করতে পারেন।

দ্রষ্টব্য: এটি কিছুটা বিরক্তিকর যে আপনি Azure DevOps-এর সাথে আজীবন অ্যাক্সেস টোকেন পেতে পারবেন না। সর্বাধিক মেয়াদ প্রায় এক বছর পরে ঘটে।

এছাড়াও মনে রাখবেন: আমার Azure DevOps অ্যাকাউন্ট তৈরি করার সময় আমার খুব সমস্যা হয়েছিল – শেষ অংশটি ঝুলে ছিল এবং আমি URL টি কপি-পেস্ট করলেও আমি সঠিক পৃষ্ঠায় যেতে পারিনি! যাইহোক, যদি আপনার সাথে এটি ঘটে থাকে তবে আতঙ্কিত হবেন না। আবার চেষ্টা করার আগে আপনাকে 1-2 দিন অপেক্ষা করতে হতে পারে। অবশেষে এটি কাজ করবে।

একবার আপনার ব্যক্তিগত অ্যাক্সেস টোকেন হয়ে গেলে, বাকি পদক্ষেপগুলি বেশ সহজবোধ্য।

প্রথমে, আপনার প্রকাশক আইডি দিয়ে VSCE-তে লগইন করুন যা আপনি ভিজ্যুয়াল স্টুডিও মার্কেটপ্লেসে তৈরি করেছেন। (প্রকাশক আইডি লিখুন, ব্যবহারকারী আইডি নয়!)

npx vsce login 

যখন এটি আপনাকে অ্যাক্সেস টোকেন প্রবেশ করতে বলে। তারপরে, বাজারে প্রকাশ করার জন্য পরবর্তী কমান্ডটি চালান:

npx vsce publish

এবং আপনি সম্পন্ন!

ম্যানুয়ালি প্রকাশ করা

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

  • ক্লিক করুন এক্সটেনশন প্রকাশ করুন.
  • ক্লিক করুন নতুন সম্প্রসারণ.
  • ব্যবহার করুন vsce package আপনার এক্সটেনশন প্যাকেজ অর্ডার visx ফাইল
  • প্যাকেজ টানুন এবং ড্রপ visx আপনার এক্সটেনশন আপলোড করার জন্য ফাইল.
কোন ঝামেলা নেই ভিজ্যুয়াল কোড থিমিং: একটি এক্সটেনশন css-ট্রিকস প্রকাশ করা

এটাই!

ভিজ্যুয়াল স্টুডিও কোড যাচাই করা হচ্ছে

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

VSX খুলতে প্রকাশ করা হচ্ছে

ক্লাউডকে ধন্যবাদ, আমি বুঝতে পেরেছি যে ভিএস কোড ভিজ্যুয়াল স্টুডিও মার্কেটপ্লেস ব্যবহার করে, কিন্তু অন্যান্য পাঠ্য সম্পাদক, যেমন কার্সার, ওপেন ভিএসএক্স ব্যবহার করে।

ওপেন VSX-এ প্রকাশ করা একটু বেশি জটিল। আপনাকে অবশ্যই:

  • GitHub এর মাধ্যমে VSX খুলতে লগইন করুন।
  • Eclipse Foundation অ্যাকাউন্ট তৈরি করুন
  • আপনার Eclipse Foundation অ্যাকাউন্টের সাথে আপনার GitHub সংগ্রহস্থল লিঙ্ক করুন।
  • তাদের চুক্তি স্বাক্ষর করুন।
  • একটি প্রকাশকের নামস্থান তৈরি করুন এবং এটি হিসাবে যুক্ত করুন৷ publisher আপনার মধ্যে package.json ফাইল
  • একটি অ্যাক্সেস টোকেন তৈরি করুন।
  • তারপর, অবশেষে, চালান npx ovsx publish আপনার প্যাকেজ প্রকাশ করতে.

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

প্রকাশকের নামস্থান দাবি করা

এটি মূলত OpenVSX-এর সাথে “যাচাই করা” হচ্ছে, কিন্তু OpenVSX এটিকে যাচাই করার জন্য প্রকাশকের নামস্থানের “দাবি” বলে। ভাষা সম্পর্কে খুব বেশি চাপ না দিয়ে – এই প্রক্রিয়াটি কিছুটা ঘোরাঘুরি করে তবে এখনই করা যেতে পারে (ছয় মাস পরে নয়)।

একবার আপনি একটি প্রকাশকের নামস্থান তৈরি করলে, আপনি একটি পরিষ্কার সতর্কতা প্রম্পট দেখতে পাবেন:

উজ্জ্বল কমলা সতর্কীকরণ ব্যানার বলছে এই নামস্থান যাচাই করা হয়নি। নেমস্পেস দাবি করার বিষয়ে জানতে ডকুমেন্টেশন দেখুন।

একটি প্রকাশক নামস্থান দাবি করতে, আপনাকে Eclipse Foundation এর সাথে একটি GitHub সমস্যা তৈরি করতে হবে এবং নির্দেশ করতে হবে যে আপনি নামস্থান দাবি করতে চান।

সেই ইস্যুতে:

  • আপনার GitHub সংগ্রহস্থল অন্তর্ভুক্ত করুন (যদি আপনি এটি সর্বজনীনভাবে উপলব্ধ করেন)।
  • আপনার GitHub সংগ্রহস্থলে অস্থায়ী অ্যাক্সেস দেওয়ার প্রস্তাব করুন (যদি এটি ব্যক্তিগত হয়)।

আর বাকিটা কেউ দেখভাল করবে।

Eclipse ফাউন্ডেশন টিম বেশ প্রতিক্রিয়াশীল বলে মনে হচ্ছে, তাই আমি এখানে যোগাযোগ বিচ্ছেদের বিষয়ে চিন্তা করব না।

আপনার থিম জন্য ছবি অন্তর্ভুক্ত

আপনার বিষয় প্রদর্শন করার জন্য ছবিগুলি অন্তর্ভুক্ত করা অর্থপূর্ণ। Readme.md ফাইল এটি করার ফলে ব্যবহারকারীরা এটি ডাউনলোড করতে চান কিনা তা সিদ্ধান্ত নেওয়ার আগে আপনার থিমের রঙগুলি বুঝতে পারবেন৷

দুর্ভাগ্যবশত, VS মার্কেটপ্লেস এবং Open VSX উভয়ই আপনাকে আপেক্ষিক URL ব্যবহার করার অনুমতি দেয় না – আপনি যদি আপনার সংগ্রহস্থল থেকে আপেক্ষিক লিঙ্কগুলি ব্যবহার করেন তবে ছবিগুলি ভেঙে যাবে – তাই আপনাকে পরিবর্তে একটি পরম URL এর সাথে লিঙ্ক করতে হবে৷

লিঙ্ক করার সেরা জায়গা হল GitHub সংগ্রহস্থল, যতক্ষণ না এটি সর্বজনীন অ্যাক্সেসের জন্য সেট করা থাকে।

URLটি এরকম কিছু হবে:

![Alt Text](https://raw.githubusercontent.com///master/)

আপ মোড়ানো

আপনার প্রথম ভিএস কোড এডিটর থিম প্রকাশ করা কঠিন হতে পারে। কিন্তু সেই প্রক্রিয়াটিকে আপনাকে – এবং অন্যদের – আপনার থিম উপভোগ করা থেকে আটকাতে দেবেন না!

আপনি যদি ভাবছেন, আমার প্রথম থিমটিকে বলা হয় গোধূলি কসমস। আপনি আমার পূর্ববর্তী নিবন্ধে উত্পাদন প্রক্রিয়া সম্পর্কে আরও তথ্য পেতে পারেন।

(কিছুটা হতাশাজনক) প্রক্রিয়া উপভোগ করুন! আপনি এটি জানতে আগে আপনি এটি শেষ হবে.

Leave a Reply

Your email address will not be published. Required fields are marked *