2026 সালে ক্লিন কোডবেসের জন্য ESLint এবং Prettier কিভাবে সেট আপ করবেন

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

প্রতিটি টুল কি করে

বিভাগ: ESLint কোড কোয়ালিটি (যুক্তি, সম্ভাব্য বাগ) পরিচালনা করে, প্রটিয়ার ফরম্যাটিং (এটি কেমন দেখায়) পরিচালনা করে। উভয় ব্যবহার করে, সুন্দর মালিকানার বিন্যাস সহ, দ্বন্দ্ব এড়ায়।

ইনস্টলেশন

# Install both plus the integration packages
npm install --save-dev eslint prettier
npm install --save-dev eslint-config-prettier
# eslint-config-prettier turns off ESLint rules that conflict with Prettier

ESLint কনফিগারেশন (ফ্ল্যাট কনফিগারেশন, 2026)

// eslint.config.js (flat config - the modern standard)
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2025,
      sourceType: 'module',
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'warn',
      'prefer-const': 'error',
      'eqeqeq': 'error',   // require === over ==
    },
  },
  prettier,   // MUST be last - disables ESLint rules that conflict with Prettier
];

সুন্দর কনফিগারেশন

// .prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}

# .prettierignore - files Prettier should skip
node_modules
dist
build
*.min.js
coverage

মূল: সুন্দরকে নিজের ফর্ম্যাটিং করতে দিন

ক্লাসিক ভুল হল ESLint এবং Prettier উভয়েই কোড ফরম্যাট করার চেষ্টা করে — তারা বিবাদ করে, কোট, সেমিকোলন এবং স্পেসিং নিয়ে লড়াই করে। ঠিক হলeslint-config-prettier, যা সমস্ত ESLint ফর্ম্যাটিং নিয়মগুলিকে নিষ্ক্রিয় করে তাই Prettier ফরম্যাটিং পরিচালনা করে এবং ESLint কোডের গুণমান পরিচালনা করে। এটিকে আপনার ESLint কনফিগারেশনে LAST যোগ করুন যাতে এটি পরস্পরবিরোধী নিয়ম ওভাররাইড করে।

package.json স্ক্রিপ্টস

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

# Run them
npm run lint          # find problems
npm run lint:fix      # auto-fix fixable problems
npm run format        # format all files with Prettier
npm run format:check  # check formatting without changing (for CI)

সেভ অন ফরম্যাট (ভিএস কোড)

// .vscode/settings.json - commit this so the whole team gets it
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

এটির সাহায্যে, একটি ফাইল সংরক্ষণ করা হলে সেটিকে অটো-ফরম্যাট করে Prettier এবং স্বয়ংক্রিয়ভাবে ESLint সমস্যা সমাধান করে। শূন্য ম্যানুয়াল প্রচেষ্টার সাথে সামঞ্জস্যপূর্ণ কোড।

হুস্কি এবং লিন্ট-স্টেজেডের সাথে প্রতিশ্রুতি প্রয়োগ করুন

npm install --save-dev husky lint-staged
npx husky init

// package.json - run linting/formatting only on staged files
{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,css}": "prettier --write"
  }
}

# .husky/pre-commit
npx lint-staged

এখন প্রতিটি কমিট স্বয়ংক্রিয়ভাবে লিন্ট করে এবং স্টেজড ফাইল ফরম্যাট করে — কোনো আনফরম্যাটেড বা লিন্ট-ফেলিং কোড রেপোতে প্রবেশ করে না।

টাইপস্ক্রিপ্ট সেটআপ

npm install --save-dev typescript-eslint

// eslint.config.js with TypeScript
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  prettier,   // last
];

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

প্রশ্ন: আমার কি ESLint এবং Prettier দুটোই দরকার?
উত্তর: তারা বিভিন্ন উদ্দেশ্যে কাজ করে — কোডের গুণমান/বাগের জন্য ESLint, বিন্যাসের জন্য সুন্দর। উভয়ই ব্যবহার করা আপনাকে পরিষ্কার, সামঞ্জস্যপূর্ণ, বাগ-ধরা কোড দেয়। আপনি একাই ESLint ব্যবহার করতে পারেন, কিন্তু Prettier-এর স্বয়ংক্রিয় বিন্যাস একটি বিশাল সময়-সংরক্ষণকারী এবং বিন্যাস সংক্রান্ত বিতর্কগুলি দূর করে।

প্রশ্ন: কেন ESLint এবং Prettier দ্বন্দ্ব?
উত্তর: উভয়ই ফর্ম্যাটিং নিয়ম (উদ্ধৃতি, সেমিকোলন, স্পেসিং) প্রয়োগ করতে পারে এবং তারা একমত নয়। ঠিক হলeslint-config-prettier, যা ESLint এর ফর্ম্যাটিং নিয়মগুলিকে অক্ষম করে তাই Prettier ফর্ম্যাটিং এর মালিক এবং ESLint কোড মানের মালিক৷ এটি আপনার ESLint কনফিগারে শেষ যোগ করুন।

প্রশ্ন: আমার কি ESLint (eslint-plugin-prettier) এর মাধ্যমে প্রেটিয়ার চালানো উচিত?
উত্তর: সাধারণত না — ESLint নিয়ম হিসাবে প্রেটিয়ার চালানো ধীর এবং ফর্ম্যাটিংয়ের জন্য লাল স্কুইগল যোগ করে। প্রস্তাবিত সেটআপ তাদের আলাদাভাবে চালাচ্ছে: ফরম্যাটিংয়ের জন্য সুন্দর (সংরক্ষণের ফর্ম্যাট), মানের জন্য ESLint, দ্বন্দ্ব প্রতিরোধ করতে eslint-config-prettier সহ।

প্রশ্ন: আমি কীভাবে এটি আমার দল জুড়ে প্রয়োগ করব?
উত্তর: কনফিগার ফাইলগুলিকে কমিট করুন (eslint.config.js, .prettierrc, .vscode/settings.json) এবং Husky + lint-staged সেট আপ করুন যাতে স্বয়ংক্রিয় ফর্ম্যাট হয়৷ যোগ করুনformat:check এবংlint CI তে তাই আনফরম্যাট করা বা ব্যর্থ কোড একত্রিত হতে পারে না। এটি স্বতন্ত্র সম্পাদক সেটআপ নির্বিশেষে ধারাবাহিকতা নিশ্চিত করে।

প্রশ্ন: ফ্ল্যাট কনফিগারেশন কী এবং আমার এটি ব্যবহার করা উচিত?
উত্তর: ফ্ল্যাট কনফিগারেশন (eslint.config.js) হল আধুনিক ESLint কনফিগারেশন ফরম্যাট যা পুরানো .eslintrc-কে প্রতিস্থাপন করেছে। এটি ডিফল্ট এবং 2026-এ প্রস্তাবিত — ক্লিনার, আরও স্পষ্ট, এবং রচনার জন্য আরও ভাল৷ নতুন প্রকল্পের জন্য এটি ব্যবহার করুন.

উপসংহার

ESLint এবং Prettier একসাথে আপনার কোডবেস পরিষ্কার এবং সামঞ্জস্যপূর্ণ রাখে। সেটআপ:উভয় প্লাস ইনস্টল করুনeslint-config-prettier, Prettier-কে নিজস্ব ফর্ম্যাটিং এবং ESLint-এর নিজস্ব কোড কোয়ালিটি করতে দিন, দ্বন্দ্ব প্রতিরোধ করতে eslint-config-prettier যোগ করুন, VS কোডে ফরম্যাট-অন-সেভ সক্ষম করুন এবং Husky এবং lint-staged এর সাথে প্রতিশ্রুতি প্রয়োগ করুন. মূল অন্তর্দৃষ্টি হল উদ্বেগগুলিকে আলাদা করা — সুন্দর বিন্যাস, ESLint সমস্যাগুলি ধরে — এবং eslint-config-prettier ব্যবহার করে যাতে তারা লড়াই না করে। একবার সেট আপ হয়ে গেলে, আপনার কোড স্বয়ংক্রিয়ভাবে সামঞ্জস্যপূর্ণ এবং শূন্য ম্যানুয়াল প্রচেষ্টার সাথে লিন্ট-ক্লিন, ফরম্যাটিং বিতর্কগুলি দূর করে এবং পাঠানোর আগে বাগগুলি ধরা৷ এটি একটি ছোট সেটআপ বিনিয়োগ যা আপনার লেখা প্রতিটি ফাইলের জন্য পরিশোধ করে।