From Sublime Text to Visual Studio Code, Or Not.

Nov 02nd, 2018

Bottom Line

I’ve been hassled by a few of my peers about the fact that I use Sublime Text for a while now, so I decided its high time to give VS Code another review since I decided long ago that Atom was not right for me. I love Sublime Text and find that I work my fastest with it. My workflow generally consists of working in fullscreen mode of macOS and toggling between things. When I’m writing code I like to stay focused on what I’m reading and writing and the two finger swipe makes it easy for me to see results in either iTerm or Chrome when I need to. I work exclusively in Sublime Text for code editing and have for a long while now. But, for like the third time I’ve attempted to switch to Visual Studio Code in order to see if I can get the same thing from a community driven product. I’ll be blunt I didn’t really succeed. It wasn’t overly complicated to set up a PHP developer environment, and I was able to almost identically mimic my Sublime Text setup on it, but overall I have yet to see enough to convince me that its worth switching to. However, I did conclude that I’m not going to delete it, and I’ll occasionally use it to edit various files from time to time.

My Experience

I had planned to use VS Code exclusively for a full week, and within about 20 min found that I had to toggle between it and Sublime Text. Not because it couldn’t do things, but because they were different and therefore were slowing me down, I was fumbling and had to deliver but it was slowing me down. This was expected partially and I spent the remainder of the week often starting bursts of coding with VS Code but each time eventually switching back to Sublime Text in order to finish my tasks.

There were things I started to love about VS Code. For example, I love its Terminal integration, that is absolutely beautiful for someone like me who enjoys full screen mode in macOS. It’s Project Manager package is exactly what I was hoping for and works wonderfully with a simple JSON file to edit projects. Some of its floating for definitions and other details can be incredibly powerful and helpful in the development process as well. I was also happy to find that I could hide the Activity Bar as well since I generally find that it’s ugly and distracting. However, VS Code also carried with it some pitfalls. Though I was able to mimic most of my keyboard shortcuts I continued to find it challenging to get into a steady workflow with it. I really do not like its method for splitting windows. Rather that adjust the workspace to have a second slot which can holds another window like Sublime Text which can be toggled on and off, VS Code splits the window by putting another slot of the file beside the file, this is similar, but if you open a few files you cannot toggle back to one, you have to manually move them all back to the first slot or close many of the windows until the single slot remains. Thats weird, and not very user friendly though I’m not sure if other editors follow that pattern as well but I do found it much more challenging when trying to compare details between files. These are minor things overall but they can really interrupt someone’s workflow.

Similar to most developers I have custom keybindings I need for my workflow, and I obviously had to customize some for VS Code, though to be honest with you many of the ones I did customize I did because I couldn’t customize the mouse clicks. The goToDeclaration in VS Code is nearly the same as Sublime Text’s goto_definition unless you use multiple indexers and then you’ll have many of the same results listed, that happened to me briefly when I installed both of the extensions PHP Intellisense and PHP Intellphense so I advise against that. That being said the showAllSymbols was what I had to use to find a method’s definition rather than the goto_definition with Sublime Text. I’ve always had a custom mouse click set so that clicking on a method or class will use the goto_definition in Sublime Text which finds me what I’m looking for 90% of the time. In some cases VS Code’s goToDeclaration would work well such as in the case of the Laravel helper methods. I could use cmd + click and it would find the original declaration or definition of the method. But, here’s where it fell short. If I use the cmd + r in VS Code (which for me runs the showAllSymbols), while looking at a method for this example code $this->service->execute() in VS Code I’d get a list of every file that has a method like that, this is very similar to Sublime Text since it’s a loose search, thats fine, that part I'd expect. The problem is then if I know the class is MyCustomService I cannot continue to type that in the popup search, since the search then fails to find anything. Whereas in Sublime Text, when you have multiple options loosely typing matching namespaces or Class names can isolate the search results helping you find what you need to edit or read faster. The biggest issue for me though in making legitimately switching is how VS Code chooses to show you its multiple matches. Rather than use the full screen like Sublime Text showing you the code at the appropriate line while leaving the popup list of matching files, VS Code will open a new window and display that there is more than one definition and show a list of possible file matches and partially open files which can become remarkably confusing on where to go next to open what you need.

Like I mentioned above in my bottom line. VS Code has many great features and can almost replace my Sublime Text setup completely, but its major lacking points for me continue to be things like: its odd workspace slot choices, missing mouse customization, the lack of loose matching the popup search and its layout for multiple matches. If you’re a long time user of Sublime Text I recommend looking at some of the settings I’ve listed below on how you can configure VS Code to look and feel like Sublime Text, but to be honest it may not be there yet as a tool to switch to, at least as your primary development platform.

