Webstorm not recognising Vuetify component html tags

Recently I moved from VS Code to Webstorm. What a brilliant IDE. It really improved my development flow. One thing that has been irritating me is that the Vuetify component html tags are not recognised, which results in a s**t load of warning messages of unrecognised html tags.

After Googling around I found an issue on the Vuetify GitHub Issues that provides a simple workaround. All you need to do is create a file somewhere in the project that describes the Vuetify components. You don’t need to import the file. It just has to be accessible to Webstorm so that it can be analysed.

There is a fix in the works for the Vuetify api-generator that provides this file out of the box. Just checkout the Javascript and Typescript files.

I placed the Javascript file in my plugin directory naming it vuetify-fake-components-for-webstorm.js. After that all the warnings of unrecognised html tags disappeared like magic. Wooho!

Advertisements

Accessing home folders from Windows Subsystem for Linux in Explorer

Are you running Windows Subsystem for Linux (WSfL)? Ever wondered where the home folders are stored so that you can access them from Explorer? Seek no further for here is the answer.

Every distribution has it’s own location. They can be found under:

%LOCALAPPDATA%\Packages

For Ubuntu 18.04 you can find the home folders in the following location:

%LOCALAPPDATA%\Packages\CanonicalGroupLimited.Ubuntu18.04onWindows_79rhkp1fndgc\LocalState\rootfs\home

Enjoy!

Change root password Windows Subsystem for Linux

Today I was setting up Windows Subsystem for Linux and wanted to change to the root user using the command:

su -

I was prompted for the password, but had no idea what it was. So I needed to figure out another way of switching to the root user instead of prefixing every command with sudo. Did I say switch and prefix and sudo? O yes, stupid me.

sudo su

Don’t forget to exit once you are done. And be careful not to wrech havoc while working under the root account. Have fun!

Adding fuzzy search to Feathers NeDB

Out of the box Feathers NeDB does not support fuzzy search. There is a hook that provides this functionality: feathers-nedb-fuzzy-search. It is really simple and straitforward to install and use.

  • Install
    npm install feathers-nedb-fuzzy-search --save
  • Configure
    Enable it for specifc services or alternatively enable it for all services in app.hooks.

    const search = require('feathers-nedb-fuzzy-search') 
    messages.hooks({
      before: {
        find: search()
      }
    })
  • Usage
    const messages = app.service('messages')
    messages.find({
      query: {
        $search: 'some string to search for'
      }
    })

    or

    http://mydomain.com/api/?search=Hello

Happy coding.

Adding hot reload to featherjs

Feathers is a very cool framework to quickly and easily setup API’s. Version 3 comes with a very cool CLI that generates all the scafolding code for you and makes it extremely easy to add services, hooks, etc. One thing that is missing is hot reloading to simplify the development proces. This is were nodemon comes to the rescue.

nodemon is a tool that helps developing node.js based applications by automatically restarting the node application when file changes in the directory are detected.

Setting nodemon up with Feather and Webpack si a simple two step proces.

  1. Install nodemon
    npm install --save-dev nodemon
  2. Add one line to the scripts section of Webpacks package.json file
    ...
      },
      "scripts": {
        "test": "npm run eslint && npm run mocha",
        "dev": "node ./node_modules/nodemon/bin/nodemon.js src/",
        "eslint": "eslint src/. test/. --config .eslintrc.json",
        "start": "node src/",
        "mocha": "mocha test/ --recursive"
      }
    ...

Now start Feathers using the following command.

npm run dev

That’s it, simple right?

Add Webpack alias using Quasar framework

Trying out Quasar Framework (QF) I ran into a minor challenge setting up the Webpack @ alias like Vue provides out of the box for imports.

import firebaseCfg from '@/firebase/config'

QF uses quasar.conf.js to simplify working with Webpack. So there is no Webpack config file that the alias can be added to directly.

Example of the Webpack resolve alias configuration that VUE provides out of the box.

  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  ...

After some Googeling I found the solution. Add the following to quasar.conf.js file to get the @ alias to work.

At the top of the file.

let path = require('path')

To the build section.

  ...
  build: {
    scopeHoisting: true,
    vueRouterMode: 'history',
    // vueCompiler: true,
    // gzip: true,
    // analyze: true,
    // extractCSS: false,
    extendWebpack (cfg) {
      cfg.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules|quasar)/
      })
      // Create aliases for importing
      cfg.resolve.alias = {
        ...cfg.resolve.alias,
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  ...

Pretty straight forward ones you know how 🙂

Finding out the size of directories in Linux

Do you want to know the size of a directory in Linux? Use the du command.

du -sh

Explanation

The du command estimates the space used by a directory.

The options -sh are (from man du):

  -s, --summarize
         display only a total for each argument

  -h, --human-readable
         print sizes in human readable format (e.g., 1K 234M 2G)

To check more than one directory and get the total size of those directories, use

du -sch *

What does the extra option mean?

  -c, --total
         produce a grand total

Include hidden files?

du -sch * .*

Want to know how much disk space has been used?

du -h .