​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)

Config #

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"

Snippets #

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

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


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

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

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

Keymap #

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

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

	'ctrl-cmd-[': 'atom-beautify:beautify-editor'

	'ctrl-cmd-[': 'prettier:format'

	'ctrl-cmd-[': 'prettier:format'

Packages #

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: [
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.