Update to the current Cypress Eslint plugin (cypress-io#394)

* update eslint cypress plugin

* add lint ci job

* fix many eslint errors

* more fixes

* more fixes

* link linter from development doc

* fix circleci file

* more linting

* add a couple of folders that do not lint to eslint ignore file

* Update .eslintignore

Co-Authored-By: Ben Kucera <[email protected]>

* fix application actions linting

* add more settings

Co-authored-by: Ben Kucera <[email protected]>

Author: bahmutov

Diff for: .eslintignore

@@ -0,0 +1,7 @@
+examples/blogs__e2e-snapshots/snapshots.js
+examples/blogs__element-coverage/src
+examples/preprocessors__typescript-webpack/dist
+node_modules
+**/vendor
+# don't ignore hidden files, useful for formatting json config files
+!.*

Diff for: .eslintrc

@@ -1,7 +1,10 @@
 {
+  "plugins": [
+    "@cypress/dev"
+  ],
   "extends": [
-    "plugin:cypress-dev/general",
-    "plugin:cypress-dev/tests"
+    "plugin:@cypress/dev/general",
+    "plugin:@cypress/dev/tests"
   ],
   "env": {
     "node": true

Diff for: Development.md

@@ -4,6 +4,15 @@
 - there is a script [test-examples.js](test-examples.js) useful to run all examples one by one
   * note that the script only runs an example if it has `npm run test:ci` script command.
 
+### Linting
+
+Many recipes are linted using [@cypress/eslint-plugin-dev](https://github.com/cypress-io/eslint-plugin-dev). You can lint a single folder or lint and auto-fix with:
+
+```shell
+$ npx eslint examples/blogs__vue-vuex-rest/cypress
+$ npx eslint examples/blogs__vue-vuex-rest/cypress --fix
+```
+
 ### Testing in specific browser
 
 You can test some examples using a specific browser. For example, to run just some folders using Brave browser, call

Diff for: circle.yml

@@ -72,6 +72,28 @@ jobs:
             - app
             - .cache/Cypress
 
+  lint:
+    working_directory: ~/app
+    docker:
+      - image: cypress/base:10
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run: |
+          npx eslint examples/blogs__a11y \
+          examples/blogs__application-actions \
+          examples/blogs__codepen-demo \
+          examples/blogs__direct-control-angular \
+          examples/blogs__e2e-api-testing \
+          examples/blogs__e2e-snapshots \
+          examples/blogs__element-coverage \
+          examples/blogs__testing-redux-store/cypress \
+          examples/blogs__vue-vuex-rest/cypress \
+          examples/preprocessors__grep \
+          examples/preprocessors__typescript-browserify \
+          examples/preprocessors__typescript-webpack \
+          examples/unit-testing__react
+
   # dummy job running after all end-to-end tests
   after-tests:
     docker:
@@ -223,14 +245,16 @@ jobs:
 # and then use this list from workflow definition
 all_jobs: &all_jobs
   - build
+  - lint:
+      requires:
+        - build
   - test-examples:
       requires:
         - build
       filters:
         branches:
           only:
             - master
-            - allow-testing-in-chunks
 
   - test-examples-chrome:
       requires:
@@ -398,6 +422,7 @@ all_jobs: &all_jobs
   - after-tests:
       requires:
         - build
+        - lint
         - blogs__a11y
         - blogs__application-actions
         - blogs__direct-control-angular

Diff for: examples/blogs__a11y/cypress/integration/failing-spec.js

@@ -8,8 +8,7 @@ describe('A11y fails', () => {
     cy.contains('p', 'hard to read')
   })
 
-  // skip this test on purpose - if you enable it
-  // it will fail with color contrast error
+  // NOTE: skip this test on purpose - enable to see failing color contrast check
   it.skip('does not pass accessibility check', () => {
     cy.contains('p', 'hard to read')
     cy.injectAxe()