Jump to content
kongondo

Visual Studio Code for ProcessWire Developers

Recommended Posts

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.

netb_nav.png

Share this post


Link to post
Share on other sites
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)

  • Like 1

Share this post


Link to post
Share on other sites

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.

😎

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites

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

extensions.jpg.fc42a05736f1f16079ad1dbbf43f8abc.jpg

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.

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites

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

 

vsc_api_snippets.thumb.gif.7ac6d71bc191a1526c122a75b5e2ae32.gif

 

  • Like 8
  • Thanks 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 :-).

  • Like 1

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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 🙂

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 🙂

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites
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 by kongondo
  • Like 1

Share this post


Link to post
Share on other sites

@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

  • Like 1

Share this post


Link to post
Share on other sites
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:

7ex3B0q.gif 

  • Like 2

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      This module is inspired by and similar to the Template Stubs module. The author of that module has not been active in the PW community for several years now and parts of the code for that module didn't make sense to me, so I decided to create my own module. Auto Template Stubs has only been tested with PhpStorm because that is the IDE that I use.
      Auto Template Stubs
      Automatically creates stub files for templates when fields or fieldgroups are saved.
      Stub files are useful if you are using an IDE (e.g. PhpStorm) that provides code assistance - the stub files let the IDE know what fields exist in each template and what data type each field returns. Depending on your IDE's features you get benefits such as code completion for field names as you type, type inference, inspection, documentation, etc.
      Installation
      Install the Auto Template Stubs module.
      Configuration
      You can change the class name prefix setting in the module config if you like. It's good to use a class name prefix because it reduces the chance that the class name will clash with an existing class name.
      The directory path used to store the stub files is configurable.
      There is a checkbox to manually trigger the regeneration of all stub files if needed.
      Usage
      Add a line near the top of each of your template files to tell your IDE what stub class name to associate with the $page variable within the template file. For example, with the default class name prefix you would add the following line at the top of the home.php template file:
      /** @var tpl_home $page */ Now enjoy code completion, etc, in your IDE.

      Adding data types for non-core Fieldtype modules
      The module includes the data types returned by all the core Fieldtype modules. If you want to add data types returned by one or more non-core Fieldtype modules then you can hook the AutoTemplateStubs::getReturnTypes() method. For example, in /site/ready.php:
      // Add data types for some non-core Fieldtype modules $wire->addHookAfter('AutoTemplateStubs::getReturnTypes', function(HookEvent $event) { $extra_types = [ 'FieldtypeDecimal' => 'string', 'FieldtypeLeafletMapMarker' => 'LeafletMapMarker', 'FieldtypeRepeaterMatrix' => 'RepeaterMatrixPageArray', 'FieldtypeTable' => 'TableRows', ]; $event->return = $event->return + $extra_types; }); Credits
      Inspired by and much credit to the Template Stubs module by mindplay.dk.
       
      https://github.com/Toutouwai/AutoTemplateStubs
      https://modules.processwire.com/modules/auto-template-stubs/
    • By FrancisChung
      PHPStorm for PW Devs
      This thread is a place for ProcessWire developers who use PHPStorm to share their experience, tips, frustrations, solutions, code snippets and generally discuss all things PHPStorm.
      From Wikipedia:
       
      Thanks @kongondo for the Visual Studio Code post earlier.
    • By szabesz
      CodeRunner 2 is on sale at MacUpdate: https://www.macupdate.com/app/mac/38362/coderunner
      Mostly I use it for writing shell scripts, mocking up algorithms in PHP, JavaScript/jQuery. But is also supports other programming languages as well.
      https://coderunnerapp.com/
      "An advanced, highly flexible, and easy-to-use programming editor for your Mac. CodeRunner supports a large number of languages, and delivers big IDE features while remaining lightweight and clutter-free."
    • By pwFoo
      I moved from netbeans to atom. Tested lighttable, brackets and visual studio code, but at the moment I take a look into web based IDEs. Most are based on ACE editor (alternative could be codemirror) like chrome apps caret or super neutron drive (both with chrome dependency at the moment). 
      Recently I looked into cloud9, codetasty, ... and codiad.
      Codiad is open source. php / js based and works fine. Autocomplete feature and suggestions should be improved, but it's ok. Because it's open source you can download it from github repo or test it as a docker container (wernight/codiad image for example). 
      Codytasty is a cloud hosted solution with a really awesome autocomplete / suggestions for php, js and html! But it isn't open source (there is a free to use hosted version with limited workspaces and features).
      At the moment I testing codiad@docker, but use still atom for coding and searching for the best IDE out there *g*
       
      What do you think about IDEs and the new trend to web based IDEs?
×
×
  • Create New...