Atom Plugins

[mikeerickson]

Hey Kent

Really like your suite of videos covering many different topics. One thing that I am curious about is what plugins (or key workflows) you use with Atom?

Thanks in advance :)
Mike Erickson

[kentcdodds]

Thanks for the question! Here's the list of my current plugins!

• https://atom.io/packages/autocomplete-emojis
• https://atom.io/packages/autocomplete-json
• https://atom.io/packages/autocomplete-modules
• https://atom.io/packages/custom-invisibles
• https://atom.io/packages/editorconfig
• https://atom.io/packages/file-icons
• https://atom.io/packages/language-babel
• https://atom.io/packages/linter
• https://atom.io/packages/linter-eslint
• https://atom.io/packages/open-this
• https://atom.io/packages/relative-numbers
• https://atom.io/packages/terminal-plus
• https://atom.io/packages/vim-mode

[mxstbr]

My favorites:

• atom-ternjs (autocomplete for function names, variables etc.)
• base16-ocean-dark-spacegray (theme)
• docblockr (quick JSDoc style comments)
• linter-alex (Linting for prose)
• linter-write-good (More linting for prose)
• open-recent (Open recent files like Sublime for menu bar)
• sync-settings (Sync settings to Github)
• synced-sidebar (Sync the open file to sidebar)

[ansballard]

• local-history
• minimap
  • linter
  • selection
  • autohide
• pigments
• atom-beautify

Will link when I'm not on mobile :)

[cliffordfajardo]

General Purpose Packages:

• Atom beautify
• Atom like brackets editor
• Atom runner
• Autocomplete project paths
• Atom live server
• Browser plus
• Editorconfig
• File icons
• Filesize
• Git clone
• Git plus
• Git time machine
• Highlight line
• Highlight selected
• Jumpy
• Split diff
• Set syntax
• Linter
• Merge conflicts
• Open in browser
• Open terminal here
• Pane layout plus
• Sync Setting
• Terminal plus
• REST client

Web development related packages:

• Atom json color
• Autoclose html
• Autoprefixer
• Atom Ternjs
• Color picker
• CSS clean
• CSS specificity
• Emmet
• Linter htmlhint
• Linter jshint
• Linter csslint
• Linter jsonlint
• Livestyle Atom
• Pigments
• Turbo Javascript

I made a video with most of these packages: https://www.youtube.com/watch?v=cFAzqvYoHJs

[kentcdodds]

Here's an update of my plugins today:

[rahulpsingh]

Thanks. This is very helpful for me.

[kentcdodds]

Just added another that's fantastic: https://atom.io/packages/expand-region

[kentcdodds]

Here's an updated list:

~
🍰  $ apm list
Built-in Atom Packages (89)
├── atom-dark-syntax@0.27.0
├── atom-dark-ui@0.52.0
├── atom-light-syntax@0.28.0
├── atom-light-ui@0.44.0
├── base16-tomorrow-dark-theme@1.2.0
├── base16-tomorrow-light-theme@1.2.0
├── one-dark-ui@1.6.0
├── one-light-ui@1.6.0
├── one-dark-syntax@1.3.0
├── one-light-syntax@1.3.0
├── solarized-dark-syntax@1.0.2
├── solarized-light-syntax@1.0.2
├── about@1.7.0
├── archive-view@0.61.1
├── autocomplete-atom-api@0.10.0
├── autocomplete-css@0.11.2
├── autocomplete-html@0.7.2
├── autocomplete-plus@2.31.1
├── autocomplete-snippets@1.11.0
├── autoflow@0.27.0
├── autosave@0.23.1
├── background-tips@0.26.1
├── bookmarks@0.42.0
├── bracket-matcher@0.82.1
├── command-palette@0.38.0
├── deprecation-cop@0.54.1
├── dev-live-reload@0.47.0
├── encoding-selector@0.22.0
├── exception-reporting@0.40.0
├── find-and-replace@0.201.1
├── fuzzy-finder@1.4.0
├── git-diff@1.1.0
├── go-to-line@0.31.0
├── grammar-selector@0.48.2
├── image-view@0.59.0
├── incompatible-packages@0.26.1
├── keybinding-resolver@0.35.0
├── line-ending-selector@0.5.0
├── link@0.31.1
├── markdown-preview@0.158.0
├── metrics@1.0.0
├── notifications@0.65.1
├── open-on-github@1.2.0
├── package-generator@1.0.0
├── settings-view@0.242.2
├── snippets@1.0.2
├── spell-check@0.68.2
├── status-bar@1.4.1
├── styleguide@0.47.0
├── symbols-view@0.113.1
├── tabs@0.101.0
├── timecop@0.33.2
├── tree-view@0.209.3
├── update-package-dependencies@0.10.0
├── welcome@0.35.1
├── whitespace@0.33.0
├── wrap-guide@0.38.2
├── language-c@0.52.1
├── language-clojure@0.21.0
├── language-coffee-script@0.47.2
├── language-csharp@0.12.1
├── language-css@0.37.1
├── language-gfm@0.88.0
├── language-git@0.15.0
├── language-go@0.42.1
├── language-html@0.45.1
├── language-hyperlink@0.16.0
├── language-java@0.23.0
├── language-javascript@0.119.0
├── language-json@0.18.2
├── language-less@0.29.5
├── language-make@0.22.2
├── language-mustache@0.13.0
├── language-objective-c@0.15.1
├── language-perl@0.35.0
├── language-php@0.37.2
├── language-property-list@0.8.0
├── language-python@0.45.0
├── language-ruby@0.69.0
├── language-ruby-on-rails@0.25.0
├── language-sass@0.56.0
├── language-shellscript@0.22.4
├── language-source@0.9.0
├── language-sql@0.23.0
├── language-text@0.7.1
├── language-todo@0.28.0
├── language-toml@0.18.0
├── language-xml@0.34.9
└── language-yaml@0.26.0

