Customizing Sublime Text

[TheJaredWilcurt]

These are all of the steps I follow (roughly, sometimes I skip some of the plugins) when setting up Sublime Text on a new machine. These steps are compatible with ST2, ST3, and ST4.

If you use Sublime, some of these will be useful to you. Some of these will not. They are for me. But also, a little for you.

1. Drag your GitHub folder in so all projects show up in the sidebar
2. Install the built in plugin manager
   • Go to Tools > Install Package Control
3. Restore the superior design of Sublime Text 2 (smooth tabs never die)
   • CTRL + SHIFT + P > Install > Enter
   • Theme - Legacy
   • CTRL + SHIFT + P > UI: Select Theme > Legacy
   • CTRL + SHIFT + P > UI: Select Color Scheme > Monokai
4. Remove the icons from the file tree
   • CTRL + SHIFT + P > Install > Enter
   • PackageResourceViewer
   • CTRL + SHIFT + P > PackageResourceViewer: Open Resource > Theme - Legacy > Legacy.sublime-theme
   • Edit these sections:

   {
       "class": "icon_file_type",
       "content_margin": [0,0]
   },
   {
       "class": "icon_folder",
       "content_margin": [0,0]
   },
   {
       "class": "icon_folder_loading",
       "content_margin": [0,0]
   },
   {
       "class": "icon_folder_dup",
       "content_margin": [0,0]
   },
   {
       "class": "sidebar_tree",
       "layer0.tint": [30, 31, 25]
   },
   {
       "class": "sidebar_heading",
       "shadow_color": [5, 6, 0]
   },
   {
       "class": "sidebar_label",
       "color": [230, 230, 230]
   },

5. Install common plugins:
   • CTRL + SHIFT + P > Install > Enter
     • Sidebar Enhancements - Adds in many basic features when right-clicking on items in the file tree, such as "Open in browser" or "duplicate file", etc. Customizable (can remove the donation nag).
     • Trailing Spaces - Highlights trailing spaces in Pink, also can auto delete them from Edit menu. Annoying for 5 minutes, then it's pretty great
     • AutoFoldCode - Keeps track of what you have code folded, multi-cursors, and scroll position on file close.
     • EditorConfig - See the editor config website
     • MoveTab - Keyboard shortcut to move tabs
     • ColorSchemeEditor - Modify colors in sublime, good for editing the little dot that shows up next to a line when it fails a linting
6. Language specific stuff:
   • Sass
     • Sass - sass/scss syntax highlighting
   • JSON
     • Pretty JSON - Validate, sort, and pretty print
   • JavaScript
     • DocBlockr - type /** above a function with params and hit TAB
     • SublimeLinter - Linting engine compatible with many different linters
     • SublimeLinter-eslint - Plugin for SublimeLinter to show you what lines of code are failing ESLint
     • Monokai JSON+ - Colors different nested objects in JSON. Great for ST2, rarely needed in ST3+
     • Jest - Helpers for Jest (JS Testing)
     • Vue Syntax Highlight - Great, though if you manually download it from GitHub it has better ST3 support
     • Vuejs Snippets - I've also manually installed Sara Drasners snippets and modified them some
7. Other stuff
   • Discord Rich Presence - Better Sublime Discord Integration
   • GitSavvy - I was told this is good, I don't know
   • SublimeCodeIntel - This one requires installing some python stuff first before it will work. Look it up. Pretty easy. Worth it.
8. Set up the default "Find" properties:
   • CTRL + SHIFT + F > "Where:"
   • <project>, -*/node_modules/*, -*/.git/*
   • <project> means all folders in the sidebar, skipping the node_modules and .git folders and their contents
9. Menu > Preferences > Settings

   {
       "caret_extra_top": 0,
       "caret_extra_bottom": 1,
       "caret_extra_width": 1,
       "caret_style": "smooth",
       "color_scheme": "Packages/Color Scheme - Default/Monokai.sublime-color-scheme",
       "folder_exclude_patterns": [
           "Application"
       ],
       "font_options": [
           "directwrite",
           "subpixel_antialias"
       ],
       "font_size": 10,
       "ignored_packages": [
           "Vintage"
       ],
       "index_exclude_patterns": [
           "*.log",
           "*/node_modules/*",
           "*/.git/*",
           "*/bower_components/*",
           "*/dist/*",
           "*/unit/coverage/*",
           "*/package-lock.json"
       ],
       "show_definitions": false,
       "show_git_status": false,
       "tab_size": 2,
       "theme": "Legacy.sublime-theme",
       "translate_tabs_to_spaces": true
   }

10. Preferences > Key Bindings

    [
      {
        "keys": ["ctrl+tab"],
        "command": "next_view"
      },
      {
        "keys": ["ctrl+shift+tab"],
        "command": "prev_view"
      },
      {
        "keys": ["ctrl+n"],
        "command": "new_file",
        "args": {
          "syntax": "Packages/JavaScript/JavaScript.sublime-syntax"
        }
      },
      {
        "keys": ["ctrl+alt+up"],
        "command": "select_lines",
        "args": {
          "forward": false
        }
      },
      {
        "keys": ["ctrl+alt+down"],
        "command": "select_lines",
        "args": {
          "forward": true
        }
      }
    ]

11. Press Ctrl+N for a new file, should use JS by default, now go to Preferences > Settings - Syntax Specific:

    // These settings override both User and Default settings for the JavaScript syntax
    {
      "tab_size": 2,
      "translate_tabs_to_spaces": true,
      "detect_indentation": false
    }

12. CTRL + Shift + P > PackageResourceViewer: Open Resource > Color Scheme - Default > Monokai.sublime-color-scheme

    "globals": {
        "line_diff_added": "var(yellow5)",
        "line_diff_deleted": "var(yellow5)",
        "line_diff_modified": "var(yellow5)",
        "line_diff_width": "var(yellow5)"
    },

---

Photo Credit:

1910's Biplane photo from Aviation Stack Exchange

---

Originally published on Dev To on 2021-06-17