Setting up Sublime Text 3

I find myself installing Sublime Text 3 over and over so I wanted to document my setup for quick reference.

General Look & Feel

1. Install package control

CTRL+SHIFT+P and select Install Package Control”

2. Add a nice color theme

  1. Install the Oceanic Next Color Scheme” package
  2. CTRL+SHIFT+P then UI: Select Theme then choose Oceanic Next.sublime-theme”
  3. CTRL+SHIFT+P then UI: Select Color Scheme then choose Oceanic Next”

3. Improve the sidebar

Install the SideBarEnhancements” package

4. Get nice looking file icons

Install the A File Icon” package

5. Make it easier to track your brackets and braces

Install the BracketHighlighter” package

6. Auto save files after they are modified

  1. Install the auto-save” package
  2. CTRL+SHIFT+P then select Toggle AutoSave: all files

For VueJS Development

Setting up Sublime Text 3 for VueJS development takes several plugins for the best experience.

1. Get vuejs syntax highlighting

Install the Vue Syntax Highlight” package.

2. Get javascript/ES6 syntax highlighting

Install the Babel” package.

3. Get sass syntax highlighting

Install the Sass” package.

4. Get javascript/ES6 code linting

  1. Install Prettier on your workstation:

    npm install -g prettier

  2. Install the JSPrettier” package.

  3. Configure the JSPrettier user settings to format on save and wrap at column 120 instead of 80 by putting this in JsPrettier.sublime-settings-User

        "auto_format_on_save": true,
        "printWidth": 120

Custom User Settings

This is in the Preferences -> Settings menu

    "trailing_spaces_trim_on_save": true

Published on October 12, 2018.

Tagged: sublime-text