Community Packages (22) /Users/kdodds/.atom/packages
├── atom-ternjs@0.15.0
├── autocomplete-emojis@2.5.0
├── autocomplete-json@5.1.0
├── autocomplete-modules@1.6.7
├── custom-invisibles@0.1.2
├── docblockr@0.8.7
├── editorconfig@1.4.1
├── expand-region@0.2.5
├── file-icons@1.7.21
├── highlight-selected@0.11.2
├── hyperclick@0.0.39
├── js-hyperclick@1.8.1
├── language-babel@2.44.1
├── language-json5@1.1.0
├── linter@1.11.18
├── linter-eslint@8.0.0
├── linter-flow@5.5.0
├── local-history@3.4.1
├── open-this@0.2.0
├── relative-numbers@0.5.1
├── terminal-plus@0.14.5
└── vim-mode-plus@0.60.0

└── (empty)

[suhasdeshpande]

Great. Exactly what I was going to ask. Also what's your configuration on terminal? Do you use iterm with oh-my-zsh?

[kentcdodds]

@suhasdeshpande, that sounds like a great question for another issue on my AMA ;-)

[kentcdodds]

Here's an updated list (you probably mostly care about the community packages at the bottom:

~
😄  $ apm list
Built-in Atom Packages (89)
├── atom-dark-syntax@0.28.0
├── atom-dark-ui@0.53.0
├── atom-light-syntax@0.29.0
├── atom-light-ui@0.46.0
├── base16-tomorrow-dark-theme@1.5.0
├── base16-tomorrow-light-theme@1.5.0
├── one-dark-ui@1.9.1
├── one-light-ui@1.9.1
├── one-dark-syntax@1.7.1
├── one-light-syntax@1.7.1
├── solarized-dark-syntax@1.1.2
├── solarized-light-syntax@1.1.2
├── about@1.7.2
├── archive-view@0.62.2
├── autocomplete-atom-api@0.10.0
├── autocomplete-css@0.15.0
├── autocomplete-html@0.7.2
├── autocomplete-plus@2.34.2
├── autocomplete-snippets@1.11.0
├── autoflow@0.29.0
├── autosave@0.24.0
├── background-tips@0.26.1
├── bookmarks@0.44.1
├── bracket-matcher@0.85.2
├── command-palette@0.40.1
├── deprecation-cop@0.56.2
├── dev-live-reload@0.47.0
├── encoding-selector@0.23.1
├── exception-reporting@0.41.0
├── find-and-replace@0.206.3
├── fuzzy-finder@1.4.1
├── git-diff@1.3.1
├── go-to-line@0.32.0
├── grammar-selector@0.49.1
├── image-view@0.60.0
├── incompatible-packages@0.26.1
├── keybinding-resolver@0.36.1
├── line-ending-selector@0.6.1
├── link@0.31.2
├── markdown-preview@0.159.6
├── metrics@1.1.3
├── notifications@0.66.2
├── open-on-github@1.2.1
├── package-generator@1.1.0
├── settings-view@0.247.0
├── snippets@1.0.5
├── spell-check@0.70.2
├── status-bar@1.8.1
├── styleguide@0.49.2
├── symbols-view@0.114.0
├── tabs@0.104.1
├── timecop@0.34.0
├── tree-view@0.214.1
├── update-package-dependencies@0.10.0
├── welcome@0.36.0
├── whitespace@0.36.2
├── wrap-guide@0.39.0
├── language-c@0.56.0
├── language-clojure@0.22.2
├── language-coffee-script@0.48.5
├── language-csharp@0.14.2
├── language-css@0.42.0
├── language-gfm@0.88.1
├── language-git@0.19.0
├── language-go@0.43.1
├── language-html@0.47.2
├── language-hyperlink@0.16.1
├── language-java@0.26.0
├── language-javascript@0.126.1
├── language-json@0.18.3
├── language-less@0.30.1
├── language-make@0.22.3
├── language-mustache@0.13.1
├── language-objective-c@0.15.1
├── language-perl@0.37.0
├── language-php@0.37.4
├── language-property-list@0.9.0
├── language-python@0.45.2
├── language-ruby@0.70.5
├── language-ruby-on-rails@0.25.2
├── language-sass@0.57.1
├── language-shellscript@0.25.0
├── language-source@0.9.0
├── language-sql@0.25.3
├── language-text@0.7.1
├── language-todo@0.29.1
├── language-toml@0.18.1
├── language-xml@0.34.16
└── language-yaml@0.28.0

