ESLint "Fun"

[ddraper]

This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.

At the end of my last blog I'd converted switched from a "Content Distribution" approach to Components to using a single file component approach using vue-loader. I now had a simple Vue.js application that I could use to browse the "Company Home" on an Alfresco Repository. However although I could drill down into folders I was unable to come back out of them. To complete the basic navigation handling I decided to implement a breadcrumb component. 

As I started to implement this new component I realised that I was no longer being informed of JavaScript errors by my the trusty JSHint Gutter package that I have been using on Sublime Text. This was because it was unable to validate my new .vue files that contained my component code. 

Fortunately the vue-loader documentation provided some useful information on setting up linting for .vue files using ESLint and the eslint-html-plugin. Installing these was pretty straight forward but getting Sublime to make use of them proved difficult because I was using NVM.

To cut a long story short it seems that when starting Sublime my bash profile wasn't including the paths set by NVM. I need to fully implement the solution provided here... but the simple workaround is just to launch Sublime from a new terminal.

I'm now in the process of tweaking my ESLint configuration in my project specific .eshintrc.js file and am slowly getting it to fit my preferences.

At the same time I've added the breadcrumb. You can view the state of my project at the time of writing by checking out this tag.

I plan to learn as much as I can about accessibility as I implement this client so did some research on accessible breadcrumbs and found this useful post (which despite being quite old still seems relevant). This means that whilst my breadcrumb trail is functional (and accessible) it looks very strange! I'm more interested in accessibility and function than style at the moment but will return to the visual look later. 

The next step now that I have some basic functional components is to both focus on accessibility and figure out the best automated testing strategy.