Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Eslint issues, could it auto fix? #5

Open
LiamKarlMitchell opened this issue Dec 4, 2021 · 0 comments
Open

Eslint issues, could it auto fix? #5

LiamKarlMitchell opened this issue Dec 4, 2021 · 0 comments

Comments

@LiamKarlMitchell
Copy link

LiamKarlMitchell commented Dec 4, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant