{"id":24251,"date":"2015-07-06T23:01:39","date_gmt":"2015-07-06T15:01:39","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24251"},"modified":"2020-06-25T16:31:48","modified_gmt":"2020-06-25T08:31:48","slug":"useful-atom-packages","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/","title":{"rendered":"10 Most Useful Atom Packages for Web Developers"},"content":{"rendered":"<p>Have you tried <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/\" rel=\"noopener noreferrer\">Atom<\/a>? Although it is quite new, many have fallen in love with Atom, a text editor made by GitHub that allows you to <a href=\"https:\/\/www.hongkiat.com\/blog\/manage-git-github-atom\/\">manage GitHub projects<\/a> along with other advantages and is free for use. Atom comes with a few built-in packages, such as integration with Git and tree-view. However, for the purposes of development you will definitely need other packages.<\/p>\n<p>In this post we have picked a few packages that a web developer must have. Some are great to help organize your messy code, others to help you have better access to your files without leaving Atom. Here are your 10 must-have Atom packages.<\/p>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/color-picker\" rel=\"noopener noreferrer\">Color Picker<\/a><\/h2>\n<p>As the name implies, this package lets you pick colors, and it is  as easy as a right-click and choosing \u2018Color Picker\u2019. Alternatively it can be done by pressing <span class=\"key\">CMD\/CTRL<\/span>+<span class=\"key\">SHIFT<\/span>+<span class=\"key\">C<\/span>. Color Picker works if your cursor is on the text on CSS\/SASS\/LESS files that contain one of the following color formats: HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4, or color variable on SASS or LESS. It also has the ability to convert between the formats.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/colorpicker.jpg\" width=\"700\" height=\"402\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/emmet\" rel=\"noopener noreferrer\">Emmet<\/a><\/h2>\n<p><strong>Emmet<\/strong> seems to be a plugin that you need to install, whatever your text editor environment is. The main features of <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/html-css-faster-emmet\/\" rel=\"noopener noreferrer\">Emmet<\/a> such as expanding abbreviations and wrapping with abbreviations, allow you to work quickly when writing HTML, CSS, Sass \/ SCSS and LESS syntaxes. For example, in HTML, type <code>p&gt;a.mylink<\/code> then tap on <span class=\"key\">TAB<\/span> key to get a complete HTML tag <code>&lt;p&gt;&lt;a href class=\"mylink\"&gt;&lt;\/a&gt;&lt;\/p&gt;<\/code>. The <a target=\"_blank\" href=\"https:\/\/docs.emmet.io\/cheat-sheet\/\" rel=\"noopener noreferrer\">Cheat Sheet<\/a> will helps you to quickly learn Emmet\u2019s abbreviation syntax.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/emmet.gif\" width=\"700\" height=\"400\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/minimap\" rel=\"noopener noreferrer\">Minimap<\/a><\/h2>\n<p>If you are accustomed to Sublime Text, you may be familiar with the mini preview on the right side window. That feature is useful to quickly scroll through source codes too long for the window height. With <strong>Minimap<\/strong>, you get this for Atom. You can even set the position to be on the left or right, turn on\/off code highlights, and more. Minimap even comes with some <a target=\"_blank\" href rel=\"noopener noreferrer\">plugins<\/a> to extend its functionality, such as <a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/minimap-color-highlight\" rel=\"noopener noreferrer\">color highlighter<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/minimap.gif\" width=\"700\" height=\"400\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/atom-beautify\" rel=\"noopener noreferrer\">Beautify<\/a><\/h2>\n<p><strong>Beautify<\/strong> will turn your messy code  neater and more readable. It has great support for programming languages, such as HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, Objective-C, CoffeeScript, typescript, and SQL. After installing this package, to run it, just right-click and choose <strong>\u2018Beautify editor contents\u2019<\/strong>, or via <code>Packages &gt; Atom Beautify &gt; Beautify<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/beautify.gif\" width=\"700\" height=\"400\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/linter\" rel=\"noopener noreferrer\">Atom Linter<\/a><\/h2>\n<p><strong>Atom Linter<\/strong> comes as a \u2018house\u2019 of linting plugins for major languages, providing the  top level API for linters. There are available linters for JavaScript, CoffeeScript, CSS \/ SASS \/ SCSS \/ LESS \/ STYLUS, Ruby, Python. In one language there are can be more one plugin available, such as JSHint, JSCS and JSXHint for JavaScript.<\/p>\n<p>After installing this main package, you need to <strong>install the specific linter for language you work on<\/strong>, for example if you are on JavaScript and choose JSHint for linter then you can install it by running <code>$ apm install linter-jshint<\/code> on Terminal.<\/p>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/file-icons\" rel=\"noopener noreferrer\">File Icons<\/a><\/h2>\n<p><strong>File Icons<\/strong> add icons to a filename based on the corresponding file type. It will add visual improvements when you open a file on tab or on tree view. The file icons are customizable: you can add your own icon and change the color through the LESS files in the <code>packages\/file-icons\/styles<\/code> directory. The default icon comes in 8 colors and 3 variants (light, medium  and dark).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/fileicons.jpg\" width=\"700\" height=\"500\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/javascript-snippets\" rel=\"noopener noreferrer\">JavaScript Snippets<\/a><\/h2>\n<p><strong>JavaScript Snippets<\/strong> lets you quickly write a portion of JS source code. With defined abbreviation you don\u2019t need to write code word for word, for instance just type <code>cl<\/code> to make <code>console.log<\/code> and <code>gi<\/code> for <code>getElementById<\/code>. This functionality is similiar to Emmet, but it runs on JavaScript code. This Atom package provides many of the JavaScript syntax like the function, the console, and the loop.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/javascript-snippets.gif\" width=\"700\" height=\"320\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/atom-css-comb\" rel=\"noopener noreferrer\">CSS Comb<\/a><\/h2>\n<p><strong>CSS Comb<\/strong> makes your stylesheet code formatted consistently, looking neat and beautiful. You can use pre-made sorting preferences based on Yandex, Zen, or CSSComb itself, or you can even use your own preference to make sorting rules. After installing this package, the sorting job can be done by pressing <span class=\"key\">CTRL<\/span> + <span class=\"key\">ALT<\/span> + <span class=\"key\">C<\/span> or accessed from the context menu via <code>Packages &gt; CSS comb &gt; Comb<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/csscomb.gif\" width=\"700\" height=\"400\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/git-plus\" rel=\"noopener noreferrer\">Git Plus<\/a><\/h2>\n<p><strong>Git Plus<\/strong> allows you to work with Git without leaving Atom editor. Within the editor you are able to make a Git commit, checkout, push\/pull, diff and other git commands. You need to setup your <code>user.name<\/code> and <code>user.email<\/code> on your git config file to make all functions work. To access all git command, open the palette with <span class=\"key\">CMD<\/span> + <span class=\"key\">SHIFT<\/span> + <span class=\"key\">H<\/span> or choose <code>Package &gt; Git Plus<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/git-plus.gif\" width=\"700\" height=\"221\"><\/figure>\n<h2><a target=\"_blank\" href=\"https:\/\/atom.io\/packages\/remote-edit\" rel=\"noopener noreferrer\">Remote Edit<\/a><\/h2>\n<p><strong>Remote Edit<\/strong> helps you to see and edit your remote files without leaving the editor or with the use of other ftp applications. To start, firstly create a new host, then add via menu <code>Packages &gt; Remote Edit &gt; Add New Host<\/code> and insert your login information. Now you can browse to your remote files, use <span class=\"key\">CTRL<\/span> + <span class=\"key\">ALT<\/span> + <span class=\"key\">B<\/span> to browse registered host and see the files.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/remote-edit.jpg\" width=\"700\" height=\"408\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Have you tried Atom? Although it is quite new, many have fallen in love with Atom, a text editor made by GitHub that allows you to manage GitHub projects along with other advantages and is free for use. Atom comes with a few built-in packages, such as integration with Git and tree-view. However, for the&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3028,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 Most Useful Atom Packages for Web Developers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Have you tried Atom? Although it is quite new, many have fallen in love with Atom, a text editor made by GitHub that allows you to manage GitHub projects\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Most Useful Atom Packages for Web Developers\" \/>\n<meta property=\"og:description\" content=\"Have you tried Atom? Although it is quite new, many have fallen in love with Atom, a text editor made by GitHub that allows you to manage GitHub projects\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-06T15:01:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-25T08:31:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/colorpicker.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"10 Most Useful Atom Packages for Web Developers\",\"datePublished\":\"2015-07-06T15:01:39+00:00\",\"dateModified\":\"2020-06-25T08:31:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/\"},\"wordCount\":807,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-atom-packages\\\/colorpicker.jpg\",\"keywords\":[\"Atom\",\"Web Developers\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/\",\"name\":\"10 Most Useful Atom Packages for Web Developers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-atom-packages\\\/colorpicker.jpg\",\"datePublished\":\"2015-07-06T15:01:39+00:00\",\"dateModified\":\"2020-06-25T08:31:48+00:00\",\"description\":\"Have you tried Atom? Although it is quite new, many have fallen in love with Atom, a text editor made by GitHub that allows you to manage GitHub projects\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-atom-packages\\\/colorpicker.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-atom-packages\\\/colorpicker.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-atom-packages\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Most Useful Atom Packages for Web Developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Most Useful Atom Packages for Web Developers - Hongkiat","description":"Have you tried Atom? Although it is quite new, many have fallen in love with Atom, a text editor made by GitHub that allows you to manage GitHub projects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/","og_locale":"en_US","og_type":"article","og_title":"10 Most Useful Atom Packages for Web Developers","og_description":"Have you tried Atom? Although it is quite new, many have fallen in love with Atom, a text editor made by GitHub that allows you to manage GitHub projects","og_url":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-07-06T15:01:39+00:00","article_modified_time":"2020-06-25T08:31:48+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/colorpicker.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"10 Most Useful Atom Packages for Web Developers","datePublished":"2015-07-06T15:01:39+00:00","dateModified":"2020-06-25T08:31:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/"},"wordCount":807,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/colorpicker.jpg","keywords":["Atom","Web Developers"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/","url":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/","name":"10 Most Useful Atom Packages for Web Developers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/colorpicker.jpg","datePublished":"2015-07-06T15:01:39+00:00","dateModified":"2020-06-25T08:31:48+00:00","description":"Have you tried Atom? Although it is quite new, many have fallen in love with Atom, a text editor made by GitHub that allows you to manage GitHub projects","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/colorpicker.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/useful-atom-packages\/colorpicker.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/useful-atom-packages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Most Useful Atom Packages for Web Developers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6j9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24251"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24251\/revisions"}],"predecessor-version":[{"id":51528,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24251\/revisions\/51528"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24251"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}