Community Packages (28) /Users/kdodds/.atom/packages
├── atom-ternjs@0.18.2
├── autocomplete-emojis@2.5.0
├── autocomplete-json@5.4.0
├── autocomplete-modules@1.6.8
├── busy-signal@1.3.0
├── custom-invisibles@0.1.2
├── docblockr@0.9.4
├── expand-region@0.2.6
├── file-icons@2.1.1
├── highlight-selected@0.13.1
├── hyperclick@0.0.40
├── intentions@1.1.2
├── js-hyperclick@1.10.1
├── language-babel@2.57.1
├── language-dustjs@0.3.0
├── language-json5@1.1.0
├── linter@2.1.2
├── linter-eslint@8.1.4
├── linter-flow@5.5.1
├── linter-jsonlint@1.3.0
├── linter-ui-default@1.2.2
├── local-history@4.0.1
├── open-this@0.4.0
├── prettier-atom@0.24.0
├── project-manager@3.3.4
├── relative-numbers@0.7.1
├── split-guide-atom@1.0.0
└── vim-mode-plus@0.85.1

[mohitgarg]

@kentcdodds Installing so many plugins really impacted the performance on my editor. It freezes sometimes and becomes sluggish while working. Does this happen with you as well or is it just me? And what would you do in this situation?

[kentcdodds]

Really just depends on the plugins you're using. Not sure what to tell you other than removing the ones you don't use often and evaluating everything else for performance impact. If you really want it then contribute back to make it fast :)

[ansballard]

Good way to find the plugins that are slowing you down is the Timecop feature in Atom. Either Ctrl+Shift+P > Timecop or Packages > Timecop > Show. Also a good way to make sure your own plugins don't crawl without reason =)

[mohitgarg]

@kentcdodds I think you may have more plugins installed then me 😀. I have around 20 plugins only the ones that make the workflow easy. I evaluated the performance impact after uninstalling every plugin and it was working as fast as sublime. Would you recommend any other editor? I have been messing around with VSC and Webstorm.

@ansballard Windows load time is around 26789ms with plugins. Was only 100ms without plugins when I did the performance check

[kentcdodds]

Number of plugins matter much less than what the plugins are doing. My load time is definitely NOT 26 seconds. My guess is you have one or two plugins that are just doing some really bad things...

I'm not certain, but I might try VSCode if it's vim mode plugin was anywhere near as good as vim-mode-plus in atom.

[mohitgarg]

@kentcdodds Thanks. Really appreciate the response

[peterschussheim]

@kentcdodds what is the color theme you use in the recent Frontend Masters Testing JavaScript Applications series? Thank you in advance.

[kentcdodds]

It's called "One Light" and I'm pretty sure they're built-in :)

[OliverCole]

@kentcdodds Thanks for the list - I've got it all installed... but I can't replicate what you're seeing in the egghead.io course.

Is the list up to date, or do I need to toggle an autocomplete setting somewhere?

[kentcdodds]

Here's the updated list:

