Front-End Extension Gold 🥇 Pack 📦 is a complete and powerful 💪 Package of VS Code extensions designed for front-end developers. This Package includes a collection of essential and useful extensions for coding, formatting, project management, and more.
1- Prettier for formatting code in a consistent and beautiful way
2- JavaScript (ES6) code snippets JavaScriptSnippets for quick and easy access to repetitive JavaScript code
3- HTMLHint for checking HTML code and suggesting corrections
4- CSS Peek for viewing the CSS code underneath any HTML element
5- GitHistory for exploring code history and changes made
6- ESLint for estimating the cost of importing npm packages
7- Remote SSH for accessing your code via SSH
8- ES7+ React/Redux/React-Native-snippets for quick and easy access to repetitive React code
9- HTML-CSS for automatic completion of HTML and CSS code
10- HTML-CSS Class Completion for automatic completion of HTML and CSS classes
11- LiveShare for sharing code in real time with other developers
12- Theme-Dracula for beautifying the VS Code workspace
13- Project Manager for managing front-end projects
14- SVG for working with SVG files
15- Turbo Console Log for improving the performance of console output
16- Tailwind CSS for using Tailwind CSS in VS Code
17- Indent Rainbow for coloring code based on indentation level
18- LiveServer for launching a local server for testing code
19- Codeium for creating interactive code samples
20- Intellicode-API-Usage-Examples for viewing examples of API usage
21- Gutter Preview for previewing code changes in the margin
22- Code Runner for running JavaScript, CSS, and HTML code
23- Code Spell Checker for checking code spelling
24- Better Comments for improving the quality and readability of code comments
25- Bracket Pair Color DLW for coloring paired brackets
26- VSCode-Color for using custom colors in VS Code
27- Auto-Close Tagfor automatically closing tags
28- Auto-Rename Tag for automatically renaming tags
29- VSCode-ESLint for linting code using ESLint
30- Figma-VSCode-Extension for using Figma in VS Code
31- Image-previewShows image preview in the gutter and on hover
32- Bootstrap 5 Collection of Bootstrap 5 Snippets that will make your life easier
33- Simple React Snippets the essential collection of React Snippets and commands.
34- JSX HTML Use HTML Tags into JSX
35- Import Cost This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.
36- Auto Import Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
37- Bookmarks Bookmarks is an extension created for Visual Studio Code. If you find it useful, please consider supporting it.
38- JavaScript Debugger (Nightly) Offers experimental debugging features for Node.js, Chrome, Edge, WebView2, and VS Code extensions. Use it for cutting-edge capabilities or potential fixes.
39- jest jest extends Jest's magic to VS Code, making testing a breeze.
40- npm Intellisense npm Intellisense: Improves code completion and documentation for npm modules. It's active and recommended.
Front-End Extension Gold Pack is a valuable tool for front-end developers that can help them increase productivity and improve code quality. This Package is available for free in the VS Code Marketplace.
👌 This Package includes extensions for formatting, linting, and more that can help developers improve the quality of their code.
🌐 This Package is regularly updated to ensure compatibility with the latest technologies.
If you are a front-end developer, Front-End Extension Gold Pack is a valuable tool for you. This Package can help you code faster, easier, and with better quality.
Start a discussion on GitHub Discussions, File a bug in GitHub Issues, If you have a new extension in mind that is not in the list, introduce it so that we can add it in the new update , Chat with us on Linkedin Minoo Zarpoosh, Mohammad Rahgoshayi with other feedback.
@EchoWebNerds / @Mohammad Rahgoshayi / @Minoo Zarpoosh Enjoy! 😉🔥
GNU General Public License v3.0
پکیج طلایی اکستنشن های فرانت اند 🥇📦 یک بسته کامل و قدرتمند 💪 از اکستنشن‌های VsCode است که برای توسعه‌دهندگان فرانت اند طراحی شده است. این بسته شامل مجموعه ای از اکستنشن‌های ضروری و مفید برای کدنویسی، فرمت‌بندی، مدیریت پروژه و ... است.
1- Prettier
Prettier یک افزونه محبوب برای قالب بندی کد است که به شما کمک می کند کد خود را به روشی یکنواخت و خوانا قالب بندی کنید.از دستور Ctrl+Shift+P برای اجرای آن استفاده کنید
این افزونه مجموعه ای از کدهای کوتاه برای JavaScript ES6 را ارائه می دهد که می تواند به شما در نوشتن کد سریعتر و کارآمدتر کمک کند. این کدهای کوتاه شامل کدهای مربوط به توابع، کلاس ها، آرایه ها، و سایر ساختارهای داده هستند.
3- HTMLHint یک افزونه برای بررسی کد HTML است که به شما کمک می کند خطاها و مشکلات کد خود را شناسایی و رفع کنید.از دستور Ctrl+Shift+Alt+H برای بررسی کد خود استفاده کنید.
یک افزونه برای نمایش کد CSS مرتبط با هر عنصر HTML است. این افزونه به شما کمک می کند تا کد CSS مرتبط با عناصر HTML را به سرعت و به راحتی مشاهده کنید.
5- GitHistoryیک افزونه برای بررسی تاریخچه کد است که به شما کمک می کند تغییرات ایجاد شده در کد خود را مشاهده و بازیابی کنید. و تغییرات را به صورت خط به خط مشاهده یا به صورت یک فایل کامل بازیابی کنید.از کلید میانبر Ctrl+Shift+G برای باز کردن تاریخچه کد استفاده کنید
یک افزونه برای linting کد است که به شما کمک می کند کد خود را از نظر نحوی و سبک کد بررسی کنید.از کلید میانبر F8 برای بررسی کد خود استفاده کنید.
یک افزونه برای دسترسی به کد خود از طریق SSH است که به شما کمک می کند از راه دور به سرورهای خود متصل شوید
8- ES7+ React/Redux/React-Native-snippetsاین افزونه مجموعه ای از کدهای کوتاه برای React/Redux/React-Native است که می تواند به شما در نوشتن کد سریعتر و کارآمدتر کمک کند.
9- HTML-CSSاین افزونه قابلیت تکمیل خودکار کد برای HTML و CSS را فراهم می کند که می تواند به شما در نوشتن کد سریعتر و کارآمدتر کمک کند.از کلید میانبر Ctrl+Space برای تکمیل خودکار کد استفاده کنید.
این افزونه قابلیت تکمیل خودکار کلاس های HTML و CSS را فراهم می کند که می تواند به شما در نوشتن کد سریعتر و کارآمدتر کمک کند.
11- LiveShare یک افزونه برای به اشتراک گذاری کد در زمان واقعی با سایر توسعه دهندگان است که به شما کمک می کند کد خود را با هم کار کنید و مشکلات را حل کنید. برای استفاده از LiveShare، می توانید آن را از فروشگاه Visual Studio Code نصب کنید و سپس از کلید میانبر Ctrl+Shift+L برای شروع اشتراک گذاری کد استفاده کنید.
یک تم محبوب برای Visual Studio Code است که ظاهر آن را تیره و شیک می کند. این تم به شما کمک می کند تا در محیطی آرام و تمرکز کننده کدنویسی کنید.از دستور Ctrl+Shift+P برای باز کردن تنظیمات Visual Studio Code استفاده کنید و سپس به بخش "Extensions" بروید و "Theme-Dracula" را انتخاب کنید.
13- Project Managerیک افزونه برای مدیریت پروژه های front-end است. این افزونه به شما کمک می کند تا پروژه های خود را سازماندهی کنید، فایل ها را مدیریت کنید و به روزرسانی های پروژه را پیگیری کنید.
14- SVGیک افزونه برای کار با فایل های SVG است. این افزونه به شما کمک می کند تا SVG ها را در Visual Studio Code ویرایش کنید، مشاهده کنید و تبدیل کنید. سپس، می توانید SVG ها را مانند هر فایل متنی دیگری در Visual Studio Code باز کنید.
15- Turbo Console Logیک افزونه برای بهبود عملکرد خروجی کنسول است. این افزونه به شما کمک می کند تا خروجی کنسول را سریعتر مشاهده کنید و آن را بهتر سازماندهی کنید.
16- Tailwind CSSیک چارچوب CSS است که مجموعه ای از کلاس های کاربردی برای طراحی وب سایت ها ارائه می دهد.
17- Indent Rainbow یک افزونه است که کد را بر اساس سطح تورفتگی رنگ می کند. این می تواند به شما کمک کند تا به سرعت سطح تورفتگی قسمت های مختلف کد خود را شناسایی کنید. رنگ آمیزی کد بر اساس سطح تورفتگی, خواندن و فهمیدن کد را آسان تر می کند, به شناسایی خطاهای احتمالی در تورفتگی کد کمک می کند.از دست. از دستور Ctrl+S برای مرتب کردن کد های خود استفاده کنید.
یک افزونه است که یک سرور محلی برای آزمایش کد راه اندازی می کند. این می تواند زمانی که در حال توسعه برنامه های وب هستید و می خواهید تغییرات خود را بدون نیاز به انتشار آنها در سرور ببینید مفید باشد.
19- Codeiumیک افزونه است که به شما امکان می دهد نمونه های کد تعاملی ایجاد کنید. این می تواند برای آموزش کد یا نشان دادن مفاهیم جدید مفید باشد.
20- Intellicode-API-Usage-Examplesیک افزونه است که نمونه هایی از استفاده از API را نشان می دهد. این می تواند زمانی که در حال یادگیری API های جدید هستید یا سعی می کنید نحوه استفاده از API را بفهمید مفید باشد.
21- Gutter Previewیک افزونه است که تغییرات کد را در حاشیه نمایش می دهد. این می تواند زمانی که در حال ایجاد تغییرات در کد هستید و می خواهید قبل از اعمال آنها تغییرات را ببینید مفید باشد.
22- Code Runnerیک افزونه است که کد را در ویرایشگر اجرا می کند. این می تواند زمانی که می خواهید کد خود را به سرعت آزمایش کنید یا اشکال زدایی کنید مفید باشد.
23- Code Spell Checkerاین افزونه خطاهای املایی در کد و کامنت‌ها را تشخیص می‌دهد. از طیف گسترده‌ای از زبان‌های برنامه‌نویسی پشتیبانی میکند و می‌توان آن را طوری تنظیم کرد که کلمات یا عبارات خاصی را نادیده بگیرد.
24- Better Commentsنوشتن کامنت‌های واضح و مختصر را در کد آسان‌تر میکند. گزینه‌های قالب‌بندی متنوعی ارائه می‌دهد و می‌تواند از اشتباهات رایج جلوگیری کند. با گذاشتن هر یک از علایم زیر رنگ کامنت به رنگ نوشته شده تغییر میکند.!= قرمز , ?= آبی , TODO=نارنجی , *= سبز کم رنگ
جفت‌های براکت، پرانتز و سایر نمادهای مشابه در کد را برجسته میکند. این کار می‌تواند به شناسایی و پیمایش سریع بلوک‌های کد کمک کند.
26- VSCode-Colorطیف متنوعی از ابزارها را برای کار با رنگ‌ها در کد ارائه می‌دهد. می‌تواند به یافتن و انتخاب رنگ‌ها، تبدیل بین فرمت‌های رنگ و پیش‌نمایش رنگ‌ها در ویرایشگر کمک کند.
27- Auto-Close Tagبرچسب‌های پایانی مطابق با برچسب‌های HTML و XML را به‌طور خودکار وارد میکند. این کار می‌تواند در هنگام نوشتن کد نشانه‌گذاری، وقت و تلاش شما را ذخیره کند.
28- Auto-Rename Tagهنگام تغییر نام یک برچسب، برچسب‌های مطابق را به‌طور خودکار تغییر نام می‌دهد. این کار می‌تواند به حفظ یکپارچگی و خوانایی کد شما کمک کند.
29- VSCode-ESLintیک ابزار linting JavaScript، را در Visual Studio Code ادغام میکند. ESLint به شما کمک میکند تا خطاها را شناسایی و کیفیت کد JavaScript خود را بهبود ببخشید.
30- Figma-VSCode-Extensionیک ابزار طراحی محبوب، متصل میکند. به شما امکان می‌دهد فایل‌های Figma را در ویرایشگر خود پیش‌نمایش کنید و مستقیماً با آنها تعامل داشته باشید.
31- Image-previewتصاویر را در حاشیه ویرایشگر شما نمایش می‌دهد. این کار می‌تواند برای پیش‌نمایش سریع تصاویر بدون نیاز به باز کردن آنها در پنجره جداگانه مفید باشد.
32- Bootstrap 5اسکریپت‌ها و مستندات Bootstrap 5 را برای Visual Studio Code فراهم میکند. Bootstrap یک چارچوب CSS محبوب برای ساخت صفحات وب واکنش‌گرا است.
33- Simple React Snippetsمجموعه‌ای از اسکریپت‌های React ساده را برای Visual Studio Code فراهم میکند. React یک کتابخانه JavaScript برای ساخت رابط‌های کاربری است.
34- JSX HTMLبرجسته‌سازی نحو و قوانین تورفتگی را برای JSX، یک گسترش نحوی برای JavaScript که به شما امکان می‌دهد عناصر HTML را در کد JavaScript خود جاسازی کنید، اضافه میکند.
35- Import Costهزینه واردات ماژول‌ها را در کد JavaScript شما تخمین می‌زند. این کار می‌تواند به شناسایی و بهینه‌سازی واردات کد کمک کند.
36- Auto Importماژول‌ها را به‌طور خودکار وارد میکند زمانی که از آنها در کد JavaScript خود استفاده می‌کنید. این کار می‌تواند در هنگام نوشتن کد، وقت و تلاش شما را ذخیره کند.
37- Bookmarksامکان ایجاد bookmarks در کد شما را فراهم میکند. Bookmarks می‌توانند برای پرش سریع به مکان‌های خاص در کد شما مفید باشند.
38- JavaScript Debugger (Nightly)یک اشکال‌زدای JavaScript برای Visual Studio Code فراهم میکند. اشکال‌زدا به شما امکان می‌دهد کد خود را گام به گام طی کنید، نقاط عطف تنظیم کنید و متغیرها را بررسی کنید.
39- jestیک چارچوب آزمایش JavaScript، را برای Visual Studio Code فراهم میکند. Jest یک ابزار محبوب برای آزمایش کد JavaScript است.
40- npm Intellisenseپشتیبانی IntelliSense را برای بسته‌های npm فراهم میکند. IntelliSense می‌تواند به شما کمک کند تا بسته‌ها را پیدا و انتخاب کنید و همچنین می‌تواند اطلاعات مربوط به وابستگی‌های بسته را نمایش دهد.
Front-End Extension Gold Pack ابزار مهمی برای توسعه‌دهندگان فرانت اند است که می‌تواند به آنها در افزایش بهره‌وری و بهبود کیفیت کد کمک کند. این بسته به صورت رایگان در مارکت VsCode در دسترس است.
🛠 ابزارهای پیشرفته: اکستنشن‌های حرفه‌ای برای دیباگینگ، پیش‌نمایش کدها و مدیریت پروژه‌ها.
👌 این بسته شامل اکستنشن‌ها برای فرمت‌بندی، linting و ... است که می‌تواند به توسعه‌دهندگان کمک کند کیفیت کد خود را بهبود بخشند.
🌐 انعطاف‌پذیری: سازگار با انواع پروژه‌ها و قابلیت اضافه کردن اکستنشن‌های دلخواه.این بسته به صورت منظم به‌روزرسانی می‌شود تا از سازگاری با آخرین فناوری‌ها را اطمینان حاصل کند.
اگر شما یک توسعه‌دهنده فرانت اند هستید، Front-End Extension Gold Pack یک ابزار ارزشمند برای شماست. این بسته می‌تواند به شما کمک کند تا سریعتر، آسان‌تر و با کیفیت بهتری کد بزنید.
اگربه باگ یا ایرادی برخوردید خوشحال میشویم با ما به اشتراک بگذارید تا در اولین فرصت آن را برطرف کنیم. افزونه جدیدی در نظر دارید که در لیست نیست، آن را معرفی کنید تا در آپدیت جدید اضافه کنیم، با ما در لینکدین مینو زرپوش , محمد رهگشایی در ارتباط باشید.