DEV Community

Sathish
Sathish

Posted on • Edited on

I moved on & need help in configuration!! ๐Ÿ˜ž

I hereby, decided to shift to VS Code from Atom Editor after having some performance issues with her (Atom).

So, I'm now into Code. What are some great Editor theme - Syntax theme - Font type and other extension for a web developer. I can't find Emmett in VS Code till now. The Fira Code ligratures are also not working in Code.

The languages I work on are PHP & JavaScript.

I'm sorry atom. We really had a good relationship. It's time for me to move on.

I'll still love you. โ™ฅ

Top comments (12)

Collapse
 
anastawfik profile image
Anas Tawfik • Edited
Collapse
 
stephanie profile image
Stephanie Handsteiner • Edited

Regarding the ligatures, did you set โ€œeditor.fontLigaturesโ€œ to true in your settings.json?

I am using the nord-theme, here's the one for VS Code, works great with PHP and JavaScript.

Collapse
 
t4rzsan profile image
Jakob Christensen • Edited

The FiraCode repo contains instructions for VS Code.

Collapse
 
stephanie profile image
Stephanie Handsteiner

Note for me: Next time, look in the repos wiki before writing a comment. ๐Ÿ˜

Makes sense for them to have the fonts repo's wiki filled with that information, though. :)

Thread Thread
 
t4rzsan profile image
Jakob Christensen

Hi Stephanie,

I did not mean to diss your comment. I only meant to complement it :-)

My apologies.

Thread Thread
 
stephanie profile image
Stephanie Handsteiner

No worries, I didn't take it as a diss. ;-)

Collapse
 
nickytonline profile image
Nick Taylor • Edited

Sathish, I don't do PHP dev myself, but I came across this today. I thought you might find it helpful. It appears to be a free video series about getting set up for PHP dev with Visual Studio Code.

Collapse
 
sathish profile image
Sathish

Thanks Nick.

Collapse
 
sathish profile image
Sathish

I use VS Code for PHP and JS development where PHP is professionally and JS is my hobby.

Collapse
 
yokim profile image
Yokim Pillay • Edited

Emmet is a factory extension included with VSCode.

It needs some setting up initially (or I had to, at least). I use Laravel and Vue.js, so I had to include these settings in my User Settings, yours might be different, depending on your preference/tools:

    "emmet.triggerExpansionOnTab": true,
    "emmet.showAbbreviationSuggestions": true,
    "emmet.showExpandedAbbreviation": "always",
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html",
        "blade": "html"
    },
    "emmet.syntaxProfiles": {
        "blade": "html"
    },

With regards to PHP configuration, I'm using the following:

On the Javascript side, I'm using the following:

I installed an extension called Rainglow, this adds a plethora of really beautiful colour themes for VSCode, I'm currently using "Halflife".

Hope this helps!

Collapse
 
itsjzt profile image
Saurabh Sharma

npm Intellisense

VS code now provides this by default, I think

screenshot

BTW

theme: Dracula official
icons: material icons
font: Operator Mono

Collapse
 
andy profile image
Andy Zhao (he/him) • Edited

Atom keymap is pretty great if you don't want to relearn the hot keys or shortcuts.

Emmet comes preinstalled with VS Code I think.