~
🏎  $ apm list
Built-in Atom Packages (92)
├── atom-dark-syntax@0.29.0
├── atom-dark-ui@0.53.2
├── atom-light-syntax@0.29.0
├── atom-light-ui@0.46.2
├── base16-tomorrow-dark-theme@1.5.0
├── base16-tomorrow-light-theme@1.5.0
├── one-dark-ui@1.11.0
├── one-light-ui@1.11.0
├── one-dark-syntax@1.8.2
├── one-light-syntax@1.8.2
├── solarized-dark-syntax@1.1.4
├── solarized-light-syntax@1.1.4
├── about@1.8.0
├── archive-view@0.64.3
├── autocomplete-atom-api@0.10.7
├── autocomplete-css@0.17.5
├── autocomplete-html@0.8.4
├── autocomplete-plus@2.40.5
├── autocomplete-snippets@1.12.0
├── autoflow@0.29.3
├── autosave@0.24.6
├── background-tips@0.28.0
├── bookmarks@0.45.1
├── bracket-matcher@0.89.1 (disabled)
├── command-palette@0.43.5
├── dalek@0.2.2
├── deprecation-cop@0.56.9
├── dev-live-reload@0.48.1
├── encoding-selector@0.23.8
├── exception-reporting@0.43.1
├── find-and-replace@0.215.5
├── fuzzy-finder@1.8.1
├── github@0.12.0
├── git-diff@1.3.9
├── go-to-line@0.33.0
├── grammar-selector@0.50.0
├── image-view@0.62.4
├── incompatible-packages@0.27.3
├── keybinding-resolver@0.38.1
├── line-ending-selector@0.7.5
├── link@0.31.4
├── markdown-preview@0.159.20
├── metrics@1.2.6
├── notifications@0.70.5
├── open-on-github@1.3.1
├── package-generator@1.3.0
├── settings-view@0.254.2
├── snippets@1.3.2
├── spell-check@0.73.3
├── status-bar@1.8.15
├── styleguide@0.49.10
├── symbols-view@0.118.2
├── tabs@0.109.1
├── timecop@0.36.2
├── tree-view@0.221.3
├── update-package-dependencies@0.13.1
├── welcome@0.36.6
├── whitespace@0.37.5
├── wrap-guide@0.40.3
├── language-c@0.59.3
├── language-clojure@0.22.7
├── language-coffee-script@0.49.3
├── language-csharp@1.0.1
├── language-css@0.42.10
├── language-gfm@0.90.3
├── language-git@0.19.1
├── language-go@0.45.3
├── language-html@0.49.0 (disabled)
├── language-hyperlink@0.16.3
├── language-java@0.29.0
├── language-javascript@0.128.5
├── language-json@0.19.1
├── language-less@0.34.2
├── language-make@0.22.3
├── language-mustache@0.14.5
├── language-objective-c@0.15.1
├── language-perl@0.38.1
├── language-php@0.43.2
├── language-property-list@0.9.1
├── language-python@0.49.4
├── language-ruby@0.71.4
├── language-ruby-on-rails@0.25.3
├── language-sass@0.61.4
├── language-shellscript@0.26.3
├── language-source@0.9.0
├── language-sql@0.25.10
├── language-text@0.7.4
├── language-todo@0.29.4
├── language-toml@0.18.2
├── language-typescript@0.3.3
├── language-xml@0.35.2
└── language-yaml@0.32.0

Community Packages (38) /Users/kdodds/.atom/packages
├── atom-formatter-jsbeautify@1.1.2 (disabled)
├── atom-ternjs@0.18.3
├── autocomplete-emojis@2.5.0
├── autocomplete-json@5.5.2
├── autocomplete-modules@2.0.0
├── busy-signal@1.4.3
├── css-in-js@1.4.0
├── custom-invisibles@0.1.2
├── docblockr@0.13.7
├── expand-region@0.4.0
├── file-icons@2.1.19
├── file-types@0.5.5
├── formatter@2.12.4
├── glam-atom@2.0.0
├── highlight-selected@0.13.1
├── hyperclick@0.1.5
├── intentions@1.1.5
├── js-hyperclick@1.13.0
├── language-babel@2.84.0
├── language-dustjs@0.3.0
├── language-html-babel@0.49.2
├── language-json5@1.1.1
├── language-reason@0.0.4
├── linter@2.2.0
├── linter-eslint@8.4.1
├── linter-flow@5.6.1
├── linter-jsonlint@1.3.0
├── linter-ui-default@1.7.1
├── local-history@4.3.1
├── ocaml-merlin@0.14.4
├── open-this@0.5.0
├── prettier-atom@0.53.0
├── project-manager@3.3.5
├── reason-refmt@0.3.3
├── relative-numbers@0.9.0
├── sort-lines@0.18.0
├── split-guide-atom@1.0.0
└── vim-mode-plus@1.32.0

I'm pretty sure you're probably missing this one:

language-html-babel

[OliverCole]

That wasn't immediately it - I cleared out all my other plugins and it did start working. If I can work out the conflict I'll open a bug in the right repo, but it's not likely. Thanks!