افزونه CleanDeadCode برای حذف کدهای بدون استفاده در VSCode

کدهای بدون استفاده، قاتل خاموش بهره‌وری در توسعه نرم‌افزار هستند. مثلا import های استفاده نشده، متغیرهای فراموش شده و پارامترهای بلااستفاده در توابع، شاید در نگاه اول بی‌ضرر به نظر برسند، اما به تدریج انباشته می‌شوند و باعث سردرگمی، کاهش خوانایی کد و دشوارتر شدن نگهداری آن می‌شوند. با بزرگ‌تر شدن پروژه‌ها، اهمیت تمیز و کارآمد نگه داشتن کدها نیز بیشتر می‌شود.

در این مقاله، افزونه CleanDeadCode را معرفی می‌کنم، یک افزونه تخصصی برای VSCode که به صورت خودکار کدهای بدون استفاده را شناسایی و حذف می‌کند، در حالی که ساختار و نظم کد شما حفظ می‌شود.

مشکل کدهای بدون استفاده

پروژه‌های جاوااسکریپت و تایپ‌اسکریپت به طور خاص مستعد مشکلات کد بدون استفاده هستند. همانطور که کامپوننت‌ها تکامل می‌یابند، وابستگی‌ها تغییر می‌کنند و ویژگی‌ها بازسازی می‌شوند، به راحتی می‌توان رد پایی از کدهای بدون استفاده به جا گذاشت. این موارد را در نظر بگیرید:

• یک کتابخانه را import می‌کنید اما دیگر به آن نیاز ندارید
• یک هوک React را اضافه می‌کنید اما در نهایت از روش دیگری استفاده می‌کنید
• پارامترهایی را در تابع تعریف می‌کنید اما هرگز از آنها در پیاده‌سازی استفاده نمی‌کنید
• متغیرهای موقت برای اشکال‌زدایی ایجاد می‌کنید که پس از رفع مشکلات همچنان باقی می‌مانند

قابلیت داخلی VSCode به نام "Organize Imports" می‌تواند به مدیریت import ها کمک کند، اما همچنین ترتیب import ها را تغییر می‌دهد که ممکن است نظم مورد نظر شما را به هم بریزد. همچنین هشدارهای ESLint درباره متغیرهای بدون استفاده نیاز به کد زدن دستی برای رفع مشکل دارند.

معرفی CleanDeadCode

حالا CleanDeadCode این مشکلات را با دقت حل می‌کند و دو قابلیت قدرتمند ارائه می‌دهد:

1. پاکسازی هوشمند import ها: import های بدون استفاده را بدون تغییر ترتیب import های باقی‌مانده حذف می‌کند
2. مدیریت هوشمند متغیرها: متغیرهای بدون استفاده را با کامنت غیرفعال می‌کند و پارامترهای توابع را با توجه به متن مدیریت می‌کند

بیایید ببینیم این قابلیت‌ها چگونه کار می‌کنند و چه مشکلاتی را حل می‌کنند.

پاکسازی هوشمند import ها

حفظ ترتیب import های باقی‌مانده

پشتیبانی انواع import:
`import` پیش‌فرض: import React from 'react'
بانام: import { useState, useEffect } from 'react'
با نام و نام مستعار: import { useState as useStateHook } from 'react'
فضای نام: import * as ReactDOM from 'react-dom'
با اثر جانبی: import 'styles.css'

به یک مثال قبل و بعد نگاه کنیم:

قبل از پاکسازی:

import React, { useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import * as utils from './utils';

function MyComponent() {
  const [count, setCount] = useState(0);
  // فقط useState استفاده شده، useEffect و useContext استفاده نشده‌اند
  // همچنین useNavigate و utils استفاده نشده‌اند
  
  return <div>{count}</div>;
}

بعد از پاکسازی با CleanDeadCode:

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  
  return <div>{count}</div>;
}

مدیریت هوشمند متغیرها

برای متغیرهای بدون استفاده:

افزونه آنها را با یک برچسب TODO کامنت می‌کند تا به شما کمک کند تصمیم بگیرید آیا می‌خواهید آنها را کاملاً حذف کنید یا برای استفاده آینده نگه دارید:

قبل:

function processData() {
  const data = fetchData();
  const config = getConfig(); // متغیر بدون استفاده
  
  console.log(data);
  
  return data;
}

بعد:

function processData() {
  const data = fetchData();
  // TODO: Unused variable
  // const config = getConfig();
  
  console.log(data);
  
  return data;
}

برای پارامترهای تابع:

افزونه تغییرات متناسب با زمینه را اعمال می‌کند:

