quasalang icon indicating copy to clipboard operation
quasalang copied to clipboard

Eslint issues, could it auto fix?

Open LiamKarlMitchell opened this issue 2 years ago • 0 comments

Experiencing some teething pains with eslint. Is there some way your cli tool could auto fix linter issues after generating the files if eslint is present? Or perhaps some kind of eslint.md documentation in the repo may be worthwhile. Sorry if this is common knowledge, haven't touched front-end in quite a while my self.

[webpack-dev-server] ERROR in src/i18n/de/index.js:8:2
eol-last: Newline required at end of file but not found.
    6 | 	goodbye: `Auf Wiedersehen`,
    7 | 	thanks: `Danke`,
  > 8 | }
      |  ^

index.js?a29e:558 [webpack-dev-server] ERROR in src/i18n/index.js:10:2
quote-props: Unnecessarily quoted property 'de' found.
     8 | 	'en-US': enUS, // English
     9 | 	'fr': fr, // French
  > 10 | 	'de': de, // German
       | 	^^^^^^^^
    11 | }

indent: Expected indentation of 2 spaces but found 1 tab.
     6 |
     7 | export default { 
  >  8 | 	'en-US': enUS, // English
       | ^
     9 | 	'fr': fr, // French
    10 | 	'de': de, // German
    11 | }

Found a few work-arounds which might be okay.

1. Turning off the rules in the .eslintrc.js file. Or disable eslint completely, which is not recommend as linters serve a great purpose, enforcing a consistent code styling which helps immensely when diffing changes in source control and when reading the code.

    // Ignore some "errors" that are a pain.
    // eol-last: Newline required at end of file but not found.
    'eol-last': 'off',
    // comma-dangle: Unexpected trailing comma.
    'comma-dangle': 'off',
    // quote-props: Unnecessarily quoted property '...' found.
    'quote-props': 'off',
    // indent: Expected indentation of 2 spaces but found 1 tab.
    'indent': 'off',

2. Fixing in Webstorm/Editor with a Beautify or other fix up command. In Webstorm there is a "Fix ESLint Problems" on the right click menu.

3. Fixing with npm run lint -- --fix npm run lint -- --fix

Or perhaps

npx eslint --ext .js ./src/i18n/ --fix

Well this one seems good, if eslint is present/enabled perhaps quasalang cli could run it or a variant of the command on the i18n directory after generating the files?

In my package.json generated by Quasar CLI for a new project it looks something like this.

  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./"
  },

4. Configure webPackDevServer to auto fix eslint In quasar.conf.js you can add to the eslint configuration to specify fix: true

I'm using Type Script but it looks something like this.

    supportTS: {
      tsCheckerConfig: {
        eslint: {
          enabled: true,
          files: './src/**/*.{ts,tsx,js,jsx,vue}',
          options: {
            fix: true
          }
        }
      }
    },

I think I had to stop and restart quasar dev command to re-load this change. Turning on auto fix seems to be a good option for me.

https://webpack.js.org/plugins/eslint-webpack-plugin/#fix

LiamKarlMitchell avatar Dec 04 '21 16:12 LiamKarlMitchell