Question 1

Prettier Config Generator কী?

Accepted Answer

Prettier Config Generator হলো একটি ফ্রি, ইন্টারঅ্যাকটিভ ওয়েব টুল যা আপনাকে ভিজ্যুয়ালি প্রতিটি Prettier অপশন কনফিগার করতে এবং ফলাফলস্বরূপ .prettierrc ফাইল তাৎক্ষণিকভাবে কপি করতে দেয়। কোনো ম্যানুয়াল এডিটিং প্রয়োজন নেই।

Question 2

Prettier কী এবং আমি কেন এটি ব্যবহার করব?

Accepted Answer

Prettier হলো একটি অপিনিয়নেটেড কোড ফরম্যাটার যা আপনার কোডবেসে একটি সামঞ্জস্যপূর্ণ স্টাইল প্রয়োগ করে। এটি সমস্ত মূল স্টাইল সরিয়ে ফেলে এবং অভিন্ন ফরম্যাটে আপনার কোড পুনরায় প্রিন্ট করে, কোড রিভিউতে স্টাইল নিয়ে বিতর্ক দূর করে।

Question 3

.prettierrc ফাইল কী?

Accepted Answer

.prettierrc হলো একটি কনফিগারেশন ফাইল যা আপনার প্রজেক্টের রুটে রাখা হয় এবং Prettier-কে বলে কীভাবে আপনার কোড ফরম্যাট করতে হবে। এটি ইনডেন্টেশন, কোট স্টাইল এবং লাইন উইথের মতো অপশন নিয়ন্ত্রণ করে।

Question 4

আমার কনফিগ তৈরি করতে এই টুলটি কীভাবে ব্যবহার করব?

Accepted Answer

মেইন পেজে আপনার পছন্দের Prettier অপশনগুলো নির্বাচন করুন। আপনার কনফিগারেশন সাইডবারে রিয়েল-টাইমে আপডেট হয়। JSON ক্লিপবোর্ডে কপি করতে "Copy Config"-এ ক্লিক করুন, তারপর এটি আপনার প্রজেক্টের রুটে একটি .prettierrc ফাইলে পেস্ট করুন।

Question 5

Prettier Config Generator কি ফ্রি?

Accepted Answer

হ্যাঁ, সম্পূর্ণ ফ্রি। কোনো সাইনআপ নেই, কোনো অ্যাকাউন্ট প্রয়োজন নেই এবং কোনো ব্যবহারের সীমা নেই। টুলটি GitHub-এ ওপেন সোর্সও বটে।

Question 6

এই টুলটি কি সমস্ত Prettier অপশন কভার করে?

Accepted Answer

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

Question 7

তৈরি করা কনফিগ কীভাবে কপি ও ব্যবহার করব?

Accepted Answer

ডেস্কটপে সাইডবারে "Copy Config" বোতামে ক্লিক করুন, অথবা মোবাইলে ফ্লোটিং অ্যাকশন বোতামে ট্যাপ করুন। কপি করা JSON কন্টেন্ট আপনার প্রজেক্ট ডিরেক্টরির রুটে .prettierrc নামের একটি নতুন ফাইলে পেস্ট করুন।

Question 8

.prettierrc, prettier.config.js এবং package.json-এর prettier কী-এর মধ্যে পার্থক্য কী?

Accepted Answer

তিনটিই Prettier কনফিগার করার বৈধ পদ্ধতি। .prettierrc JSON বা YAML সাপোর্ট করে। prettier.config.js একটি JavaScript মডিউল এবং ডাইনামিক কনফিগারেশনের সুযোগ দেয়। package.json-এর prettier কী সবকিছু এক ফাইলে রাখে। কার্যকারিতা অভিন্ন — এটি পছন্দের বিষয়।

Question 9

Prettier কি TypeScript, React এবং Vue-এর সাথে কাজ করে?

Accepted Answer

হ্যাঁ। Prettier-এ TypeScript, JSX/TSX (React), Vue সিঙ্গেল-ফাইল কম্পোনেন্ট এবং আরও অনেক ফরম্যাটের জন্য বিল্ট-ইন সাপোর্ট রয়েছে। কিছু ফ্রেমওয়ার্কের জন্য আপনাকে অতিরিক্ত প্লাগইন ইনস্টল করতে হতে পারে।

