Formatting: ESLint not being enforced

[rwx-yxu]

I am noticing that eslint coding standards are not being enforced for project. This is because of the absence of a .eslintrc.js file. The cypress framework has set one up for itself with eslintrc.cjs. We need to get eslint setup for development because it has useful things like auto format and good error checks for if the import is not found when used along side the eslint plugin for vs code.

Testing should essentially be to check that eslint is now highlighting formatting errors when changes are being made along side the eslint plug in.

Commands to get started: npm install eslint npm init @eslint/config when going through the command prompt, make sure to use eslintrc format as javascript rather than the other formats. Then, at the end, edit the created .eslintrc.js file with this config that I think is sensible for our usage:

module.exports = {
  root: true,
  env: {
    node: true
  },
  parserOptions: {
    extraFileExtensions: ['.vue'],
    ecmaVersion: 2020
  },
  rules: {
    'comma-dangle': [
      'error',
      'never'
    ],
    'eol-last': [2, 'windows'],
    indent: ['error', 2, { 'SwitchCase': 1 }],
    'linebreak-style': [
      'error',
      'windows'
    ],
    'max-len': [
      'error',
      {
        code: 120
      }
    ],
    'no-trailing-spaces': 'error',
    'object-curly-spacing': ['error', 'always'],
    'quotes': [
      'error',
      'single'
    ],
    semi: ['error', 'always'],
    'vue/attribute-hyphenation': 0,
    'vue/html-indent': ['error', 2, {
      baseIndent: 1
    }],
    'vue/max-attributes-per-line': ['error', {
      'singleline': {
        'max': 3
      },
      'multiline': {
        'max': 1
      }
    }],
    'vue/script-indent': [
      'error',
      2,
      { baseIndent: 1 }
    ]
  },
  extends: [
    'plugin:vue/base',
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-strongly-recommended',
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:import/recommended'
  ],
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        indent: 'off'
      }
    }
  ]
};

[rwx-yxu]

Will need to change the Line feeds in vs code btw through the bottom right blue bar. Need to verify that it doesn't screw the code when pushing to github so I recommend to make a throwaway code change and revert that change once verified that nothing broke in case there is somehow a conflict with how GitHub has their line feeds and the one that is defined.

[rwx-yxu]

Modify the github actions workflow to run the linting command to enforce code style. npm run lint I kind of expect the workflow to fail so fix the styling errors.

[AymanReh]

Researching eslint if the proposed fix does not work using the global version of esLint help wth the issue: npm install -g eslint

[rwx-yxu]

Moving to in review since pull request is open