February 2014 Update

February 2014 Update

  • Comments 1

We’ve been working hard since the initial release of “Monaco” to continuously deliver new features that round out the end to end experiences for building and Azure Websites in Monaco. Our goal is to update the Monaco service each month, and today we’re excited to talk about the February release.

New Console Commands

For many, the command line is considered a core development tool. While the cloud and Azure ultimately constrain what we can do from the Monaco console, we were able to open up more capabilities in February. Here is what help looks like in January and now in February:

image

  1. The 'express' and 'node-sass' commands were removed as we did not want to prescribe which versions of these modules you could use in Monaco. You can simply npm install express and npm install node-sass to use these commands from the console, as with any commands installed via npm.
  2. Commands installed via npm install have always been available from the console, and now we make them more discoverable in help.
  3. We no longer wrap a set of core Windows commands such as del, dir, and rmdir. If you append the help switch /? we can easily see that we are invoking the native commands.

image

In fact, we’ve opened up access to all of the Windows commands and any commands on the %PATH%, except those explicitly blocked by Azure or those that require input (e.g. no copy con, sorry @SHanselman!).

To demonstrate this, let’s take advantage of the fact that you can run batch files in Monaco (as well as PowerShell scripts). We can use the new touch command to create a new file called 'doshelp.bat'. Then, we'll use the new open command to open the file in another editor using the -s switch, so if you are a keyboard developer you don't need use the mouse to navigate the tree to edit the file. 

We can then write a little bit of script to pipe the default help contents to a text file.

image

This is a good time to note that we've added new commands in the editor on batch, command, and zip files that let you execute the primary action for the file from the editor. We can then press 'play' and run the doshelp.bat file.

image

The 'doshelp' text file gets created in the folder, and when you open it you can see all of the Windows commands. Again, not every command will run from the console, but many of your favorites will, and if you have a command that you want to run such as del *.* /s, you can always append the /q switch to force the action without a prompt.

image

Markdown

In this update, we improved our Markdown editing experience as more and more developers are using Markdown for their project documentation. We've also added a set of snippets to the language service, such as heading, horizontal rule, and links, making it easier to quickly write your Markdown.

image

It would be nice to be able to see what the compiled Markdown file will look like, so in February we have a new action on the editor for Markdown files that lets me toggle between the source view and a preview.  Even more exciting, you can open both the Markdown file and the Preview side by side by first splitting the editor and then toggling the second editor to be in Preview mode. Now, when I add content to my markdown file, I see the results live on the right.

image

SASS Support

In February we brought our support for SASS up to the same level as CSS and LESS files. For example, we now show the color inline, as you type and we provide IntelliSense on properties, variables, and functions.

image

If I select the variable, we highlight all references to that variable and color reads yellow and writes orange.

image

I can of course peek at the definition, jump to it, see all references to this symbol, and perform a rename refactoring.

image

If we hover over a rule or identifier, we'll display the HTML to which this rule will be applied.

image

Also notice that we have basic warnings and errors, such that rule sets should not be empty or the fact that the property value has not been set.

image

Finally, because we understand the content of the SASS file, we can provide a rich outlining and navigation experience using Quick Open (Ctrl+E).

image

PHP IntelliSense

clip_image023

We see a lot of PHP being edited with Monaco and customers have asked for better IntelliSense experiences in order to write PHP more effectively. With the February update we took a cue from WebMatrix and integrated their IntelliSense metadata for PHP’s global functions, variables and keywords.

image

Multiple Consoles

Earlier, we built a SASS file that needs to be compiled to CSS whenever the file changes. Instead of going to the command line and running node-sass every time I make changes to the SASS file, I would prefer to have the compile execute seamlessly, whenever I change the file.

Grunt is a popular Node and JavaScript based task runner that can be used for exactly this purpose. I can write a simple ‘gruntfile’ that will watch for file changes and invoke the node-sass task for me. Let’s see how we can do this in Monaco.

Start by installing grunt and two extensions, one to watch for file changes and one to compile the SASS file to CSS.

/ $ npm install grunt-cli
/ $ npm install grunt-contrib-watch
/ $ npm install grunt-sass

Next, create a new file called ‘gruntfile.js’ and paste in the following code: 

module.exports = function(grunt) {
    grunt.initConfig({
        sass: { // Task
            dist: { // Target
                 files: { // Dictionary of files
                     'style.css': 'style.scss' // 'dest': 'src'
                     }
                }
            },
            watch: {
                 scripts: {
                    files: ['*.scss'],
                     tasks: ['sass'],
                    options: {
                        spawn: false,
                    },
                 },
            }
    });
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['watch']);
};

This gruntfile assumes ‘style.scss’ will be compiled to ‘style.css’ and that these files are both in the root of the workspace.  With grunt and our gruntfile in place, we can start the task by opening the console and simply running ‘grunt’. This will run gruntfile.js which will in turn start watching for changes to ‘styles.scss’, which will then cause grunt-sass to transform the SASS file into CSS.

image

What if we need to do more work in a console, such as initialize a Git repository, check the Git status, or install additional packages? With the February release, we can open new Consoles by clicking on the ‘New Console’ action in the upper right corner of an active Console.

clip_image027

In this example, ‘Console 2’ will open and we can begin to do our work, all while the Grunt task continues to run in Console 1. To switch between consoles, click on the ‘console switcher’ action on any Console and choose between active consoles.

clip_image030

It is possible to have multiple consoles open by selecting a second editor and then pressing Ctrl+E to bring up Quick Open.  The list of recent files will actually show the open consoles, so you can choose ‘Console 1’ for example and see both running side by side.

image

NOTE! Long running tasks can consume CPU and Memory resources for the Website. For a free mode site, this can cause you to quickly reach the quota, resulting in a temporary suspension of the site and therefore Monaco.

To exit a long running process, simply press Ctrl+C in the console. To exit a console instance, issue the exit command.

clip_image032

iPad Keyboard

We've seen a fair number of developers who want to code on their iPad, but the on screen keyboard didn't work in Monaco. This has been fixed in the February update, so you'll see a keyboard icon in the lower right corner of the workbench that you can click on to bring up the on screen keyboard, letting you code from anywhere, on any device.

clip_image034

We still have work to do to enable command key combinations to be invoked from the on screen keyboard on the iPad. For example, it still is not possible to bring up Quick Open by pressing the Cmd+E keys, but this is a great step in the right direction.

We want to hear from you!

clip_image036

The beauty of services is that there isn't anything you need to do to get these features, they are live now on Azure. Try them out and let us know what you think!

Thanks!

Leave a Comment
  • Please add 7 and 5 and type the answer here:
  • Post
  • Nice dev tool. I'll try it soon

Page 1 of 1 (1 items)