Question 10

VS Code-এর সাথে Prettier কীভাবে ইন্টিগ্রেট করব?

Accepted Answer

VS Code মার্কেটপ্লেস থেকে "Prettier - Code formatter" এক্সটেনশন ইনস্টল করুন। তারপর আপনার VS Code সেটিংসে "editor.defaultFormatter": "esbenp.prettier-vscode" এবং "editor.formatOnSave": true যোগ করুন।

Question 11

আমার পুরো প্রজেক্টে Prettier কীভাবে রান করব?

Accepted Answer

আপনার প্রজেক্ট রুটে npx prettier --write . রান করুন। এটি সমস্ত সাপোর্টেড ফাইল ফরম্যাট করে। আপনার টিমে সামঞ্জস্যপূর্ণ ফলাফলের জন্য npm install --save-dev prettier দিয়ে prettier-কে ডেভ ডিপেন্ডেন্সি হিসেবে যোগ করুন।

Question 12

Prettier কোন কোন ভাষা এবং ফাইল টাইপ সাপোর্ট করে?

Accepted Answer

Prettier JavaScript, TypeScript, JSX, TSX, CSS, SCSS, Less, HTML, Vue, Angular, JSON, YAML, Markdown এবং আরও অনেক কিছু সাপোর্ট করে। অতিরিক্ত ভাষার জন্য এটি প্লাগইন দিয়ে এক্সটেন্ড করা যায়।

Question 13

Prettier ফরম্যাটিং থেকে ফাইল কীভাবে ইগনোর করব?

Accepted Answer

আপনার প্রজেক্টের রুটে .prettierignore ফাইল তৈরি করুন, .gitignore-এর মতো একই সিনট্যাক্স ব্যবহার করে। সেখানে তালিকাভুক্ত ফাইল ও ডিরেক্টরি Prettier দ্বারা স্কিপ করা হবে।

Question 14

আমি কি Prettier এবং ESLint একসাথে ব্যবহার করতে পারি?

Accepted Answer

হ্যাঁ। Prettier-এর সাথে কনফ্লিক্টিং ESLint ফরম্যাটিং নিয়ম নিষ্ক্রিয় করতে eslint-config-prettier ইনস্টল করুন। ফরম্যাটিংয়ের জন্য Prettier এবং কোড কোয়ালিটি নিয়মের জন্য ESLint রান করুন — তারা একে অপরের সম্পূরক হিসেবে নিখুঁতভাবে কাজ করে।

Question 15

printWidth অপশনটি কী করে?

Accepted Answer

printWidth Prettier-কে জানায় কোডকে কত লাইন লেংথের মধ্যে ফিট করার চেষ্টা করতে হবে। এটি ডিফল্ট ৮০। এটি একটি সফট টার্গেট — যদি লাইন ভাঙা কোডকে কম পঠনযোগ্য করে, Prettier এটি অতিক্রম করবে।

Question 16

singleQuote এবং jsxSingleQuote-এর মধ্যে পার্থক্য কী?

Accepted Answer

singleQuote নিয়ন্ত্রণ করে Prettier JavaScript/TypeScript স্ট্রিংয়ে সিঙ্গেল কোট ব্যবহার করবে কিনা। jsxSingleQuote বিশেষভাবে JSX অ্যাট্রিবিউট স্ট্রিং নিয়ন্ত্রণ করে। আপনি সেগুলো স্বাধীনভাবে সেট করতে পারেন।

Question 17

এই সাইটে সার্চ ফিচার কীভাবে ব্যবহার করব?

Accepted Answer

নাম, বর্ণনা বা কীওয়ার্ড দিয়ে Prettier অপশন ফিল্টার করতে পেজের শীর্ষে থাকা সার্চ বার ব্যবহার করুন। আপনি টাইপ করার সাথে সাথে ফলাফল তাৎক্ষণিক আপডেট হয়।

Question 18

এই সাইটটি কি ডার্ক মোড সাপোর্ট করে?

Accepted Answer

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

Question 19

ডিফল্ট Prettier কনফিগারেশন কী?

