‚ÄčI've had a few questions regarding what editor/terminal apps I use, with themes and settings. This is an up-to-date blog post with the answers.

Code Editor

Screenshot of Atom IDE
Screenshot of my Atom text editor

My code editor of choice is Atom.

  • UI Theme: One Dark
  • Syntax Theme: One Dark
  • Font: Cousine (which is a Google Font)


I also use hard tabs and show invisibles, to help with indenting and identifying when it is not up to scratch! My full Atom config can be found below:

Full Atom config file
    css: {}
      beautifyEntireFileOnSave: false
    html: {}
    scss: {}
    vue: {}
    confirmCompletion: "tab"
    strictMatching: true
    automaticallyUpdate: false
    disabledPackages: [
    restorePreviousWindowsOnStart: "no"
    telemetryConsent: "no"
    themes: [
    titleBar: "custom"
    validateOnChange: true
    fontFamily: "Cousine"
    fontSize: 12
    invisibles: {}
    showIndentGuide: true
    showInvisibles: true
    softTabs: false
    softWrap: true
    tabLength: 4
    tabType: "hard"
  emmet: {}
    userId: "3ffdb73e-c23e-9d0d-3f06-e3c9e7b40602"
    forceShow: true
  "flex-tool-bar": {}
  "git-go": {}
  "git-plus": {}
    statusBar: "Show error if the cursor is in range"
    disableEslintIgnore: true
    disableWhenNoEslintConfig: false
    eslintRulesDirs: [
    eslintrcPath: "/js-lint/rules-eslint.js"
    globalNodePath: "/usr/local"
    useGlobalEslint: true
    globalNodePath: "/usr/local"
    configName: "/tpl/lint-config.yml"
    disableWhenNoConfig: false
    panelHeight: 155.125
      bookmarks: true
      bookmarksDecorationsZIndex: 0
      codeglance: false
      codeglanceDecorationsZIndex: 0
      "find-and-replace": true
      "find-and-replaceDecorationsZIndex": 0
      "git-diff": true
      "git-diffDecorationsZIndex": 0
      "highlight-selected": true
      "highlight-selectedDecorationsZIndex": 0
      linter: true
      linterDecorationsZIndex: 0
      pigments: true
      pigmentsDecorationsZIndex: 0
  "one-dark-ui": {}
    createOnChange: true
    autocompleteScopes: [
    groupPaletteColors: "by file"
    notifyReloads: false
    sortPaletteColors: "by name"
    formatOnSaveOptions: {}
      prettierLast: true
      bracketSpacing: false
      printWidth: 170
      singleQuote: true
      useTabs: true
    useEditorConfig: false
    useEslint: true
  "pristine-ui": {}
    includeGitRepositories: true
    sortBy: "group"
  "svg-preview": {}
    iconSize: "16px"
    position: "Left"
    visible: false
    hideVcsIgnoredFiles: false
    showOnRightSide: false
  "web-browser": {}
    showOnStartup: false
    ensureSingleTrailingNewline: false
    tabLength: 4
    softTabs: true
    tabLength: 2
    tabType: "soft"


I make use of snippets to save those extra few character strokes.

Atom Snippets
    'prefix': 'log'
    'body': 'console.log(${1});'


'margin-right': 'prefix': 'mr' 'body': 'margin-right: ${1}'

'background': 'prefix': 'back' 'body': 'background: ${1}'

'CSS custom variable': 'prefix': 'var' 'body': 'var(--${1})'


My keymap file has a few custom modifications for quick formatting.

Atom Keymaps
	'ctrl-cmd-]': 'editor:auto-indent'

'atom-text-editor:not([data-grammar*="js"]):not([data-grammar*="vue"])': 'ctrl-cmd-[': 'atom-beautify:beautify-editor'

'atom-text-editor[data-grammar*="js"]': 'ctrl-cmd-[': 'prettier:format'

'atom-text-editor[data-grammar*="vue"]': 'ctrl-cmd-[': 'prettier:format'


And lastly, the packages I have installed. When setting up a new machine, I copy across the pakages.cson and use package-sync to install them all.

Atom Packages
packages: [
This website is currently having a full content audit - apologies if some of the code or content looks a bit funky!

View this post on Gitlab

You might also enjoy…

  • Using Vue.js with a Lumen powered API

    Posted on 18th October 2018. Written For Liquid Light

    Lumen is a micro-framework from the creators of Laravel. Using Laravel methodology, Lumen offers a leaner, cut-down version of the framework. By including less code, Lumen is able to offer ...

Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.