راهنمای Atom

Atom

اگر با Sublime Text آشنا هستید بدون شک عاشق Atom نیز خواهید شد، اتم ویرایشگری حاصل دسترنج تیم Github است که بصورت متن‌باز منتشر شده است. اگر در دنیای برنامه‌نویسی وب کمی عمیق‌تر هستید بهتر است بدانید که بنیان این ویرایشگر با NodeJs نهاده شده. اتم بدلیل اینکه توسط تیم گیت‌هاب توسعه یافته است پشتیبانی بسیار خوبی از git دارد و اگر با گیت کار می‌کنید می‌تواند بسیار کمک حال شما برای ویرایش فایل‌ها باشد.

فهرست

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

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

atom command palette

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

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

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

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

atom goto

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

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

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

اسنیپت ها(Snippets)

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

Snippet

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

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

1
2
3
4
'.source.js':
'console.log':
'prefix': 'log'
'body': 'console.log(${1:"crash"});$2'

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

1
2
3
4
5
6
7
8
9
10
11
12
'.source.js':
'if, else if, else':
'prefix': 'ieie'
'body': """
if (${1:true}) {
$2
} else if (${3:false}) {
$4
} else {
$5
}
"""

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

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

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

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

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

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

Todo Show

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

atom todo show

Increment Selection

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

atom increment selection

autocomplete+ paths suggestions

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

autocomplete+

pigments

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

atom color package

قالب ها/ تم ها

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

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

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

atom monokai theme

atom material UI

اتم را با طعم طراحی متریال تجربه کنید. در هفته‌ای که گذشت این قالب مجبوب‌ترین قالب میان کاربران اتم بوده است.
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 را انتخاب کنید.

atom shell commands

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

1
apm install PACKAGE_NAME

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

1
atom FILE_DIRECTORY_PATH

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

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