Accepted Answer

Prettier ডিফল্টগুলো অন্তর্ভুক্ত: printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: false, trailingComma: "all", bracketSpacing: true এবং arrowParens: "always"।

Question 20

আমি কীভাবে বাগ রিপোর্ট করব বা এই প্রজেক্টে কন্ট্রিবিউট করব?

Accepted Answer

GitHub রিপোজিটরিতে একটি issue বা pull request খুলুন। প্রজেক্টটি নতুন ফিচার, বাগ ফিক্স এবং অনুবাদ উন্নতিসহ সব ধরনের কন্ট্রিবিউশনকে স্বাগত জানায়।

Question 21

এই টুলটি কোন কোন Prettier সংস্করণ সাপোর্ট করে?

Accepted Answer

আপনি ভার্সন ড্রপডাউন থেকে যেকোনো Prettier 3.x রিলিজ বাছাই করতে পারেন — 3.0 থেকে 3.6 এবং "latest"। নির্বাচিত সংস্করণের বান্ডল jsDelivr থেকে অন-ডিমান্ড লোড হয়, তাই অপশন লিস্ট সবসময় সেই রিলিজের প্রকৃত স্কিমার সাথে মেলে।

Question 22

Your Code ট্যাবে আমি কোন কোন ভাষা ফরম্যাট করতে পারি?

Accepted Answer

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, Angular টেমপ্লেট, JSON, JSON5, কমেন্টসহ JSON, Markdown, MDX, YAML এবং GraphQL। parser ইনপুট থেকে স্বয়ংক্রিয়ভাবে শনাক্ত হয়, তবে আপনি ড্রপডাউন দিয়ে এটি ওভাররাইড করতে পারেন।

Question 23

শেয়ারযোগ্য URL কীভাবে কাজ করে?

Accepted Answer

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

Question 24

diff-এর পাশে টোকেন কাউন্ট মানে কী?

Accepted Answer

এটি দেখায় নির্বাচিত মডেলের অধীনে আপনার ইনপুট ও আউটপুট কত AI টোকেন খরচ করবে। GPT-4o / GPT-4 / GPT-3.5 সঠিক কাউন্টের জন্য অফিসিয়াল BPE টোকেনাইজার ব্যবহার করে; Claude, Gemini, Llama এবং Mistral "~" উপসর্গযুক্ত ক্যারেক্টার-ভিত্তিক আনুমানিক হিসাব ব্যবহার করে।

Question 25

পেজ রিফ্রেশের পরও কি আমার কাজ থাকবে?

Accepted Answer

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

Question 26

ফরম্যাট এরর স্ট্রিপ কেন কখনো কখনো দেখা যায়?

Accepted Answer

যখন Prettier-এর parser আপনার ইনপুট পার্স করতে পারে না — সাধারণত কারণ নির্বাচিত parser কোডের সাথে মেলে না (যেমন CSS বাছাই করেছেন কিন্তু JSX পেস্ট করেছেন) — এরর মেসেজ diff-এর উপরে একটি লাল স্ট্রিপে দেখা যায়। আপনার কোডের সাথে মেলাতে parser স্যুইচ করুন এবং এরর পরিষ্কার হবে।

Question 27

আমি কি JavaScript ছাড়া অন্য ভাষাগুলির বিপরীতে আমার কনফিগ প্রিভিউ করতে পারি?

Accepted Answer

হ্যাঁ। Preview ট্যাবের diff টগলের পাশে নিজস্ব parser ড্রপডাউন রয়েছে এবং প্রতিটি parser-এর সাথে উদ্দেশ্য-নির্মিত একটি স্যাম্পল রয়েছে — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL এবং TypeScript / JS। parser পরিবর্তন করলে আপনার বর্তমান অপশনের অধীনে মিলে যাওয়া স্যাম্পল পুনরায় ফরম্যাট হয়, ফলে proseWrap, htmlWhitespaceSensitivity এবং vueIndentScriptAndStyle-এর মতো ভাষা-নির্দিষ্ট অপশনের প্রভাব দেখানোর জায়গা পায়। আপনার পছন্দ রিলোডের পরও বজায় থাকে।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলি