topic ESLint "Fun" in Alfresco Archive

topic ESLint "Fun" in Alfresco Archive https://connect.hyland.com/t5/alfresco-archive/eslint-quot-fun-quot/m-p/160011#M114030 <HTML><HEAD></HEAD><BODY><PRE __default_attr="info" __jive_macro_name="alert" alert="info" class="jive_text_macro jive_macro_alert">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.</PRE>At the end of <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2016/12/22/re-usable-vuejs-components-with-vue-loader" rel="nofollow noopener noreferrer">my last blog</A> I'd converted switched from a "<A href="https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots" rel="nofollow noopener noreferrer">Content Distribution</A>" approach to Components to using a <A href="https://vuejs.org/v2/guide/single-file-components.html" rel="nofollow noopener noreferrer">single file component</A> approach using vue-loader. I now had a simple <A href="https://vuejs.org/" rel="nofollow noopener noreferrer">Vue.js</A> 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 <A href="https://github.com/victorporof/Sublime-JSHint" rel="nofollow noopener noreferrer">JSHint Gutter package</A> 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 <A href="https://vue-loader.vuejs.org/en/workflow/linting.html" rel="nofollow noopener noreferrer">some useful information</A> on setting up linting for .vue files using <A href="http://eslint.org/" rel="nofollow noopener noreferrer">ESLint</A> and the <A href="https://github.com/BenoitZugmeyer/eslint-plugin-html" rel="nofollow noopener noreferrer">eslint-html-plugin</A>. Installing these was pretty straight forward but getting Sublime to make use of them proved difficult because I was using <A href="https://github.com/creationix/nvm" rel="nofollow noopener noreferrer">NVM</A>.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 <A href="http://sublimelinter.readthedocs.io/en/latest/troubleshooting.html#special-considerations-for-bash" rel="nofollow noopener noreferrer">here</A>... 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 <A href="https://github.com/draperd/AlfrescoNodeJS" rel="nofollow noopener noreferrer">my project</A> at the time of writing by checking out this <A href="https://github.com/draperd/AlfrescoNodeJS/releases/tag/Blog6" rel="nofollow noopener noreferrer">tag</A>.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 <A href="https://www.uvd.co.uk/blog/accessible-breadcrumbs-using-aria/" rel="nofollow noopener noreferrer">this useful post</A> (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.<IMG alt="" class="image-1 jive-image" src="https://connect.hyland.com/legacyfs/online/alfresco/11681_Blog6.png" style="width: 733px; height: 429px;" /></BODY></HTML> Thu, 22 Dec 2016 14:09:20 GMT ddraper 2016-12-22T14:09:20Z ESLint "Fun" https://connect.hyland.com/t5/alfresco-archive/eslint-quot-fun-quot/m-p/160011#M114030 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 switc Thu, 22 Dec 2016 14:09:20 GMT https://connect.hyland.com/t5/alfresco-archive/eslint-quot-fun-quot/m-p/160011#M114030 ddraper 2016-12-22T14:09:20Z