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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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