Atom for Web Developer
Useful Packages and Configuration for a better Workflow
Packages
- advanced-open-file - Open and create files and directories easily.
- ascii-art - Show ascii string with ascii image
- atom-beautify - Beautify HTML, CSS, JavaScript, PHP, TypeScript ...
- atom-chai-snippets - Full completions for the Chai Assertion Library
- atom-css-comb - CSScomb is a coding style formatter for CSS (LESS|SASS|SCSS).
- atom-image-resize - A resize tool for image files and Base64 encoded images.
- atom-ternjs - Adds support for ES5, ES6 (JavaScript 2015), Node.js, jQuery & Angular.
- atom-typescript - The only TypeScript plugin you will ever need.
- auto-detect-indentation - Automatically detect indentation of opened files.
- autoclose-html - Automates closing of HTML Tags
- autocomplete-json - Atom autocomplete+ plugin for semantic JSON completions
- autocomplete-modules - Autocomplete for require/import statements
- autoprefixer - Prefix CSS and SCSS
- browser-plus - Browser inside of Atom
- color-picker - A Color Picker for Atom
- editorconfig - Helps developers maintain consistent coding styles between different editors
- emmet - Emmet plugin Atom editor
- file-icons - Assign file extension icons and colours for improved visual grepping
- git-plus - Do git things without the terminal
- highlight-line - Highlights the current line in the editor
- highlight-selected - Highlights the current word selected when double clicking
- html-entities - Encode and decode HTML entities
- imdone-atom - A hackable task-board for TODOs, FIXMEs, HACKs, etc in your code.
- javascript-snippets - JavaScript & NodeJS Snippets for Atom
- json-colorer - Get your JSON colored even if your theme doesn't do it
- jsonlint - JSON Lint reports for your Atom editor
- keybinding-cheatsheet - Quickly view and filter atom keybindings.
- language-babel - Babel JavaScript ES201x, React JSX & Flow Grammar & Transpiler
- language-nunjucks - Syntax highlighting for nunjucks templates in atom.
- linter-csslint - Lint CSS on the fly, using csslint
- linter-eslint - Lint JavaScript on the fly, using ESLint
- linter-js-standard - Linter plugin for JavaScript Standard Style
- linter-less - Lint
less
on the fly, using less - linter-scss-lint - Lint SCSS on the fly, using scss-lint
- linter-shellcheck - Lint Bash on the fly, using shellcheck
- linter-tidy - Linter plugin for HTML, using tidy
- linter-tslint - Linter plugin for Typescript, using tslint
- linter - A Base Linter with Cow Powers
- local-server-express - serve the current project and open browser.
- markdown-preview-plus - Markdown Preview + Community Features
- markdown-scroll-sync - Auto-scroll markdown-preview tab to match markdown source
- markdown-toc - Generate table of contents from headlines
- markdown-writer - Make Atom a better Markdown editor and an easier static blogging tool.
- merge-conflicts - Resolve git conflicts within Atom
- mocha-test-runner - Run Mocha tests from within Atom
- mocha - Mocha integrated within atom
- multi-cursor - Atom package to expand your current cursor.
- node-debugger - Debugger For Nodejs
- nuclide - Nuclide is a collection of features for Atom to provide IDE-like functionality.
- open-recent - Open recent files in the current window.
- open-unsupported-files - open unsupported files with their default programm
- pigments - A package to display colors in project and files.
- platformio-ide-terminal - A terminal package for Atom.
- pretty-json - Format JSON
- project-manager - Project Manager for easy access and switching between projects in Atom.
- project-viewer - Project viewer/manager
- react - React.js (JSX) language support, indentation, snippets, auto completion, reformatting
- react - React.js (JSX) language support, indentation, snippets, auto completion, reformatting
- remote-ftp - Enable browsing remote FTP/FTPS/SFTP.
- rest-client - A simple REST client for your favorite editor
- sass-autocompile - Automatically compiles SASS files on save.
- script - Run code in Atom.
- sort-lines - Sorts your lines. Never gets tired.
- standard-formatter - Format file contents using JavaScript Standard Style
- standardjs-snippets - A collection of JavaScript snippets for Atom, StandardJS Style
- sync-settings - Synchronize settings, keymaps, user styles, init script, snippets ...
- tidy-markdown - Fix ugly markdown.
- timecop - Show where Atom spends time
- vim-mod - Add vim modal control
- zen - Distraction free writing.
Search by Downloads, Stars
One thing i was missing and bothered me a lot was that i could not sort packages or themes by most stars / downloads. I don't know why they did't add this option but there is a way you still can get these infos:
- Packages by Downloads: https://atom.io/packages/list?direction=desc&sort=downloads
- Packages by Stars: https://atom.io/packages/list?direction=desc&sort=stars
- Themes by Download: https://atom.io/themes/list?direction=desc&sort=downloads
- Themes by Stars: https://atom.io/themes/list?direction=desc&sort=stars
Useful Links for Packages Configuration
- ESLint Configuartion: http://rapilabs.github.io/eslintrc-generator/
- TernJS Manual: http://ternjs.net/doc/manual.html
- Gist Setup for sync-settings: https://github.com/atom-community/sync-settings
Install Dependencies for some Plugins
- linter-tidy =>
brew install tidy-html5
- linter-shellcheck =>
brew install shellcheck
Setup for JavaScript Standard Style
- JavaScript Standard - Official Website
- atom-ternjs - Adds support for ES5, ES6 (JavaScript 2015), Node.js, jQuery & Angular.
- linter-js-standard - Linter plugin for JavaScript Standard Style
- standard-formatter - Format file contents using JavaScript Standard Style
- standardjs-snippets - A collection of JavaScript snippets for Atom, StandardJS Style
- Install Dependencies:
brew install -g eslint eslint-plugin-standard eslint-plugin-promise eslint-config-standard
Batches:
[![JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
Uninstall some default Plugins (Tracking / Crash Reporting)
- metrics - A package that reports usage information to Google Analytics.
- exception-reporting - Reports uncaught Atom exceptions to bugsnag.com
Disable Google Analytics Tracking
- atom-beautify - Go to Settings -> General ->
Analytics UserId
(delete it) and uncheckAnonymous Analytics
Themes
- atom-material-ui - A dark UI theme for Atom that follows Google's Material Design Guidelines
- atom-material-syntax - A dark syntax theme for Atom that uses Google's Material Design color palette
- chester-atom-syntax - A pretty Atom syntax theme based on Lonely Planet colours
- monokai-seti - A monokai theme for the seti ui
- seti-ui-beta - Beta release(s) for next version of Seti UI theme for Atom.
nice looking: Ui Theme: Seti Ui / Syntax: Monokai Seti
Fonts
Download and install powerline-fonts for a nicer Shell experience.
Then change the font settings in your terminal plugin for example to "Roboto Mono for Powerline".
SSHFS
If you work a lot with remote files its worth having a look for sshfs.
It allows you to mount a remote connection like a normal network share.
Export your Packages List
-
apm list --installed --bare > packages.list
- exports a list with all your packages
Info form Atom Beta Users: replace apm
with apm-beta
.
Clean Uninstall
After uninstalling Atom there are still your programm settings, configurations and other stuff left on your system.
To get ride of it and start fresh you can run these commands:
#!/usr/bin/env bash
rm -rf ~/.atom
rm -rf /usr/local/bin/atom
rm -rf /usr/local/bin/apm
rm -rf /Applications/Atom.app
rm -rf ~/Library/Preferences/com.github.atom.plist
rm -rf ~/Library/Application Support/com.github.atom.ShipIt
rm -rf ~/Library/Application Support/Atom
rm -rf ~/Library/Saved Application State/com.github.atom.savedState
rm -rf ~/Library/Caches/com.github.atom
rm -rf ~/Library/Caches/Atom
Updating
apm clean
apm update --no-confirm
apm upgrade --no-confirm
Keybinding Resolver
After installing new packages chances are good that some of them use the same keybindings.
To solve this problem and define which one Atom should use you can can go to: Packages -> Keybinding Resolver -> Toogle
. When you press now the Shortcut you can see who is using them and change the behavior.
Keybindings
To overwrite the default keybindings or create a new once you can define them in ~/.atom/keymap.cson
:
Keybinding Examples:
'atom-text-editor':
# beautify
'cmd-alt-n': 'atom-beautify:beautify-editor'
# auto-ident line
'cmd-alt-m': 'editor:auto-indent'
# comment
'cmd-alt-c': 'editor:toggle-line-comments'
# markdown preview
'ctrl-shift-M': 'markdown-preview-plus:toggle'
# zen mode
'ctrl-shift-Z': 'zen:toggle'
# linter toggle
'ctrl-shift-L': 'linter:togglePanel'
# autocomplete
'atom-text-editor.autocomplete-active':
'pageup': 'autocomplete-plus:page-up'
'pagedown': 'autocomplete-plus:page-down'
# terminal
'.terminal':
'cmd-c': 'core:copy'
'cmd-v': 'core:paste'
In this article you can read more about Keymaps In-Depth.
Atom Hacking
___ _ _ _ _ _
/ _ \| | | | | | | | (_)
/ /_\ \ |_ ___ _ __ ___ | |_| | __ _ ___| | ___ _ __ __ _
| _ | __/ _ \| '_ ` _ \ | _ |/ _` |/ __| |/ / | '_ \ / _` |
| | | | || (_) | | | | | | | | | | (_| | (__| <| | | | | (_| |
\_| |_/\__\___/|_| |_| |_| \_| |_/\__,_|\___|_|\_\_|_| |_|\__, |
__/ |
|___/
Info: The Atom Hacking Part is still in development - new stuff coming soon ...
Developer Resources
- Atom Flight Manual - Atom Documentation
Chromium for Developers - Chromium Developer Docs
apm - Atoms Package Manager
Atom Start Parameter
Atom Editor v1.9.0-beta0
Usage: atom [options] [path ...]
One or more paths to files or folders may be specified. If there is an
existing Atom window that contains all of the given folders, the paths
will be opened in that window. Otherwise, they will be opened in a new
window.
Environment Variables:
ATOM_DEV_RESOURCE_PATH The path from which Atom loads source code in dev mode.
Defaults to `~/github/atom`.
ATOM_HOME The root path for all configuration files and folders.
Defaults to `~/.atom`.
Optionen:
-1, --one This option is no longer supported. [boolean]
--include-deprecated-apis This option is not currently supported. [boolean]
-d, --dev Run in development mode. [boolean]
-f, --foreground Keep the main process in the foreground. [boolean]
-h, --help Print this usage message. [boolean]
-l, --log-file Log all output to file. [string]
-n, --new-window Open a new window. [boolean]
--profile-startup Create a profile of the startup execution time. [boolean]
-r, --resource-path Set the path to the Atom source directory and enable dev-mode. [string]
--safe Do not load packages from ~/.atom/packages or ~/.atom/dev/packages.
[boolean]
--portable Set portable mode. Copies the ~/.atom folder to be a sibling of the
installed Atom location if a .atom folder is not already there.
[boolean]
-t, --test Run the specified specs and exit with error code on failures. [boolean]
-m, --main-process Run the specified specs in the main process. [boolean]
--timeout When in test mode, waits until the specified time (in minutes) and
kills the process (exit code: 130). [string]
-v, --version Print the version information. [boolean]
-w, --wait Wait for window to be closed before returning. [boolean]
--clear-window-state Delete all Atom environment state. [boolean]
-a, --add Open path as a new project in last used window. [boolean]
Shell Alias to quick start Atom with some Development Parameter:
-
alias atomdev="atom --save --dev --log-file=~/tmp/atom.log"
Contact / Social Media
Get the latest News about Web Development, Open Source, Tooling, Server & Security
Development by
Developer / Author: Maik Ellerbrock
Company: Frapsoft
License
This work by Maik Ellerbrock is licensed under a Creative Commons Attribution 4.0 International License.