ESLint

To improve the quality of our JS and VueJS code, ESLint and eslint-plugin-vue are implemented within the chill-bundles project.

Commands

To run ESLint, you can simply use the eslint command within the chill-bundles directory. This runs eslint not taking the baseline into account, thus showing all existing errors in the project.

A script was also added to package.json allowing you to execute yarn run eslint. This will run eslint, but taking the baseline into account, thus only alerting to newly created errors.

The eslint command is configured to also run prettier which will simply format the code to look more uniform (takes care indentation for example).

Interesting options that can be used in combination with eslint are:

  • --quiet to only get errors and silence the warnings
  • --fix to have ESLint fix what it can, automatically. This will not fix everything.

Baseline

To allow us the time to fix linting errors/warnings a baseline has been created using the following command - npx eslint-baseline "**/*.{js,vue}"

The baseline has been commited and the gitlab CI setup to only fail upon new errors/warnings being created. When fixing errors/warnings manually, please update the baseline.

  1. Delete the current baseline file
  2. Run the above command locally, this will automatically create a new baseline that should be commited

Rules

We use Vue 3, so the rules can be configured as follows within the eslint.config.mjs file:

  • .configs["flat/base"] … Settings and rules to enable correct ESLint parsing.

Configurations for using Vue.js 3.x:

  • .configs["flat/essential"] : Base rules plus rules to prevent errors or unintended behavior.
  • .configs["flat/strongly-recommended"] … Above, plus rules to considerably improve code readability and/or dev experience.
  • .configs["flat/recommended"] … Above, plus rules to enforce subjective community defaults to ensure consistency.

Detailed information about which rules each set includes can be found here: https://eslint.vuejs.org/rules/

Manual Rule Configuration

We can also manually configure certain rules or override rules that are part of the ruleset specified above.

For example, if we want to turn off a certain rule, we can do so as follows:

rules: {
  'vue/multi-word-component': 'off'
}

We could also change the severity of a certain rule from ‘error’ to ‘warning’, for example.

Within specific .js or .vue files, we can also override a certain rule only for that specific file by adding a comment:

/* eslint multi-word-component: "off", no-child-content: "error"
--------
Here's a description about why this configuration is necessary. */