آموزش atom

آموزش atom

atom یک ویرایشگر کد می باشد که در تمامی سیستم عاملها بسیار کاربردی می باشد این برنامه  بسیار سبک می باشد و جالب است بدانید که این برنامه با قدرت phpstrome و سبکی sublime می باشد . سازنده این ویرایشگر قدرتمند github می باشد و یکی از حامیان قوی آن قیسبوک است به همین منظور بسیار خوب react را پشتیبانی میکند.

مزایای atom

• بسیار سبک و راحت
• دارای بسته های مختلف که هر کاری را پشتیبانی می کند
• رابط کاربری ساده و بسیار دلنشین دور از پیچیدگی سایر ویرایشگرها
• پشتیبانی کامل از زبان فارسی
• سیستم تکمیل خودکار کدها autocomplete
• و…

طریقه نصب atom

برای نصب atom به وبسایت آن بروید و آن را بسته به سیستم عاملتان دانلود و نصب نمایید .

https://atom.io/

نصب راحت در لینوکس

به منظور نصب در لینوکس فقط کافی است کد های زیر را در ترمینال اجرا نمایید.

sudo add-apt-repository ppa:webupd8team/atom
sudo apt-get update
sudo apt-get install atom

همانگونه که در تصویر زیر می بینید atom دارای محیطی بسیار کاربر پسند و ساده دارد

بسته ها و قالبها در atom

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

در لینک زیر می توانید لیستی از آنها را مشاهده نمایید :

 

http://atom.io/packages

اما برای نصب بسته ها و قالبها کافی است به قسمت نصب پکیجها بروید همانگونه که می بینید در پنجره خوش آمد گویی جایی برای آن وجود دارد

پالت فرامین (Command Palette)

کلید میانبر: ctrl + shift + p
این پالت جایی است که لیستی از فرامین موجود در اتم را میتوانید مشاهده و اجرا کنید، راحتی استفاده از این پالت باعث دسترسی سریع شما به امکانات موجود است، همچنین این پالت میتواند راهنمایی سریعی برای یادگیری کلیدهای میانبر اتم باشد.

)

کلید میانبر: ctrl + shift + p
این پالت جایی است که لیستی از فرامین موجود در اتم را میتوانید مشاهده و اجرا کنید، راحتی استفاده از این پالت باعث دسترسی سریع شما به امکانات موجود است، همچنین این پالت میتواند راهنمایی سریعی برای یادگیری کلیدهای میانبر اتم باشد.

تغییر فایل(File Switching)

کلید میانبر: ctrl + p
اتم روشی واقعا سریع برای دستیابی به فایل در اختیار شما قرار می دهد، دیگر نیازی به اسکرول میان فولدر ها یا نوار جانبی برنامه نداری تنها کلید ctrl + p را بفشارید و بخشی از نام فایل خود را وارد کنید و درون لیستی که برای شما نمایش داده میشود فایل مورد نظر خود را انتخاب کنید، دقیقا مشابه کاری که در سابلیم میتوان انجام داد. این پالت بسیار مشابه پالت فرامین اتم است با این تفاوت که تنها فایل‌های موجود در پروژه کنونی را نمایش میدهد، نه چیز دیگر.

پرش یه نماد(Goto Symbols)

کلید میانبر: ctrl + r
پیدا کردن یک تابع درون فایل‌های بزرگ کار دشواری است و نیازمند استفاده از جست‌جو، ولی اتم نیز همانند سابلیم راه ساده تری برای این کار دارد. تنها کافی است ctrl + r را بفشارید و نام تابع خود را بنویسید، لیستی از توابع و نماد‌های متناسب درون فایل نمایش می شود که به راحتی میتوانید بین آنها بچرخید.

تغییر دسته جمعی(Multi-Edit)

کلید میانبر: ctrl + click
بهترین ویژگی‌ای که بسیاری از IDEها بزرگ بصورت پیش‌فرض ندارند
اگر معتاد استفاده از این ویژگی شوید دیگر نقل مکان به ویرایشگری که این امکان را ندارد برای شما دشوار خواهد بود. این ویژگی به شما این امکان را می‌دهد تا بخش‌های مختلف کد را یک جا تغییر دهید، آنها را کپی کنید در جاهای دیگر پیست کنید. کنترل را نگه دارید و مکان های مورد نظر کلیک کرده و شروع به نوشتن کنید. برای استفاده از این ویژگی چند راه دیگر نیز وجود دارد:

