Linter Information

Linter

Setup

JS and Vue Files

For linting JavaScript files, all of the necessary configs are already in the master branch.

Once cloned, restart VSCode and a "recommended extensions" pop-up should appear in the lower left corner. Click on install extensions, then reload.

Now every time you save a file VSCode will attempt to fix any styling/linter issues.

PHP Files

For PHP files, you must download and install php-cs-fixer. The easiest way to do this is through Homebrew if you have it installed. Simply run:

brew install php-cs-fixer

Alternatively follow the instructions on this page to have php-cs-fixer available as a CLI globally. Once installed, php-cs-fixer will automatically run every time a commit is made.

You can also run php-cs-fixer manually using the fix command as follows: php-cs-fixer fix /path/to/file.

Rules

The config file is found in .eslintrc.js. It uses the recommended rule set from eslint and eslint-plugin-vue, found here:

• ESLint recommended
• ESLint Vue Plugin

I made some changes from the base ruleset to best match our project.

ESLint and Vue

1. vue/component-name-in-template-casing: [error, kebab-case]

   Enforces Vue components in templates to be in kebab case. HTML is case insensitive, so it reads PascalCase as pascalcase.

   e.g.

   • <tyde-menu /> — ok
   • <TydeMenu /> — not ok

2. vue/name-property-casing: [error, kebab-case]

   Same as above, but in the Vue component name declaration. (My thinking was to keep it consistent).

3. vue/no-v-html: off

   • <div v-html="<p>hello!</p>"> — not ok

   Normally this is turned on because of XSS attack vulnerability.

   I needed to use this in migrating the text lightbox to a Vue component. If we need this to be on, I would find some way to convert our text to html safely.

4. no-prototype-builtins: off

   • Object.prototype.hasOwnProperty.call(obj, 'hello') — ok
   • myObj.hasOwnProperty('hello') — not ok

   Normally this is turned on because if some lib changes the object prototype, our object would not work as expected.

   I turned this off because the first example seems very long for doing the same thing.

Prettier

1. semi: false — turns off semi-colons

2. htmlWhitespaceSensitivity: ignore

   For inline elements, whitespace matters, so prettier doesn't try to format into something nicer. That's why the following weird format happens:

   <span class="dolorum atque aspernatur"
     >Est molestiae sunt facilis qui rem.</span
   >

   I turned this off so the above format instead looks like:

   <span class="dolorum atque aspernatur">
     Est molestiae sunt facilis qui rem.
   </span>

3. printWidth: 85 — maximum line length

4. trailingComma: es5 — adds commas to last element of arrays and objects