ZMT3 API

Tag: VSCode

  • Web devs, Use alias

    একটা Meme আছে, “আপনারা যারা chattogram / chittagong না লিখে ctg লেখেন, তারা বেঁচে যাওয়া সময়টায় কী করেন?”

    এই প্রশ্নের উত্তর যাই হোক, আমি কয়েক সেকেন্ড করে সময় বাঁচানোর আরেকটা উপায় বলি।

    ১। bash terminal / vscode এর টার্মিনালে সময় বাঁচানো

    উইন্ডোজের C:\Program Files\Git\etc\ এ যান, সেখানে bash.bashrc নামের ফাইল থাকবে। অথবা everything সফটওয়্যারে bash.bashrc লিখে সার্চ দিন।

    তারপর ফাইলের শুরুতেই নিচের লাইনগুলো অ্যাড করে দিন, তাহলে VSCode / Cursor এ npm run dev লেখা লাগবে না, nrd লিখলেই হবে। (nerd, haha) এভাবে বাকিগুলোও…

    alias nrd=’npm run dev’

    alias nrs=’npm start’

    alias nrb=’npm run build’

    alias nrp=’npm run preview’

    ২। গিট ব্যবহারে সময় বাঁচানো

    টার্মিনালে নিচের কমান্ডগুলো লিখলেই হবে।

    git config –global alias.co “checkout”

    git config –global alias.br “branch”

    git config –global alias.cm “commit”

    git config –global alias.st “status”

    তাহলেই git status না লিখে git st লিখলেই হবে।

    git commit -m “initial commit” না লিখে

    git cm -m “initial commit” লিখলেই হবে।

    বিঃদ্রঃ আমি যেই aliasগুলো লিখেছি- তাই যে ব্যবহার করতে হবে, তা না। চাইলে alias এর অক্ষরগুলো নিচের ইচ্ছামতো পরিবর্তন করতে পারেন।

  • Bytes Newsletter Theme

    Bytes Newsletter Theme

    bytes (.dev) নিউজলেটারটি আমি কয়েক মাস যাবত পড়ছি। ঐ নিউজলেটারের শেষের দিকে কিছু কোড সম্পর্কিত কুইজ থাকে, উত্তর আরো নিচে দেয়া থাকে। সেই কোডের রঙ ভাল লেগেছিল।

    ইমেইল করে জিজ্ঞেস করেছিলাম, আপনাদের কোনো থিম আছে কিনা?

    উত্তর দিয়েছে- It’s a custom theme.

    থিম বানিয়ে পাবলিশ করতে বললে রিপ্লাই দিয়েছে- Eventually. Not a ton of time right now but we plan on doing it in the future.

    আমি আজ ৫-৭ ঘন্টা খরচ করে শিখলাম ও বানালাম। আমি জানি, প্রচুর অসম্পূর্ণতা আছে, এখন শুধু html-css-js-jsx সাপোর্ট করে। কিন্তু যাই হোক, প্রথম একটা কাজ করতে পেরে ভাল লাগলো।

    শুধুমাত্র html-css-js-jsx কোডের জন্য ইচ্ছা হলে এমনেই একটু দেখতে পারেন https://marketplace.visualstudio.com/items?itemName=ZubairIbnZamir.bytes-newsletter-theme

    আমি রেকমেন্ড করবো Colorized+ ভার্সনটা ব্যবহার করতে। কারণ মূল থিম ছাই রঙ অনেক বেশি। Colorized+ থিমে আমি ছাই কমিয়ে দিয়েছি।

    আর bytes.dev নিউজলেটারটা পড়তে পারেন, আশা করি বেশ উপকৃত হবেন।

  • VS Code Pro Tips

    VS Code Pro Tips

    ১। workspaceFolder

    VS Code এর ডিফল্ট সেটিং থাকা অবস্থায় আমরা যখন টার্মিনাল খুলি, তখন ডিফল্ট ডিরেক্টরিতে টার্মিনাল চালু হয় (যেমন C:\Users\YourName , তারপর বারবার cd .. / cd omuk cd tomuk লিখে সময় নষ্ট করতে হয় কাঙ্ক্ষিত ফোল্ডারে যেতে।

    আমি গত ৮+ মাস এভাবেই করেছি, পরে বিরক্ত হয়ে গুগল সার্চ করে জেনেছি যে- settings এ গিয়ে (শর্টকাট ctrl + , ) cwd সার্চ করে নিচের দেখানো সেটিং এ ${workspaceFolder} লিখে দিলে ওয়ার্কস্পেস ফোল্ডারই টার্মিনালে এসে থাকবে।

    Terminal › Integrated: Cwd

    An explicit start path where the terminal will be launched, this is used as the current working directory (cwd) for the shell process. This may be particularly useful in workspace settings if the root directory is not a convenient cwd.

    ২। Ligatures

    আমি জানতাম না যে !== / => এগুলো পালটায় কীভাবে। যেহেতু এই পরিবর্তনের নামই জানতাম না (ligatures) , তাই সার্চও করা কঠিন ছিল।

    উইন্ডোজে Consolas, ‘Courier New’, monospace ভিএসকোডের ডিফল্ট ফন্ট দেয়া থাকে। এগুলোতেও Ligature আছে। আপনাকে fira code নামাতে হবে না। (চাইলে নামাতে পারেন, তবে বাধ্যতামূলক না, সেটাই বলছি) তারপর সেটিংসে ligatures সার্চ করে edit json এ গিয়ে “editor.fontLigatures”: true করে দেবেন, ডিফল্টে false থাকে। ব্যস, হয়ে গেল।

    ভিডিও টিউটোরিয়াল

    ৩। লাইন নম্বর হাইড করা

    আপনি যদি সেটিংস থেকে লাইন নম্বর হাইড করেন, নম্বর হাইড হলেও সেই জায়গাটা ব্লক হয়েই থাকবে। আপনার কাজে আসবে না। সেই জায়গাটা কাজে লাগাতে চাইলে প্রথমে System Cycler ডাউনলোড করতে হবে। তারপর নিচের দু’টি JSON ফাইল এডিট করতে হবে। ctrl + shift + P টিপে Perferences: Open User Settings (JSON) এবং Perferences: Open Keyboards Shortcuts (JSON) ওপেন করে নিচের কোডগুলো যোগ করতে হবে।

    settings.json:

    “settings.cycle”: [{ “id”: “lineNumbers”, “values”:[ { “editor.lineNumbers”: “off”, “editor.folding”: false, “editor.glyphMargin”: false }, { “editor.lineNumbers”: “on”, “editor.folding”: true, “editor.glyphMargin”: true } ] }],

    keybindings.json:

    // Place your key bindings in this file to override the defaultsauto[]

    [ { “key”: “ctrl+shift+l”, “command”: “settings.cycle.lineNumbers”, “when”: “editorFocus” } ]

    ctrl+shift+l সেট না করে অন্য কিছুও সেট করতে পারেন।

    ভিডিও টিউটোরিয়াল

    ৪। টার্মিনাল ফুলস্ক্রিন করার শর্টকাট

    ctrl + ` বর্তমান/সর্বশেষ টার্মিনাল শো / হাইড

    ctrl + shfit + ` নতুন টার্মিনাল খোলা

    এ দুটি ডিফল্টেই থাকে।

    আর আপনি যদি চান যে, টার্মিনাল ফুলস্ক্রিনে দেখবেন, আবার কোডে ফিরে যাবেন তাহলে ctrl + k ctrl + s টিপে toggle maximized panel সার্চ করে ctrl + alt + ` সেট করে নিতে পারেন।

    gatsby / vite ব্যবহার সহ বিভিন্ন সময়ে কাজে লাগে।