Switching to VS Code

Alright maybe there’s enough discussion to have its own thread. I’m really liking VS Code for how much just works out of the box, compared to Sublime which I setup so long ago I’m not sure I could set it up the same way again…

Anyone else using it? Any must-have extensions?

I’m using the Material theme, but haven’t looked at many others.

1 Like

Lots of good recommendations for VS Code here: https://syntax.fm/show/012/why-is-everyone-switching-to-vs-code

I use Atom. I guess I should try these IDE things you guys are always going on about?

Honestly I haven’t even figured out the IDE aspects of VS Code… but I find the performance significantly better than Atom. And it has a great plugin/extension ecosystem like Atom so I’m pretty happy so far.

I tried vs code briefly but I struggle for my php workflow. Jeffrey Way just released a new series about settings up vs code for PHP and suggested some really good extensions like php intelliphense and php-cs-fixer.
The former adds proper support for namespaces, imports and symbol browsing throughout the project.
The second one is basically a version of prettier but for php but I struggle to configure it properly not to mess up the markup of my templates.
Especially with blade it completely screws up the indenting and moves all the directives on the same line (quite a mess honestly!). Other than that I find vs code to be an amazing editor, especially for javascript!
I’m still currently using phpstorm but planning on migrating as soon as I can find a fix for php-cs-fixer :slight_smile:

here’s the links to the extensions in case someone needs it:

I’m actually struggling with Prettier + Sage 9, as they both seem to have different rules. In particular whatever is Linting Sage 9 wants a return after the : in a multi-line declaration, but Prettier won’t do it. :confused:

I think there’s an extension to combine prettier with eslint rules (which should be what Sage9 uses I think, there’s an extension for Stylelint too), hope that helps! :slight_smile:

I could be wrong but I believe some things are to be resolved manually. Either way, I include a couple of additional rules under stylelint within package.json

"declaration-colon-newline-after": null,
"value-list-comma-newline-after": null,
1 Like

Oh neat, that’s fixed it, hadn’t dug around the package.json file yet.

1 Like

I’m using the Materials Neutral theme and the font Mono Input.

Also, the new feature of workspaces is amazing. It’s kind of annoying swapping between windows for working on your theme and any Trellis amends or console commands. This way, you can open both in the file explorer at the same level. It also means you can run multiple terminal windows within a single VC Code window for both your theme root and the Trellis root.

Another good tip is the ability to hide certain files/directories within the file tree. Sage 9 sure does have a lot of directories and files that we don’t access very frequently. I have the following set up in settings:

"files.exclude": {
    "node_modules/": true,
    ".github/": true,
    ".vscode/": true,
    ".gitkeep": true,
    ".cache-loader/": true,
    "acf-json": true,
    "README.md": true,
    "LICENSE.md": true,
    "CHANGELOG.md": true,
    ".gitattributes": true,
    ".gitignore": true,
    "yarn.lock": true,
    "phpcs.xml": true,
    ".travis.yml": true,
    "dist": true,
    "composer.lock": true,
    "package-lock.json": true,
    "vendor": true,
    ".editorconfig": true,
    "config": true,
    ".eslintrc": true,
    ".stylelintrc": true

It’s then super quick if I need to unhide node_moduels for example. Tidy space, tidy mind :wink:

Also, easily missed is the collapse all button (the three pages with an X over them in the top-right of the above screenshot. Very helpful having opened a load of directories up.

I also really like the Color Highlight extension. The build in VS Code colour handling in SCSS/CSS files can be a bit annoying. It adds a block of colour before the value but it can jump around when deleting references and kinda just gets in the way. This extension changes it to look like this:


I’m sure there’s more, I’ll post up if I think of anything else.


any tips how to navigate inside the node_modules tree / in sidebar view right to the package folder I need to and back up to the nm folder root to toggle it closed again :smiley:

Hidden files list is a good idea.

Not to be a pedantic IDE snob, but VS Code isn’t an IDE. It’s a text editor with some features that have been in IDE’s forever. That’s not a bad thing at all, but there’s a definite distinction. PhpStorm is an IDE.

I have to admit though, I was driving to work not too long ago listening to Shoptalk Show and Dave Rupert was raving about VS Code having stuff like jump to definition, todo’s, find and replace in project, and I’m gripping my steering wheel silently screaming “Dude, this stuff has been in PhpStorm always.”

It’s all good though, I’m glad people are digging VS Code.

1 Like

I’ve just been having a play with VS Code as a result of this post and it’s actually a very easy switch from Sublime Text, cheers for all the resources above gang.

One thing which would improve the git integration is having a folder view instead of the flat file structure (that’s an improvement already raised and scheduled in milestone 8). I think I’ve just made the most painless switch ever in editors / IDEs.

It’s not often I feel this happy about a Microsoft product :blush:

1 Like

It’s why I always baulked at it, until finding out people I respected used it!

1 Like

It was mentioned, but not linked to, the series for VSCode detailing its ins and outs. Lots of good information.


Another user setting which is a must … the default window size is tiny

"window.newWindowDimensions": "inherit"


I used Atom then moved to VS Code and then moved back to Atom. There is one issue with the VS code is the ability to edit files remotely. It works but it just doesn’t sync correctly and instantly enough. The rest is awesome :slight_smile:

Fancied trying out some fonts that support ligatures. Settled on Fira Code with the font size set to 13. Some dummy code just as an example:

1 Like

I’d like to “Plus one” this. I started using VSCode on Monday (having used Atom for about a year), and it’s waaay faster.

Thanks, Bill Gates and Steve Ballmer!