Skip to content

ellerbrock/atom-for-webdeveloper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

awesome atom

Atom for Web Developer Build Status OpenSource Gitter

Useful Packages and Configuration for a better Workflow

Packages

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:

Useful Links for Packages Configuration

Install Dependencies for some Plugins

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

[![JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

JavaScript Style Guide

[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

Syntax Highlighting for special Filetypes

Example: The Plugin Plugin language-docker brings Syntax Highlighting for files named Dockerfile. In docker-compose i have multiple Dockerfiles which look like Dockerfile.nodejs, Dockerfile.mongodb or similar and with that lose my syntax highlighting.

To get it back you can install file-types and add the filetype to ~/.atom/config.cson under the "" section. Here an example for to get docker syntax for all files beginning with "Dockerfile" and shell highlighting for all dotfiles:

"*":
  "file-types":
    "^Dockerfile\\..*$": "source.dockerfile"
    "^\\..*$": "source.language-shellscript"

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 uncheck Anonymous 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 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

GithubDockernpmTwitterFacebookGoogle+Gitter

Development by

Developer / Author: Maik Ellerbrock Company: Frapsoft

License

Creative Commons License

This work by Maik Ellerbrock is licensed under a Creative Commons Attribution 4.0 International License.

About

🌈 Useful Packages and Configuration for a better Workflow

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages