Visual Studio Code for ProcessWire Developers

[theo]

On 7/18/2018 at 8:48 PM, gmclelland said:

vscode now includes an outline feature

What exactly is the outline feature?  Is there an advantage over Netbeans' "Navigator" Tab?

Thank you.

[kongondo]

13 minutes ago, theo said:

What exactly is the outline feature? 

Quote

The Outline view shows the symbol tree of the currently active editor.

...from the link provided above ?.  So, yes, it is like NB Navigator.

15 minutes ago, theo said:

Is there an advantage over Netbeans' "Navigator" Tab?

The advantage is that Visual Studio Code is our editor of choice for various reasons ? (now, I hope this does not lead to a NB vs VSC debate; that really is not the purpose of this thread). 

[theo]

Ok, thank you.

From the posting above, I thought it was something brand-new.

But old NB Navigator looks more useful to me. Showing parameters and possible return value types as well.

?

[theo]

1 hour ago, kongondo said:

The advantage is that Visual Studio Code is our editor of choice for various reasons

Btw. can you describe some of those various reasons?

As a NB user, I would like to know if it makes sense for me to have a closer look at VSCode.

Thank you.

[gmclelland]

Here's what I use.  Here is the contents of ~/.vscode/extensions 

Spoiler

// Place your settings in this file to overwrite the default settings
{
    // Controls the font size in pixels.
    "editor.fontSize": 13,

    // Auto line wrap
    // Controls how lines should wrap. Can be:
    //  - 'off' (disable wrapping),
    //  - 'on' (viewport wrapping),
    //  - 'wordWrapColumn' (wrap at `editor.wordWrapColumn`) or
    //  - 'bounded' (wrap at minimum of viewport and `editor.wordWrapColumn`).
    "editor.wordWrap": "on",

    // Controls if the minimap is shown
    "editor.minimap.enabled": false,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    // Controls how the editor should render whitespace characters, possibilities are 'none', 'boundary', and 'all'. The 'boundary' option does not render single spaces between words.
    "editor.renderWhitespace": "boundary",
    // Controls whether the editor should render indent guides
    "editor.renderIndentGuides": false,
    // Keep peek editors open even when double clicking their content or when hitting Escape.
    "editor.stablePeek": true,
    // Configure glob patterns for excluding files and folders.
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.bundle": true,
        "**/.sass-cache": true,
        "**/.DS_Store": true
    },
    // Number of editors shown in the Open Editors pane. Set it to 0 to hide the pane.
    "explorer.openEditors.visible": 0,
    // Configure glob patterns for excluding files and folders in searches. Inherits all glob patterns from the files.exclude setting.
    "search.exclude": {
        "**/node_modules": true,
        "**/.sass-cache": true,
        "**/bower_components": true,
        "site/assets/cache/**": true,
    },
    "files.associations": {
        "*.html": "twig",
        "*.module": "php",
        "*.theme": "php",
        "*.install": "php",
        "*.engine": "php",
        "*.profile": "php",
        "*.test": "php",
        "*.inc": "php",
        "*.make": "ini"
    },
    "files.defaultLanguage": "markdown",
    // from https://caffeinecreations.ca/blog/craft-twig-cheatsheet-for-visual-studio-code/
    "emmet.includeLanguages": {
        "twig":"html"
    },
    // Customizes which terminal application to run on OS X.
    "terminal.external.osxExec": "iTerm.app",
    "workbench.colorTheme": "One Monokai",
    "window.zoomLevel": 0,
    // Adds intellisense for CSS class names from the HTML CSS Support extension
    "css.fileExtensions": [
        "css",
        "scss",
        "less"
    ],
    // Makes intellisense automatically popup the suggestions as you type
    "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": true
    },
    "npm.enableScriptExplorer":true,
    "gitlens.keymap": "chorded",
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressResultsExplorerNotice": false,
        "suppressShowKeyBindingsNotice": true
    },
    "workbench.sideBar.location": "left"
}

 

I just like that VSCode is faster than an IDE and it has a ton of plugins.  The outline feature is new to VSCode, but NetBeans has had it for a long time.

[theo]

1 hour ago, gmclelland said:

I just like that VSCode is faster than an IDE and it has a ton of plugins.  

What do you mean with "faster"?

Not sure if having "tons of plugins" is necessarily an advantage.

That said, NB has tons of plugins as well http://plugins.netbeans.org/

Thank you.

[gmclelland]

Faster start up times, less RAM usage, etc..  It seems to be used a lot in the JavaScript community.  In the PHP community, I mostly here of people using PhpStorm.

It's been a long time since I've used NB, but I think NB maybe Java based?

[theo]

22 minutes ago, gmclelland said:

Faster start up times, less RAM usage, etc..  It seems to be used a lot in the JavaScript community.  In the PHP community, I mostly here of people using PhpStorm.

It's been a long time since I've used NB, but I think NB maybe Java based?

Well, I don't really care about a few seconds of start up time, if I have the benefits of a full fledged IDE for PHP and JS /TypeScript and CSS etc. afterwards.

If I only need to quickly change a line of code, I'm using Kate or KWrite, which ship with KDE.

Yes, NB is java based.

Thank you.

[kongondo]

Very good resource here:

Refactoring with Visual Studio Code

 

[kongondo]

ProcessWire API Visual Studio Code Snippets

Here is a Gist of all (?) ProcessWire public API snippets for VSC. This is generated from the ProcessWire Cheatsheet. Some stuff needed manual cleanup. I also removed the stuff from the selectors section. I could have missed something, please let me know.

Please note this is a complete, well-formed JSON file. If you need to copy to your existing VSC snippets file (most likely your php.json), remember to remove the top and bottom outermost curly braces.

One great thing about VSC is that it doesn't care much about typos; fuzzy search will find what you meant to type. E.g., 'cnf' will match 'config'.

Maybe the JSON file is too long, I don't know, but sometimes the snippets' descriptions don't show up.

The snippets are for use in a template file (i.e., no auto $this->), but you can still use it in a module and/or modify it to suit such needs.

Hope you find it useful :-).

Demo

 

 

[pwired]

Does VSC handle custom code highlighting patterns ? If yes I will give it a try because my current editor fails to highlight <?=  . . . .  ?> and support seems to be dead.

[kongondo]

28 minutes ago, pwired said:

Does VSC handle custom code highlighting patterns ? If yes I will give it a try because my current editor fails to highlight <?=  . . . .  ?> and support seems to be dead.

I' not sure actually. I've just tried the <?= ... ?> and although they are highlighted, the editor shows a syntax error. <?...?> work OK. I'm not sure if there's an extension to handle the tags you want. I'd still urge you to give VSC a try ?and maybe even ditch those short tags; I've never liked them :-).

[pwired]

Hi Kongondo

Thanks for stepping in

I only asked because the use of <?=  . . . . . ?> is recommended in template files for cleaner syntax and better code separation in business logic

see this thread  https://processwire.com/talk/topic/19928--/?tab=comments

I remember other cases where <?=  . . . . .  ?> was the only working solution but I can't find that specific thread at the moment.

 

[adrian]

1 hour ago, pwired said:

I remember other cases where <?=  . . . . .  ?> was the only working solution but I can't find that specific thread at the moment.

I can't imagine how that's possible. You can always do <?php echo $var; ?> anywhere you want. Not saying you shouldn't go with: <?=$var?> but there shouldn't be anywhere you have to use it ?

[pwired]

I will find that thread or topic again and post it here. If I remember correctly it was a case with in line styling for a background image, but not really sure.

[pwired]

Hi,

I looked everywhere but I can`t find that case anymore where <?php echo did not work.

Remains the case of using <?=  for cleaner syntax in better separating business logic from view logic.
See the link in my previous post.

Anyway, if I have to code many hours behind a screen, I prefer an editor that lets me show the code in my preferred personal way,
e.g. my own code highlighting patterns, to make the coding hours a bit more comfortable. My current editor doesn't anymore.

So, if VSC has code highlighting patterns and configurable skin templating, fine I will give it a try.

Right now I am evaluating notepad++ which seems to have all the configurations.

[kongondo]

1 hour ago, pwired said:

So, if VSC has code highlighting patterns and configurable skin templating, fine I will give it a try.

Yes, you can create your own formatter. Not sure about the learning curve though. Maybe start with an existing extension and build off that.

1 hour ago, pwired said:

Right now I am evaluating notepad++ which seems to have all the configurations.

I love notepad++ and use it daily....but not for coding. For text manipulations and a poor man's 'sticky notes', it works for me. But you can't even begin to compare it to VSC. They are two different beasts ?. 

[AndZyk]

I was for a long time happy with Sublime Text and in fact I still am. But this deprecation note of my favorite Sublime Text theme convinced me to switch to another editor/IDE. I have made the switch to Visual Studio Code a few weeks ago and like it so far. There are a few things missing/confusing, but the switch was easy because most of the Sublime Text plugins I used are also available for VSC. ?

15 hours ago, kongondo said:

ProcessWire API Visual Studio Code Snippets

Thank you for the snippets, but I was wondering about some things @kongondo:

• If I use the Functions API, are those snippets a improvement or should I count in this case on a plugin like f.e. Intelephense?
• Maybe you could make a extension out of those snippets?

Regards, Andreas

[kongondo]

8 minutes ago, AndZyk said:

If I use the Functions API, are those snippets a improvement or should I count in this case on a plugin like f.e. Intelephense?

I can make a separate version for Functions API. Looks like a simple regex job

 

8 minutes ago, AndZyk said:

Maybe you could make a extension out of those snippets?

Maybe not soon ?.

Edited September 18, 2018 by kongondo

[kongondo]

@AndZyk

Attached, a quick and dirty job for Functions API, one for each style.

$items = pages("template=basic-page"); style #1

$items = pages()->find("template=basic-page"); style #2

I don't know how style #1 works with (or should even work with) things like pages->count? I know style #2 could be pages()->count. Because of this, VSC will complain of duplicate keys since with the search and replace, we ended up with multiple pages(). (where we had pages->count; pages->find(), etc. :-). I also don't know about the WireArray stuff. I don't think those have functional api, no? They would have to be removed from these snippets.

I haven't tested much. If you are able to test, I can upload to separate Gists, once cleaned up, thanks. 

vsc_pw_functional_api_style-1.json

vsc_pw_functional_api_style-2.json

[bernhard]

29 minutes ago, AndZyk said:

If I use the Functions API, are those snippets a improvement or should I count in this case on a plugin like f.e. Intelephense?

thx, I just tried that extension and it looks great! @kongondo I think his question was what is different from your version to normal intellisense?

that's how it looks like with intelephense:

 

[kongondo]

7 minutes ago, bernhard said:

I think his question was what is different from your version to normal intellisense?

Intellisense has never worked for me with ProcessWire variables :-). It just doesn't pick. I use Felix Becker's. 

Edit: Aah, I see you use Intelephense. I tried it once but for some reason I cannot remember, I went with Felix's. Maybe I should try it again.

Edit 2: I might have gone with PHP Intellisense based on download numbers. I'll try Intelephense and if it works, I'll go with that. I'll leave the Gists up though, for those who use PHP Intellisense.

[bernhard]

Yeah, same here. I used Felix Becker's but was never happy with it. Need to do some testing with the linked one but first tests where promising. In the screencast you see that it even picks the "pagebreak" property from rockreplacer which would not be possible with snippets created from the cheatsheet

Also, you get a nice preview and docs and you can use "go to definition" or "peek definition" to go directly to the class file

[kongondo]

It does look nice! Felix's would struggle with variables from included files (something that worked in ST out of the box). It would also struggle with variables from new Page(), etc. If you try the intellisense of other languages such as JavaScript or Python, you'll be amazed. If I called something similar to $blog = $modules->get("MarkupBlog"), they will pick up on the methods and properties in MarkupBlog! Do you get that with intelephense or it isn't that advanced? I'll give it a shot though. Thanks for the heads-up.

[kongondo]

@AndZyk. Thanks to you and @bernhard, I'll now try intelephense. Bottom line is the snippets I created have no advantage over intelephense from what I've read and seen :-).