Using Atom

“Have you tried Atom?” #RuinADateInFourWords



Have gone to the dark side temporarily: Atom handles my ES6 better than BBEdit currently. ?

But it’s not quite right, so I fix. Atom configuration is a bit of a mess, but everything-is-a-plugin is a good philosophy.

  • One Dark UI & One Dark syntax themes are OK. But for crazy-go-nuts, install ubik-neon-syntax, and atom-material-ui. Goddamn this makes me want a bottle of Jolt Cola and an Information Society CD blasting on endless repeat.
  • install logo-file-icons, garish but the more popular file-icons is bland and ugly.
  • install symbols-list, because the default symbols tool doesn’t find new-style classes.
  • install eslint, because nobody writes JavaScript good, even me after 20 years of it.
  • install atom-mac-terminal, gives you an “Open in Terminal” right-click.

  • packages, linter, settings, turn off “Lint On Change”, because that slows down an already slow editor.

  • packages, autocomplete-plus, settings, turn off “Show Suggestions On Keystroke”. Ctrl-Space is fine. I learned to touch-type on an IBM Selectric, so I type faster than JS can autocomplete anything but a very long constant.

  • % atom ~/.atom/styles.less and add:

    /* scroll bars should be grabbable */
    .scrollbars-visible-always {
        /deep/ ::-webkit-scrollbar {
            width: 20px;
            height: 20px;
        }
    }
    
    /* turn off all that folding folderol */
    atom-text-editor.editor .icon-right {
        width: 0 !important;
    }
    
    /* make the gutters different from text so I can see indentation */
    atom-text-editor.editor .gutter {
        border-right: #222222 1px solid;
        background-color: #111111;
    }
    
    /* ubik-hackerman-syntax has overly dark functions, was #133460 */
    .theme-ubik-hackerman-syntax .syntax--entity.syntax--name.syntax--function, .theme-ubik-hackerman-syntax .syntax--support.syntax--function {
        color: #4f6db4;
        font-weight: bold;
    }
    
    /* ubik-hackerman-syntax recolors the semantic class of arguments to functions; I want types to be colored the same in or out of a function call. */
    .theme-ubik-hackerman-syntax .syntax--arguments, .theme-ubik-hackerman-syntax .syntax--meta.syntax--function-call {
        color: unset;
    }
    
  • (new 2017-06-10) % atom ~/.atom/keymap.cson (why is there no UI for keymapping?!) and add:
    # I hate editors & other long-term applications closing by instinctive Cmd-Q
    'body':
        'cmd-alt-ctrl-shift-q': 'application:quit'
        'cmd-q': 'pane:close'
    
  • (new 2017-06-10) % atom ~/.atom/snippets.cson (why is there no UI for snippets?!) and add:
    '.source.js':
        'module.exports':
            'prefix': 'me'
            'body': '''module.exports = {
                $1
            };
            '''
    

Open issues:

  • I can’t find a package to get rid of tabs and only badge/color open files in the tree view.
  • Regex field is unbearably small. I often copy over to BBEdit, do a big regex there, copy back.
  • To figure out any style element to customize, you have to open developer mode ⌘⌥I and pick the element and find the exact right style from a mess of styles. A lifetime writing HTML & CSS pays off in customizing a fucking editor; if you’re not me, you’re probably stuck with it. BBEdit lets you customize styles right there in Preferences. At least atom-material-ui has a couple choices for accent colors.
  • I wrote this post in BBEdit. Atom has a Markdown preview, but it’s awkward and far slower.