1. پارامترهای بدون استفاده که برای موقعیت پارامتر های بعدی ضروری هستند: پیشوند underscore اضافه می‌کند
2. پارامترهای بدون استفاده در انتها: آنها را کاملاً حذف می‌کند

قبل:

function processUser(userId, userName, userRole, userAge) {
  console.log(`Processing ${userName}`);
  // فقط userName استفاده شده، سایر پارامترها استفاده نشده‌اند
}

بعد:

function processUser(_userId, userName) {
  console.log(`Processing ${userName}`);
  // فقط userName استفاده شده، سایر پارامترها استفاده نشده‌اند
}

چالش‌های پیاده‌سازی

توسعه CleanDeadCode چندین چالش فنی جالب را به همراه داشت:

تحلیل import ها

تشخیص دقیق اینکه کدام import ها استفاده می‌شوند نیاز به تحلیل عمیق AST (درخت نحوی انتزاعی) با استفاده از API کامپایلر TypeScript داشت. استفاده ساده از الگوهای regex بسیاری از موارد خاص را از دست می‌داد، به ویژه با import های دارای نام مستعار و destructuring اشیاء.

مدیریت پارامتر با آگاهی از زمینه

مدیریت پارامترهای تابع نیاز به در نظر گرفتن موقعیت آنها نسبت به سایر پارامترها داشت. افزونه باید بین موارد زیر تمایز قائل شود:

• پارامترهایی که باید برای دلایل موقعیتی باقی بمانند
• پارامترهایی که می‌توان به راحتی آنها را حذف کرد

حفظ ساختار کد

اطمینان از اینکه افزونه فرمت‌بندی یا سازماندهی کد را مختل نمی‌کند، نیاز به دستکاری دقیق موقعیت‌های منبع و محدوده‌های کاراکتر داشت.

استفاده از CleanDeadCode

این افزونه طوری طراحی شده است که به راحتی در روند کاری شما جای بگیرد، چه پاکسازی دستی را ترجیح دهید و چه پردازش خودکار.

پاکسازی دستی

می‌توانید افزونه را از طریق موارد زیر فراخوانی کنید:

• منوی راست کلیک
• پنجره فرمان (Ctrl+Shift+P یا Cmd+Shift+P)
• میانبرهای صفحه کلید:
  Ctrl+Alt+U (ویندوز/لینوکس) یا Cmd+Alt+U (مک) برای import های بدون استفاده
  Ctrl+Alt+V (ویندوز/لینوکس) یا Cmd+Alt+V (مک) برای متغیرهای بدون استفاده
  Ctrl+Alt+C (ویندوز/لینوکس) یا Cmd+Alt+C (مک) برای هر دو عملیات
  

پاکسازی خودکار

برای رویکردی بدون نیاز به دخالت دستی، پاکسازی خودکار را هنگام ذخیره فایل فعال کنید:

1. تنظیمات VSCode را باز کنید
2. عبارت "CleanDeadCode" را جستجو کنید
3. گزینه‌های خودکار را فعال کنید:
   cleanCode.autoRemoveUnusedImports
cleanCode.autoHandleUnusedVariables
   

گزینه‌های شخصی‌سازی

افزونه چندین گزینه پیکربندی ارائه می‌دهد:

• انتخاب نحوه برخورد با متغیرهای بدون استفاده: آنها را کامنت کنید، پیشوند underscore اضافه کنید یا آنها را نادیده بگیرید
• کنترل حذف پارامتر انتهایی: انتخاب کنید که آیا پارامترهای بدون استفاده در انتهای توابع حذف شوند یا نه
• پیکربندی رفتار ذخیره خودکار: فعال کردن پاکسازی خودکار برای import ها، متغیرها یا هر دو

مزایا برای روند توسعه شما

یکپارچه‌سازی CleanDeadCode در روند کاری شما چندین مزیت دارد:

1. بهبود خوانایی کد: شلوغی کمتر به معنای کد خوانا‌تر است
2. کاهش بار شناختی: نیازی به فیلتر ذهنی عناصر بدون استفاده نیست
3. عملکرد بهتر: برخی از import های بدون استفاده می‌توانند بر اندازه بسته و زمان بارگیری تأثیر بگذارند
4. سبک کد یکنواخت: نحوه علامت‌گذاری پارامترهای بدون استفاده را استاندارد می‌کند
5. صرفه‌جویی در زمان: کاری را خودکار می‌کند که در غیر این صورت نیاز به پاکسازی دستی داشت

این افزونه تحت مجوز MIT منتشر شده و برای استفاده شخصی و تجاری رایگان است.