ESLint and Prettier introduced

[psmyrek]

Closes #17.

ESLint and Prettier have been added to vsf-capybara. ESLint is configured to use eslint, vue and prettier recommended rules. Prettier is configured with own defaults (out of the box) but empty .prettierrc has been included in this repo to provide place for custom rules, if needed in the future.

I fixed all errors and warnings in capybara aka default theme basing on current ESLint and Prettier configuration:

• most of them have been automatically fixed by calling eslint --ext .js,.vue ./ --fix:
  • attributes order and placement
  • component properties order
  • single quotes replaced by double quotes
  • code formatting
• 100+ of them have to be investigated and fixed manually:
  • unused variables have been removed
  • all v-html have been replaced with v-text
  • all v-for used together with v-if have been replaced with equivalent computed properties
  • one issue has been temporarily "fixed" in pages/Category.vue by disabling require-atomic-updates rule due to pending fix in ESLint require-atomic-updates false positive eslint/eslint#11899
  • fixed dependencies in package.json for current capybara theme to match its real dependencies used in source code - it should be updated as soon as storefront-ui components are integrated and legacy code becomes unused

The lint script has been added to package.json and dev script now points to main repo (your vue-storefront) since there is no sense to just build theme without main vue-storefront project.

Now vsf-capybara is error and warning free and it just waits for actual start of development 😎

I have a lot of problems and conflicts with integration ESLint 6.x and it seems that it is quite common: microsoft/vscode-eslint#696 (it is in vscode repo but it looks like this is quite "global" issue). Finally, I had to downgrade to the latest 5.x version which works perfectly.

[psmyrek]

ESLint works:

Prettier works:

[rmakara]

Respect for description and screenshots :)