• command + ctrl + g: انتخاب تمام تکرار های کمله حاضر (در مکینتاش)
• ctrl + shift + l: با انتخاب چند سطر و فشردن این میانبر میتوانید تمام سطر های انتخاب شده را یکجا تغییر دهید.
• ctrl + d: انتخاب کلمه فعلی و کلمات مشابه بعدی در دفعات بعد
• ctrl + click: هر مکانی که کلیک کنید اشاره گری برای تغییر دسته جمعی ایجاد می شود

اسنیپت ها(Snippets)

اسنیپت‌ها یکی از کاربردی ترین ویژگی‌های تمامی ویرایشگرها هستند، با ایجاد استنیپت‌ها میتوانید با واردکردن کلیدواژه‌های خاص عبارات مورد نظر خود را تایپ کنید. در واقع می‌توان گفت در اتم اسنیپت‌ها همان مفهوم auto-complete هایی را دارند که خود شما میتوانید آنها را ایجاد کنید.
auto-complete در اتم کمی متفاوت از چیز است که در دیگر ویرایشگرها همانند سابلیم داده‌اید، در اینگونه باید عمل کنید و که کلیدواژه مورد نظر را نوشته وسپس بدون تغییر مکان اشاره‌گر متن کلید Tab را فشاردهید، سابلیم کلیدواژه شما را به عبارت مربوطه جایگزین می‌کند. برای نمونه فایل جدید بسازید و واژه html در آن نوشته و سپس Tab را بزنید، سابلیم ساختار کلی یک صفحه وب را جایگزین واژه html خواهد کرد

ساخت اسنیپت جدید

برای ایجاد اسنیپت جدید در اتم، درون برنامه منوی Atom > Open Your Snippets را انتخاب کنید، در تب باز شده میتوانید اسنیپت دلخواه خود را تعریف کنید.
اسنیپت ها را در اتم میتوان یک ساختار چهار سطری در نظر گرفت، سطر اول محدوده فعال بودن اسنیپت را مشخص میکند، سطر دوم توضیح یا نام اسنیپت، سطر سوم پیشنودی که برای دسترسی سریع بکار گرفته می‌شود و چهارم متن جایگرین اصلی خواهد بود، نمونه‌ای از اسنیپت را در زیر مشاهده می کنید.

۱ ۲ ۳ ۴

‘.source.js’: ‘console.log’: ‘prefix’: ‘log’ ‘body’: ‘console.log(${1:”crash”});$2’

