Sathish

Posted on Jan 29, 2018

I moved on & need help in configuration!! 😞

#discuss #code #atom

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. ♥

Oldest comments (12)

Stephanie Handsteiner • Jan 29 '18 • 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.

Jakob Christensen • Jan 30 '18 • Edited

The FiraCode repo contains instructions for VS Code.

Stephanie Handsteiner • Jan 30 '18

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. :)

Jakob Christensen • Jan 31 '18

Hi Stephanie,

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

My apologies.

Stephanie Handsteiner • Jan 31 '18

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

Yokim Pillay • Jan 29 '18 • 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:

PHP Intellisense (great autocomplete and refactoring extension)
PHP Namespace Resolver (I use this to import classes)
php cs fixer (I use this to help formatting on my PHP files)

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

npm Intellisense (really helpful imports for npm packages)
ESLint (VSCode support for ESLint formatting and linting)
Babel Javascript (adds syntax highlighting for today's Javascript)

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!

Saurabh Sharma • Jan 29 '18

npm Intellisense

VS code now provides this by default, I think

BTW

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

Andy Zhao (he/him) • Jan 29 '18 • 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.

Anas Tawfik • Jan 30 '18 • Edited

This might help:
dev.to/nickytonline/my-visual-stud...

Nick Taylor • Feb 11 '18 • 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.