421 lines
17 KiB
HTML
421 lines
17 KiB
HTML
<h1 id="awesome-atom-awesome">Awesome Atom <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p>A curated list of delightful Atom packages and resources. For more
|
||
awesomeness, check out <a
|
||
href="https://github.com/sindresorhus/awesome">awesome</a>.</p>
|
||
<h2 id="table-of-content">Table of Content</h2>
|
||
<ul>
|
||
<li><a href="#syntax">Syntax</a></li>
|
||
<li><a href="#lint">Lint</a></li>
|
||
<li><a href="#build">Build</a></li>
|
||
<li><a href="#extensions">Extensions</a>
|
||
<ul>
|
||
<li><a href="#nuclide">Nuclide</a></li>
|
||
</ul></li>
|
||
<li><a
|
||
href="http://enrmarc.github.io/atom-theme-gallery/">Themes</a></li>
|
||
<li><a href="#collaboration">Collaboration</a>
|
||
<ul>
|
||
<li><a href="#codesidestory">CodeSideStory</a></li>
|
||
</ul></li>
|
||
<li><a href="#uncategorized">Uncategorized</a>
|
||
<ul>
|
||
<li><a href="#nuclide">Nuclide</a></li>
|
||
<li><a href="#advanced-open-file">Advanced Open File</a></li>
|
||
<li><a href="#atom-reverser">Atom Reverser</a></li>
|
||
<li><a href="#atom-terminal">Atom Terminal</a></li>
|
||
<li><a href="#autocomplete-module-import">Autocomplete module
|
||
import</a></li>
|
||
<li><a href="#beautify">Beautify</a></li>
|
||
<li><a href="#code-peek">Code Peek</a></li>
|
||
<li><a href="#color-picker">Color Picker</a></li>
|
||
<li><a href="#copy-paste">Copy Paste</a></li>
|
||
<li><a href="#css-declaration-sorter">CSS Declaration Sorter</a></li>
|
||
<li><a href="#duplicate-selection">Duplicate Selection</a></li>
|
||
<li><a href="#editor-config">Editor Config</a></li>
|
||
<li><a href="#emmet">Emmet</a></li>
|
||
<li><a href="#file-icons">File Icons</a></li>
|
||
<li><a href="#fonts">Fonts</a></li>
|
||
<li><a href="#git-time-machine">Git Time Machine</a></li>
|
||
<li><a href="#html-to-css">html-to-css</a></li>
|
||
<li><a href="#imdone">iMDone</a></li>
|
||
<li><a href="#jumpy">Jumpy</a></li>
|
||
<li><a href="#merge-conflicts">Merge Conflicts</a></li>
|
||
<li><a href="#minimap">Minimap</a></li>
|
||
<li><a href="#pigments">Pigments</a></li>
|
||
<li><a href="#project-plus">Project Plus</a></li>
|
||
<li><a href="#sort-lines">Sort lines</a></li>
|
||
<li><a href="#sorter">Sorter</a></li>
|
||
<li><a href="#sync-settings">Sync Settings</a></li>
|
||
<li><a href="#platformio-ide-terminal">PlatformIO IDE Terminal</a></li>
|
||
<li><a href="#ternjs">TernJS</a></li>
|
||
<li><a href="#test-navigator">Test Navigator</a></li>
|
||
<li><a href="#themer">Themer</a></li>
|
||
<li><a href="#toggle-quotes">Toggle Quotes</a></li>
|
||
</ul></li>
|
||
</ul>
|
||
<h2 id="syntax">Syntax</h2>
|
||
<p>Language packages extend the editor with syntax highlighting and/or
|
||
snippets for a specific language or file format.</p>
|
||
<ul>
|
||
<li><a href="https://atom.io/packages/angularjs">Angular</a></li>
|
||
<li><a href="https://atom.io/packages/language-vue">Vue.js</a></li>
|
||
<li><a
|
||
href="https://atom.io/packages/language-docker">Dockerfile</a></li>
|
||
<li><a
|
||
href="https://atom.io/packages/language-markdown">Markdown</a></li>
|
||
<li><a href="https://atom.io/packages/react">React</a></li>
|
||
<li><a href="https://atom.io/packages/stylus">Stylus</a></li>
|
||
<li><a href="https://atom.io/packages/language-pug">Pug</a></li>
|
||
<li><a href="https://atom.io/packages/language-tcl">Tcl</a></li>
|
||
<li><a
|
||
href="https://atom.io/packages/atom-typescript">TypeScript</a></li>
|
||
</ul>
|
||
<h2 id="lint">Lint</h2>
|
||
<p>In case the awesome nirvana that is linting has not yet been
|
||
unleashed upon you: > lint was the name originally given to a
|
||
particular program that flagged some suspicious and non-portable
|
||
constructs (likely to be bugs) in C language source code. The term is
|
||
now applied generically to tools that flag suspicious usage in software
|
||
written in any computer language.</p>
|
||
<p>To enable linting, you’ll need the general <a
|
||
href="https://atom.io/packages/linter">linter</a> which provides the
|
||
interface for the provider plugins for specific languages. The full list
|
||
of current plugins can be found at <a
|
||
href="http://atomlinter.github.io/">atomlinter.github.io</a>, a few
|
||
examples being:</p>
|
||
<ul>
|
||
<li>C++
|
||
<ul>
|
||
<li><a
|
||
href="https://atom.io/packages/linter-clang">linter-clang</a></li>
|
||
<li><a
|
||
href="https://atom.io/packages/linter-cppcheck">linter-cppcheck</a></li>
|
||
<li><a href="https://atom.io/packages/linter-gcc">linter-gcc</a> -
|
||
on-the-fly linting!</li>
|
||
<li><a href="https://atom.io/packages/linter-cpplint">linter-cpplint</a>
|
||
- checks against google style guide</li>
|
||
</ul></li>
|
||
<li><a href="https://atom.io/packages/linter-stylelint">CSS</a> —
|
||
stylelint</li>
|
||
<li><a href="https://atom.io/packages/linter-eslint">JavaScript</a> —
|
||
eslint</li>
|
||
<li><a href="https://atom.io/packages/linter-pylama">Python</a> —
|
||
pylama</li>
|
||
<li><a href="https://atom.io/packages/linter-sass-lint">SASS</a> —
|
||
sass-lint</li>
|
||
<li><a href="https://atom.io/packages/linter-stylint">Stylus</a> —
|
||
stylint</li>
|
||
<li><a href="https://atom.io/packages/linter-tslint">TypeScript</a> -
|
||
tslint</li>
|
||
</ul>
|
||
<figure>
|
||
<img
|
||
src="https://camo.githubusercontent.com/70b6e697c9d793642414b4ea6d08dbb9678877b3/687474703a2f2f672e7265636f726469742e636f2f313352666d6972507a322e676966"
|
||
alt="atom-linter" />
|
||
<figcaption aria-hidden="true">atom-linter</figcaption>
|
||
</figure>
|
||
<h2 id="build">Build</h2>
|
||
<p>To enable building, you’ll need the general <a
|
||
href="https://atom.io/packages/build">build</a> which provides the
|
||
interface for the provider plugins for specific languages and adds
|
||
integrates with <a href="#lint">lint</a>. The full list of current
|
||
plugins can be found at <a
|
||
href="http://atombuild.github.io/">atombuild.github.io</a>, a few
|
||
examples being:</p>
|
||
<ul>
|
||
<li><a href="https://atom.io/packages/build-applescript">AppleScript</a>
|
||
— oscompile</li>
|
||
<li><a href="https://atom.io/packages/build-xcodebuild">C/C++/Objective
|
||
C</a> — xcodebuild</li>
|
||
<li><a href="https://atom.io/packages/build-coffee">CoffeeScript</a> -
|
||
coffee</li>
|
||
<li><a href="https://github.com/AtomBuild/atom-build-make">GNU Make</a>
|
||
- make</li>
|
||
<li><a href="https://atom.io/packages/build-sass">Sass</a> — sass</li>
|
||
<li><a href="https://atom.io/packages/build-tsc">TypeScript</a> -
|
||
tsc</li>
|
||
</ul>
|
||
<figure>
|
||
<img
|
||
src="https://camo.githubusercontent.com/ca10be645c7a2024dddc550466e67d692fb411ed/68747470733a2f2f6e6f7365676c69642e6769746875622e696f2f746172676574732d6d616b652e676966"
|
||
alt="atom-build" />
|
||
<figcaption aria-hidden="true">atom-build</figcaption>
|
||
</figure>
|
||
<h2 id="extensions">Extensions</h2>
|
||
<h4 id="nuclide"><a href="https://nuclide.io/">Nuclide</a></h4>
|
||
<blockquote>
|
||
<p>An open IDE for web and native mobile development, built on top of
|
||
Atom maintained by <a
|
||
href="https://github.com/facebook/nuclide">Facebook</a>.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://nuclide.io/static/images/docs/promo-hack.png" /></p>
|
||
<h2 id="collaboration">Collaboration</h2>
|
||
<h4 id="codesidestory"><a
|
||
href="https://atom.io/packages/codesidestory-atom">CodeSideStory</a></h4>
|
||
<blockquote>
|
||
<p>An Atom/Slack integration to start conversations about code right
|
||
from the editor. Record screens and archive it right next to the line
|
||
number to provide more context to your code.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://storage.googleapis.com/codesidestory/static/media/atom_ss.c29b4b0b.png" /></p>
|
||
<h2 id="uncategorized">Uncategorized</h2>
|
||
<h4 id="advanced-open-file"><a
|
||
href="https://atom.io/packages/advanced-open-file">Advanced Open
|
||
File</a></h4>
|
||
<blockquote>
|
||
<p>Helps Atom users to open files and folders easily. It can also
|
||
creates new files and folders if they don’t currently exist.</p>
|
||
</blockquote>
|
||
<p><img src="http://osmose.github.io/advanced-open-file/demo.gif" /></p>
|
||
<h4 id="atom-reverser"><a
|
||
href="https://atom.io/packages/atom-reverser">Atom Reverser</a></h4>
|
||
<blockquote>
|
||
<p>Reverses your current selections; e.g. <code>false</code> to
|
||
<code>true</code></p>
|
||
</blockquote>
|
||
<figure>
|
||
<img src="https://i.imgur.com/YawGVsN.gif"
|
||
alt="Atom Reverser in action" />
|
||
<figcaption aria-hidden="true">Atom Reverser in action</figcaption>
|
||
</figure>
|
||
<h4 id="atom-terminal"><a
|
||
href="https://atom.io/packages/atom-terminal">Atom Terminal</a></h4>
|
||
<blockquote>
|
||
<p>Launch terminal app on current file’s directory with “Ctrl-Shift-T”
|
||
in Atom.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://raw.githubusercontent.com/karan/atom-terminal/master/terminal.gif" /></p>
|
||
<h4 id="autocomplete-module-import"><a
|
||
href="https://atom.io/packages/autocomplete-module-import">Autocomplete
|
||
module import</a></h4>
|
||
<blockquote>
|
||
<p>Search & install npm packages from import/require statements by
|
||
<a href="https://www.algolia.com/">Algolia</a></p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://camo.githubusercontent.com/53350e9c6d303f60101e1644605fe62f529e45f2/687474703a2f2f672e7265636f726469742e636f2f643576695542385859372e676966" /></p>
|
||
<h4 id="beautify"><a
|
||
href="https://atom.io/packages/atom-beautify">Beautify</a></h4>
|
||
<blockquote>
|
||
<p><a href="https://github.com/beautify-web/js-beautify">Beautify</a>
|
||
HTML (including <a href="http://handlebarsjs.com/">Handlebars</a>), CSS
|
||
(including <a href="http://sass-lang.com/">Sass</a> and <a
|
||
href="http://lesscss.org/">LESS</a>), JavaScript, and much more in
|
||
Atom.</p>
|
||
</blockquote>
|
||
<h4 id="code-peek"><a href="https://atom.io/packages/code-peek">Code
|
||
Peek</a></h4>
|
||
<blockquote>
|
||
<p>Quickly peek and edit functions in separate files from the context of
|
||
your current editor.</p>
|
||
</blockquote>
|
||
<figure>
|
||
<img
|
||
src="https://github.com/DFreds/code-peek-atom/blob/master/code-peek.gif?raw=true"
|
||
alt="Code Peek Demo" />
|
||
<figcaption aria-hidden="true">Code Peek Demo</figcaption>
|
||
</figure>
|
||
<h4 id="color-picker"><a
|
||
href="https://atom.io/packages/color-picker">Color Picker</a></h4>
|
||
<blockquote>
|
||
<p>Color picker that supports HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV,
|
||
HSVa, VEC3, VEC4 – and is able to convert between the formats. It also
|
||
inspects Sass and LESS color variables.</p>
|
||
</blockquote>
|
||
<figure>
|
||
<img
|
||
src="https://github.com/thomaslindstrom/color-picker/raw/master/preview.gif"
|
||
alt="Color Picker in action" />
|
||
<figcaption aria-hidden="true">Color Picker in action</figcaption>
|
||
</figure>
|
||
<h4 id="copy-paste"><a href="https://atom.io/packages/copy-paste">Copy
|
||
Paste</a></h4>
|
||
<blockquote>
|
||
<p>Types in your code for your from the clipboard/buffer. Simply copy
|
||
the code and hit the shortcut to watch your code being typed. Copy paste
|
||
is ideal for screencasts and online courses.</p>
|
||
</blockquote>
|
||
<h4 id="css-declaration-sorter"><a
|
||
href="https://atom.io/packages/css-declaration-sorter">CSS Declaration
|
||
Sorter</a></h4>
|
||
<blockquote>
|
||
<p>Sorts your CSS, Less or Sass declarations in Atom, never gets tired.
|
||
You can choose from various ready-made orders to keep your CSS tidy.</p>
|
||
</blockquote>
|
||
<figure>
|
||
<img
|
||
src="https://github.com/Siilwyn/css-declaration-sorter-atom/raw/master/show-off.gif"
|
||
alt="CSS Declaration Sorter Demo" />
|
||
<figcaption aria-hidden="true">CSS Declaration Sorter Demo</figcaption>
|
||
</figure>
|
||
<h4 id="duplicate-selection"><a
|
||
href="https://atom.io/packages/duplicate-line-or-selection">Duplicate
|
||
Selection</a></h4>
|
||
<blockquote>
|
||
<p>Duplicates the selection if there is one, otherwise, duplicates the
|
||
line.</p>
|
||
</blockquote>
|
||
<h4 id="editor-config"><a
|
||
href="https://atom.io/packages/editorconfig">Editor Config</a></h4>
|
||
<blockquote>
|
||
<p><a href="http://editorconfig.org">EditorConfig</a> helps developers
|
||
maintain consistent coding styles between different editors</p>
|
||
</blockquote>
|
||
<figure>
|
||
<img
|
||
src="https://f.cloud.github.com/assets/170270/2327994/dfe40cb4-a3f6-11e3-862f-894999973373.png"
|
||
alt="atom-editor-config" />
|
||
<figcaption aria-hidden="true">atom-editor-config</figcaption>
|
||
</figure>
|
||
<h4 id="emmet"><a href="https://atom.io/packages/emmet">Emmet</a></h4>
|
||
<blockquote>
|
||
<p>Plugin which greatly improves HTML and CSS writing. Shortcuts can
|
||
expand to complete set of HTML or CSS selectors.</p>
|
||
</blockquote>
|
||
<h4 id="file-icons"><a href="https://atom.io/packages/file-icons">File
|
||
Icons</a></h4>
|
||
<blockquote>
|
||
<p>Adds file specific icons to atom for improved visual grepping. Works
|
||
with Tree View and Fuzzy Finder and Tabs.</p>
|
||
</blockquote>
|
||
<h4 id="fonts"><a href="https://atom.io/packages/fonts">Fonts</a></h4>
|
||
<blockquote>
|
||
<p>Lots of monospace fonts.</p>
|
||
</blockquote>
|
||
<h4 id="git-time-machine"><a
|
||
href="https://atom.io/packages/git-time-machine">Git Time
|
||
Machine</a></h4>
|
||
<blockquote>
|
||
<p>It shows visual plot of commits to the current file over time and you
|
||
can click on it on the timeplot or hover over the plot and see all of
|
||
the commits for a time range.</p>
|
||
</blockquote>
|
||
<figure>
|
||
<img
|
||
src="https://i.github-camo.com/62085307dccead1c2f5efdf4d7a40f9cdb777b93/68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f6c6974746c656265652f6769742d74696d652d6d616368696e652f6d61737465722f7265736f75726365732f74696d656d616368696e652e676966"
|
||
alt="git-time-machine" />
|
||
<figcaption aria-hidden="true">git-time-machine</figcaption>
|
||
</figure>
|
||
<h4 id="html-to-css"><a
|
||
href="https://atom.io/packages/html-to-css">html-to-css</a></h4>
|
||
<blockquote>
|
||
<p>Generates CSS boilerplate based on the selected HTML. Supports CSS,
|
||
SCSS, Sass, LESS, BEM, JSX.</p>
|
||
</blockquote>
|
||
<figure>
|
||
<img
|
||
src="https://camo.githubusercontent.com/b164c4b7b244006a7bcf7442d8c4b0812e4edcd0/687474703a2f2f64726163756c2e6b696c6c2e706c2f2537456172642f68746d6c746f6373732e676966"
|
||
alt="html-to-css" />
|
||
<figcaption aria-hidden="true">html-to-css</figcaption>
|
||
</figure>
|
||
<h4 id="imdone"><a
|
||
href="https://atom.io/packages/imdone-atom">iMDone</a></h4>
|
||
<blockquote>
|
||
<p>A task-board for TODOs, FIXMEs, HACKs, etc in your code.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://cloud.githubusercontent.com/assets/441774/9805863/757d5532-5814-11e5-8759-4196bd92c822.gif" /></p>
|
||
<h4 id="jumpy"><a href="https://atom.io/packages/jumpy">Jumpy</a></h4>
|
||
<blockquote>
|
||
<p>An Atom package that creates dynamic hotkeys to jump around files
|
||
across visible panes.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://raw.githubusercontent.com/DavidLGoldberg/jumpy/master/_images/jumpy.gif" /></p>
|
||
<h4 id="merge-conflicts"><a
|
||
href="https://atom.io/packages/merge-conflicts">Merge Conflicts</a></h4>
|
||
<blockquote>
|
||
<p>Resolve your git merge conflicts in Atom.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://raw.github.com/smashwilson/merge-conflicts/master/docs/conflict-resolution.gif" /></p>
|
||
<h4 id="minimap"><a
|
||
href="https://atom.io/packages/minimap">Minimap</a></h4>
|
||
<blockquote>
|
||
<p>A preview of the full source code.</p>
|
||
</blockquote>
|
||
<h4 id="pigments"><a
|
||
href="https://atom.io/packages/pigments">Pigments</a></h4>
|
||
<blockquote>
|
||
<p>A package to display colors in project and files.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="http://abe33.github.io/atom-pigments/pigments.gif?raw=true" /></p>
|
||
<h4 id="project-plus"><a
|
||
href="https://atom.io/packages/project-plus">Project Plus</a></h4>
|
||
<blockquote>
|
||
<p>Simply awesome project management in Atom.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://raw.githubusercontent.com/mehcode/atom-project-plus/master/project-plus.gif" /></p>
|
||
<h4 id="sort-lines"><a href="https://atom.io/packages/sort-lines">Sort
|
||
Lines</a></h4>
|
||
<blockquote>
|
||
<p>Sorts your lines. Never gets tired.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://camo.githubusercontent.com/59de82a667ea690b778abaa5ba8a407f8659ebb3/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323938382f313739363839312f38356536396666322d366139332d313165332d383961632d3331393237663630343539322e676966" /></p>
|
||
<h4 id="sorter"><a
|
||
href="https://atom.io/packages/sorter">Sorter</a></h4>
|
||
<blockquote>
|
||
<p>Sorts Lines, JSON, CSS, HTML, CSV. Restores semicolons. Respects
|
||
indentation. Supports natural sort.</p>
|
||
</blockquote>
|
||
<h4 id="sync-settings"><a
|
||
href="https://atom.io/packages/sync-settings">Sync Settings</a></h4>
|
||
<blockquote>
|
||
<p>Synchronize package settings, keymap and installed packages across
|
||
Atom instances.</p>
|
||
</blockquote>
|
||
<h4 id="platformio-ide-terminal"><a
|
||
href="https://atom.io/packages/platformio-ide-terminal">PlatformIO IDE
|
||
Terminal</a></h4>
|
||
<blockquote>
|
||
<p>A terminal package for Atom, complete with themes, API and more for
|
||
PlatformIO IDE. This is a maintained (as of 2017-07-13) fork of
|
||
terminal-plus.</p>
|
||
</blockquote>
|
||
<p><img
|
||
src="https://raw.githubusercontent.com/jeremyramin/terminal-plus/master/resources/demo.gif" /></p>
|
||
<h4 id="ternjs"><a
|
||
href="https://atom.io/packages/atom-ternjs">TernJS</a></h4>
|
||
<blockquote>
|
||
<p>Javascript code intelligence for atom with tern.js and
|
||
autocomplete-plus.</p>
|
||
</blockquote>
|
||
<h3 id="test-navigator"><a
|
||
href="https://atom.io/packages/test-navigator">Test Navigator</a></h3>
|
||
<blockquote>
|
||
<p>Quickly navigate between test and implementation files.</p>
|
||
</blockquote>
|
||
<figure>
|
||
<img
|
||
src="https://github.com/DFreds/test-navigator-atom/blob/master/test-navigator.gif?raw=true"
|
||
alt="Test Navigator Demo" />
|
||
<figcaption aria-hidden="true">Test Navigator Demo</figcaption>
|
||
</figure>
|
||
<h4 id="themer"><a href="https://themer.mjswensen.com">Themer</a></h4>
|
||
<blockquote>
|
||
<p>Generate Atom syntax/UI theme packages (and matching themes for your
|
||
other tools) from your favorite colors.</p>
|
||
</blockquote>
|
||
<h4 id="toggle-quotes"><a
|
||
href="https://atom.io/packages/toggle-quotes">Toggle Quotes</a></h4>
|
||
<blockquote>
|
||
<p>Quickly toggle between single and double quotes.</p>
|
||
</blockquote>
|
||
<h4 id="tree-view-search-bar"><a
|
||
href="https://atom.io/packages/tree-view-search-bar">Tree View Search
|
||
Bar</a></h4>
|
||
<blockquote>
|
||
<p>Quick look in tree view.</p>
|
||
</blockquote>
|
||
<p><a href="https://github.com/mehcode/awesome-atom">atom.md
|
||
Github</a></p>
|