که این اسنیپت فقط در فایل‌ها و بخش های Javascript فعال است.
همچنین درصورتی که میخواهید بدنه اصلی اسنیپت خود را چند سطری تعیین کنید میتوانید از کاراکتر‌هایی همچون \n \tاستفاده کنید یا بجای کوتیشن و دابل‌کوتیشن از """ استفاده کنید

۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲

‘.source.js’: ‘if, else if, else’: ‘prefix’: ‘ieie’ ‘body’: “”” if (${1:true}) { $۲ } else if (${3:false}) { $۴ } else { $۵ } “””

همچنین دور از انتظار نیست که درون اتم اسنیپتی وجود داشته باشد که ساختار ایجاد یک اسنیپت جدید را برای ما بسازد، درون فایل اسنیپت ها عبارت snip را نوشته و کلید Tab را بفشارید تا ساختار یک اسنیپت جدید جایگرین این عبارت شود.

نمونه یک اسنیپت ساده برای لورم‌ایپسام را نیز میتوانید در این آدرس مشاهده کنید.

کلید های میانبر(Keyboard Shortcuts)

برای مشاهده لیست میانبرهای ویرایشگر اتم سری به این آدرس بزنید یا این فایل PDF را دانلود کنید.
همچنین در تنظیمات اتم بخشی با عنوان keybinding وجود دارد که در آن میتوانید تمام کلید‌های میانبر پیشفرض اتم را مشاهده کنید.

پکیج ها/ پلاگین ها

برای نصب پکیج‌ّا کافی است به بخش تنظیمات اتم رفته و در بخش install نام پکیج موردنظر را جست و جو کنید

Todo Show

وقتی در حال گسترش یک پروژه هستید، بسیار اتفاق می‌افتد که ساخت بخشی از کدها به بعد موکول شود، این پلاگین به‌شما این امکان را می‌دهد تا کامنت‌های TODO خود را براحتی درون پروژه پیدا کرده و سراغ آنها بروید

Increment Selection

شماره گذاری و عددگذاری درون یک فایل همواره یکی از سخت‌ترین کارهایی است که ممکن است یک برنامه نویس (بیشتر وب‌کارها) انجام دهد، این پکیج وظیفه خطیر مرتب کردن اعداد انتخاب شده را بر عهده میگیرد.

autocomplete+ paths suggestions

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

pigments

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

قالب ها/ تم ها

قالب پیش‌فرض اتم خود به اندازه‌ای دلنشین هست ک بخواهید برای مدتی آزمایش هم شده با آن کار کنید ولی درصورتی که میخواهید شکل دلخواه خود را به ویرایشگر خود دهید همانند پلاگین ها میتوانید قالب های جدید روی اتم خود نصب کنید.

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

یکی از محبوب‌ترین تم‌های موجود برای ویرایشگرها همین تم monokai است که اگر با سابلیک کار کرده باشید حتما آن را میشناسید.

atom material UI

اتم را با طعم طراحی متریال تجربه کنید. در هفته‌ای که گذشت این قالب مجبوب‌ترین قالب میان کاربران اتم بوده است.

برای یافت قالب‌های جدید و دخواه خود میتوانید به بخش قالب‌های وب سایت اتم سری بزنیم

استایل‌های شخصی شما

همانطور پیشتر نیز گفتیم واسط گرافیگی اتم با استفاده از HTML و CSS طراحی شده است و این بدین معنی است که اگر سررشته‌ای از طراحی وب دارید، به راحتی میتوانید ظاهر ویرایشگر خود را شخصی سازی کنید. درون اتم نیز بخشی وجود دارد که میتوانید کد‌های CSS خود را درون آن نوشته و ظاهر دلخواه خود را بسازید. برای دسترسی به این بخش/فایل از منوی Atom گزینه Open Your Stylesheet را انتخاب کنید.

~Atom Your StyleSheet

تنظیمات

برخلاف Sublime Text طراحی شده و شما براحتی میتوانید بخش‌های مختلف ویرایش‌گر راه مدیریت کنید، اگر از مک استفاده می‌کنید همانند تمامی برنامه های دیگر میانبر command + , شما را به بخش تنظیمات هدایت می کند.

دستورات خط فرمان

یکی دیگر از خوبی‌های اتم وجود ابزارهای خط فرمان برای این ویرایشگر قدرتمند است، همانطور که گفته شد این ویرایشگر قدرتمند روی پیکره NodeJSاستوار است، طراحان اتم نیز با استفاده از قدرت NodeJS دو دستور کاربردی apm و atom را ایجاد کرده‌اند که اولی برای مخفف Atom Package manager است و همانطور که از اسمش پیداست میتوانید پکیج‌ها، تم‌ها و دیگر ابزار‌های اتم را براحتی با استفاده از این ابزار مدیریت کنید، اتم را بروزرسانی کنید و کارهای دیگر. با استفاده از دستور دستور دیگر میتوانید فایل‌ها و دایکتوری ‌های مورد نظر خود را جهت ویرایش با اتم باز کنید.
در صورتی که هنوز دستورات خط‌فرمان اتم را نصب نکرده‌اید از منوی Atom گزینه Install Shell Commands را انتخاب کنید.

برای نصب پکیج‌ها و قالب‌های جدید میتوانید از دستوری مشابه دستور زیر استفاده کنید

۱	apm install PACKAGE_NAME

برای باز کردن یک فایل یا فولدر توسط اتم دستور زیر را میتوانید استفاده کنید.

۱	atom FILE_DIRECTORY_PATH

توسعه دهندگان

اگر توسعه‌دهنده وب هستید حتما سری به منوی View/Developer بزنید و گزینه Toggle Developer Toolsرو امتحان کنید، بنظر خود من این بهترین لذتی است که شما میتوانید از یک ویرایشگر ببرید 🙂