My Similar to Sublime Text Settings

Below are my settings and packages in VS Code which got me a workspace and shortcuts very similar to my workflow in Sublime, but like I mentioned above, its not the same, and is lacking in some key areas of my workflow.

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "cmd+g",
        "command": "editor.action.goToDeclaration"
    },
    {
        "key": "cmd+r",
        "command": "workbench.action.showAllSymbols"
    },
    {
        "key": "ctrl+cmd+p",
        "command": "projectManager.listProjects"
    },
    {
        "key": "alt+cmd+p",
        "command": "-projectManager.listProjects"
    },
    {
        "command": "namespaceResolver.import",
        "key": "cmd+u",
        "when": "editorTextFocus"
    },
    {
        "command": "namespaceResolver.expand",
        "key": "cmd+.",
        "when": "editorTextFocus"
    },
    {
        "command": "namespaceResolver.sort",
        "key": "ctrl+alt+s",
        "when": "editorTextFocus"
    }
]

The following were the settings I went with, you’ll see the Material Theme, as well as some pretty reasonable spacing, and lots of colour customizing. There are also a variety of folders excluded from searches etc in order to help prevent the app from slowing down on indexing, but that doesn’t always work. This is pretty much the same type of configuration I have in Sublime Text.

{
    "workbench.colorTheme": "Material Theme Palenight",
    "editor.multiCursorModifier": "alt",
    "editor.snippetSuggestions": "top",
    "editor.formatOnPaste": true,
    "window.zoomLevel": 0,
    "editor.fontFamily": "Monaco",
    "editor.lineHeight": 30,
    "editor.fontLigatures": true,
    "explorer.decorations.badges": false,
    "editor.scrollBeyondLastLine": false,
    "workbench.colorCustomizations": {
        "activityBarBadge.background": "#AB47BC",
        "list.activeSelectionForeground": "#AB47BC",
        "list.inactiveSelectionForeground": "#AB47BC",
        "list.highlightForeground": "#AB47BC",
        "scrollbarSlider.activeBackground": "#AB47BC50",
        "editorSuggestWidget.highlightForeground": "#AB47BC",
        "textLink.foreground": "#AB47BC",
        "progressBar.background": "#AB47BC",
        "pickerGroup.foreground": "#AB47BC",
        "tab.activeBorder": "#AB47BC",
        "notificationLink.foreground": "#AB47BC",
        "sideBar.background": "#212121",
        "terminal.border": "#000000",
        "terminal.background": "#212121",
        "panel.background": "#000000",
        "editorSuggestWidget.background": "#212121",
        "editorHoverWidget.background": "#212121",
        "editorHoverWidget.border": "#111111",
        "editor.lineHighlightBackground": "#292d3e"
    },
    "editor.minimap.enabled": false,
    "files.exclude": {
        "**/.git": true, // this is a default value
        "**/.DS_Store": true, // this is a default value
        "**/node_modules": true, // this excludes all folders
        "node_modules": true, // this excludes the folder
    },
    "search.exclude": {
        "**/.git": true,
        "**/node_modules": true,
        "**/bower_components": true,
        "**/tmp": true,
        "**/vendor": true
    },
    "phpcs.showWarnings": true,
    "phpcs.warningSeverity": 4,
    "phpcs.errorSeverity": 6,
    "window.closeWhenEmpty": false,
    "editor.detectIndentation": true,
    "editor.find.seedSearchStringFromSelection": true,
    "editor.fontSize": 13,
    "files.hotExit": "onExit",
    "window.openFilesInNewWindow": "off",
    "window.restoreFullscreen": true,
    "editor.tabSize": 4,
    "files.trimTrailingWhitespace": true,
    "editor.wordWrap": "on",
    "workbench.iconTheme": "eq-material-theme-icons-palenight",
    "breadcrumbs.enabled": false,
    "editor.renderControlCharacters": false
}

I’m pretty sure these are most of the extensions I installed to get a Sublime Text like setup for a mainly Laravel based development workflow. But there may be others that are better than these.

DotENV
Material Theme
Laravel 5 Snippets
Laravel Blade Snippets
Laravel Helpers
PHP Debug
PHP DocBlocker
PHP Intellphense
PHP Namespace Resolver
phpcs
Project Manager
Sublime Text Keymap and Settings

If you can get the same or better experience out of VS Code than you can with Sublime Text then I encourage you to do so and share your tricks with me. I’m going to continue to keep an eye on this and see if I can get there eventually but for the time being I’ll happily remain a Sublime Text guy.

If you liked this entry connect with me on
Twitter.