🔥10 افزونه مفید برای VS Code

Summarize this content to 400 words in Persian Lang
سلام به همه امروز، من 10 افزونه برای VS Code آماده کرده ام که به شما کمک می کند تا محصولات نرم افزاری جالبی را توسعه دهید و به طور کلی روند توسعه را تسریع کنید. ممکن است از برخی افزونه ها استفاده کرده باشید و اکنون از برخی از آنها استفاده می کنید. اما من فکر می کنم که شما قطعا می توانید چیز جدیدی برای خود پیدا کنید 🙂

Tabnine یک برنامه افزودنی مبتنی بر هوش مصنوعی است که تکمیل کد هوشمند و آگاه از زمینه را برای سرعت بخشیدن به توسعه در چندین زبان برنامه نویسی فراهم می کند.

ویژگی ها:

پیشنهادات هوشمندانه: تکمیل کد را بر اساس زمینه پروژه شما ارائه می دهد.

پشتیبانی چند زبانه: با جاوا اسکریپت، C++، Go و موارد دیگر کار می کند.

تمرکز بر حریم خصوصی: کد شما را با مدل های استنتاج محلی ایمن نگه می دارد.

مثال:

هنگام نوشتن یک تابع در جاوا اسکریپت:

function calculateSum(numbers) {
// Tabnine may suggest the following:
return numbers.reduce((a, b) => a + b, 0);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Tabnine به طور خودکار منطق جمع کردن یک آرایه را پیشنهاد می کند و در وقت شما صرفه جویی می کند.

Prisma مدیریت پایگاه داده را با ارائه مدل‌سازی طرح‌واره و اعتبارسنجی پرس و جو، سازگار با پایگاه‌های داده مانند PostgreSQL، MySQL و SQLite آسان‌تر می‌کند.

ویژگی ها:

تعریف طرحواره: طرحواره های پایگاه داده را به طور موثر ایجاد و مدیریت کنید.

تکمیل خودکار: به نوشتن سریعتر پرس و جوها کمک می کند.

اعتبارسنجی خطا: خطاهای نحوی در طرحواره ها و پرس و جوها را برجسته می کند.

مثال:

طرحواره پایگاه داده را تعریف کنید:

model Product {
id Int @id @default(autoincrement())
name String
price Float
inStock Boolean
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Prisma این طرح را تأیید می کند و در صورت وجود روابط مفقود یا انواع داده های نامعتبر هشدار می دهد.

GitLens عملکرد Git را در VS Code با افزودن حاشیه نویسی، جزئیات commit و تاریخچه به طور مستقیم به ویرایشگر شما افزایش می دهد.

ویژگی ها:

حاشیه نویسی سرزنش: نویسنده هر خط کد را مشاهده کنید.

تاریخچه بصری: در لاگ‌های commit و تغییرات فایل پیمایش کنید.

مقایسه درون خطی: برای بررسی بهتر کد، تغییرات درون خطی را مقایسه کنید.

مثال:

هنگام کار بر روی یک فایل، GitLens نشان می دهد:

چه کسی هر خط را ویرایش کرد.

تاریخ ویرایش.

پیام commit، به ردیابی دلیل تغییرات کمک می کند.

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

ویژگی ها:

پیشنهادات رفع سریع: به طور خودکار واردات مورد نیاز را پیشنهاد می کند.

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

پشتیبانی چند زبانه: با TypeScript، JavaScript و موارد دیگر کار می کند.

مثال:

هنگام استفاده از یک تابع ابزار:

capitalize(“example”);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وارد کردن خودکار اضافه می کند:

import { capitalize } from ‘./string-utils’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این امر واردات دستی را حذف می کند و کدنویسی را سرعت می بخشد.

GitHub Copilot یک دستیار مبتنی بر هوش مصنوعی است که کد را بر اساس زمینه، نظرات یا خطوط جزئی کد می نویسد.

ویژگی ها:

پیشنهادات هوشمند: قطعه کد کامل را ارائه می دهد.

کد نویسی مبتنی بر نظر: توابع را بر اساس نظرات می نویسد.

پشتیبانی چند زبانه: با زبان های محبوبی مانند جاوا اسکریپت، سی شارپ و Rust کار می کند.

مثال:

یک نظر بنویسید مانند:

// Function to reverse a string

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Copilot تولید می کند:

function reverseString(str) {
return str.split(”).reverse().join(”);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هنگامی که تگ آغازین را در HTML، XML یا سایر زبان‌های ساختاریافته ویرایش می‌کنید، تگ تغییر نام خودکار به‌طور خودکار برچسب بسته شدن را به‌روزرسانی می‌کند.

ویژگی ها:

به روز رسانی های پویا: تگ های باز و بسته شدن را به صورت بلادرنگ ویرایش می کند.

پیشگیری از خطا: از تگ های نامتناسب خودداری کنید.

با برچسب های تودرتو کار می کند: ساختارهای پیچیده را به طور موثر مدیریت می کند.

مثال:

تغییر:

id=”content”>Content

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به:

id=”content”>Content

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تغییر نام خودکار برچسب برچسب بسته شدن را به روز می کند به صورت خودکار

کد املای کد اشتباهات تایپی را در کد، نظرات و رشته های شما شناسایی می کند تا کیفیت و خوانایی را حفظ کند.

ویژگی ها:

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

دیکشنری های سفارشی: برای جلوگیری از مثبت کاذب، شرایط خاص پروژه را اضافه کنید.

زبان-آگنوستیک: در تمام زبان های برنامه نویسی کار می کند.

مثال:

اگر بنویسید:

// A simple fuction to calculate sum

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پسوند “fuction” را برجسته می کند و “function” را پیشنهاد می کند.

Live Server یک سرور توسعه محلی راه اندازی می کند که هر زمان که تغییرات را ذخیره می کنید صفحه وب شما را به طور خودکار بارگیری مجدد می کند.

ویژگی ها:

بازخوانی خودکار: فورا تغییرات در مرورگر را نمایش می دهد.

تنظیمات سفارشی: تنظیمات سرور را در صورت نیاز تنظیم کنید.

پشتیبانی از چندین نوع فایل: با HTML، CSS و جاوا اسکریپت کار می کند.

مثال:

خود را ویرایش کنید .html فایل و ذخیره کنید. مرورگر به طور خودکار بارگیری می شود تا تغییرات شما را منعکس کند و در زمان توسعه صرفه جویی کند.

REST Client به شما امکان می دهد API ها را مستقیماً در VS Code بدون نیاز به ابزارهای جداگانه مانند Postman آزمایش کنید.

ویژگی ها:

فایل های درخواستی: بنویسید .http یا .rest فایل ها برای تعریف درخواست های API.

پاسخ های قالب بندی شده: پاسخ های API را در قالبی ساختاریافته نمایش می دهد.

متغیرهای پویا: از متغیرهای محیطی برای تست انعطاف پذیر استفاده کنید.

مثال:

ایجاد یک درخواست در a .http فایل:

GET https://api.example.com/items
Authorization: Bearer YOUR_API_TOKEN

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

آن را اجرا کنید و REST Client پاسخ را مستقیماً در VS Code نشان می دهد.

Project Manager به شما کمک می کند تا پروژه های متعدد را در VS Code سازماندهی و به سرعت جابجا کنید.

ویژگی ها:

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

سفارشی سازی فضای کاری: ذخیره و بازیابی طرح‌بندی‌های فضای کاری.

برچسب های پروژه: برای شناسایی آسان اسامی معنی دار اضافه کنید.

مثال:

پروژه خود را به عنوان “پروژه جدید من” ذخیره کنید. بعداً از پالت فرمان برای جابجایی سریع به آن استفاده کنید و تمام فایل‌های باز و طرح‌بندی شما حفظ شود.

نتیجه گیری

در این لیست کوتاه، من سعی کرده‌ام مفیدترین و پرکاربردترین افزونه‌هایی را که می‌توان و باید در هنگام کار بر روی کد استفاده کرد، معرفی کنم. البته هنوز تعداد زیادی افزونه جالب وجود دارد که می تواند به توسعه کمک کند، اما آنها به سادگی در 10 مورد قرار نمی گیرند، زیرا تعداد زیادی از آنها وجود دارد. به نظر شما چه افزونه های جالب دیگری وجود دارد؟ جالب است که در نظرات متوجه شوید. با تشکر

به هر حال، می توانید زبان قالبی که من روی آن کار می کنم را بررسی کنید! به نظر من او خیلی باحال است و فکر می کنم می تواند به حل مشکلات معمولی سرور و کلاینت کمک کند. اگر به پروژه ستاره ☆ بدهید جالب خواهد بود 🙂

🐜 قالب قابل سفارشی سازی سرور گرا برای جاوا اسکریپت

hmpl یک زبان قالب کوچک برای نمایش رابط کاربری از سرور به کلاینت است. بر اساس آن است قابل تنظیم درخواست هایی که از طریق Fetch به سرور ارسال می شوند و در HTML آماده پردازش می شوند. این زبان از لحاظ نحوی مبتنی بر شی است و با JSON5 یکپارچه شده است. حجم فایل های جاوا اسکریپت خود را کاهش دهید و همان رابط کاربری را نمایش دهید که گویی در یک چارچوب مدرن نوشته شده است.

استفاده

کلیک کنید
کلیک‌ها: {{ src: “/api/clicks”، بعد از: “click:#btn” }}
` ) const clicker = templateFn(({ درخواست: { رویداد } }) => ({ body: event.target.getAttribute(“data-action”)، })).response; document.querySelector(“#app”).append(clicker);”>
import hmpl from “hmpl-js”;

const templateFn = hmpl.compile(
`
Click!
Clicks: {{ src: “/api/clicks”, after: “click:#btn” }}
`
);

const clicker = templateFn(({ request: { event } }) => ({
body: event.target.getAttribute(“data-action”),
})).response;

document.querySelector(“#app”).append(clicker);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا HMPL؟

با استفاده از…

function calculateSum(numbers) {
    // Tabnine may suggest the following:
    return numbers.reduce((a, b) => a + b, 0);
}

model Product {
  id          Int      @id @default(autoincrement())
  name        String
  price       Float
  inStock     Boolean
}

capitalize("example");

import { capitalize } from './string-utils';

// Function to reverse a string

function reverseString(str) {
    return str.split('').reverse().join('');
}

  
 id="content">Content

  
 id="content">Content

// A simple fuction to calculate sum

GET https://api.example.com/items  
Authorization: Bearer YOUR_API_TOKEN

import hmpl from "hmpl-js";

const templateFn = hmpl.compile(
  `

      Click!
      
Clicks: {{ src: "/api/clicks", after: "click:#btn" }}
  
`
);

const clicker = templateFn(({ request: { event } }) => ({
  body: event.target.getAttribute("data-action"),
})).response;

document.querySelector("#app").append(clicker);