Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Switching to Visual Studio Code

Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.

As a developer, I spend a lot of time in my code editor. In places where I spent a lot of time, I love to have it comfortable. Nearly as comfortable as home. That’s why my code editor should feel a little bit like it.

Switching to vs code

For many years Sublime Text 3 with all its customization options feels like being at home. Changing furniture, wall colors, or interior from time to time keeps it interesting, and just out of curiosity, I wanted to taste something different. I hesitated for some months, afraid of losing productivity, shortcuts, window management, and getting out of my comfort zone.

I was curious about some features I absolutely loved in Sublime:

  • Startup speed
  • Find in (large) files
  • Meaningful Highlighting: reducing the mental load with good color coding
  • Easy customization

A bit annoying was the fact that auto-indentation broke as soon as block comments appeared in JS code. Here’s a screenshot of my Sublime text with Material Theme combined with Source Code Pro font.

Sublime Text 3

After downloading VSCode the first thing I did was switching the default language from de to en to find more solutions online in case of a problem :)

For theming I use Material Theme again.

Visual Studio Code

Section titled Now: more extensions! Now: more extensions!

Section titled My Settings My Settings

        
      {
    "workbench.welcome.enabled": false,
    "workbench.iconTheme": "eq-material-theme-icons",
    "workbench.colorCustomizations": {
        "activityBarBadge.background": "#80CBC4",
        "list.activeSelectionForeground": "#80CBC4",
        "list.inactiveSelectionForeground": "#80CBC4",
        "list.highlightForeground": "#80CBC4",
        "scrollbarSlider.activeBackground": "#80CBC450",
        "editorSuggestWidget.highlightForeground": "#80CBC4",
        "textLink.foreground": "#80CBC4"
    },
    "editor.fontFamily": "Source Code Pro, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 13,
    // Controls the line height. Use 0 to compute the lineHeight from the fontSize.
    "editor.lineHeight": 20,
    // Enables font ligatures
    "editor.fontLigatures": true,
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html"
    },
    "workbench.colorTheme": "Material Theme",
    "search.exclude": {
        "**/node_modules": false
    }
}
    

Section titled My personal feelings compared to Sublime: My personal feelings compared to Sublime:

  • Startup speed is slightly slower than Sublime but still okay for me
  • Find in (large) files: Digging around some MB-sized JSON files was waaay faster in Sublime, but let’s see if VSCode is improving.
  • Highlighting and customization: easy as it can be.
  • Integrated terminal in VSCode: I enjoy it, because I don’t have to switch windows (or use notification things in the build process) to see errors during development. Furthermore, having the terminal directly attached below the code avoids context switching. With multiple projects open simultaneously, I always know which terminal window belongs to which project.

Section titled Conclusion Conclusion

Let’s give it a shot!

Author

Dominik Angerer

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Scriptconf and Stahlstadt.js.