Setup ESLint, and lint/format files

Author: Kocal

.github/workflows/test.yaml

@@ -20,10 +20,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@master
-            - name: Prettier
-              run: |
-                  yarn global add prettier@^2.2.0
-                  ~/.yarn/bin/prettier --check src/*/Resources/assets/{src,test}/*.js --config .prettierrc.json
+            - run: yarn
+            - run: yarn check-lint
+            - run: yarn check-format
 
     tests-php-low-deps:
         runs-on: ubuntu-latest

.prettierrc.json

@@ -18,8 +18,8 @@ infrastructure.
 This problem is not new: it looks a whole lot like the state of Symfony in PHP
 before Symfony Flex. We need a Symfony Flex equivalent for JavaScript: a tool to
 build amazing User Experiences as quickly as we can now setup
-[an HTTP client](https://symfony.com/doc/current/http_client.html), 
-[a Mailer](https://symfony.com/doc/current/mailer.html) or 
+[an HTTP client](https://symfony.com/doc/current/http_client.html),
+[a Mailer](https://symfony.com/doc/current/mailer.html) or
 [an administration panel](https://symfony.com/doc/current/bundles/EasyAdminBundle/index.html).
 
 **That's Symfony UX.**
@@ -28,24 +28,24 @@ build amazing User Experiences as quickly as we can now setup
 
 # Packages
 
-* [UX Chart.js](https://github.com/symfony/ux-chartjs): 
-  [Chart.js](https://www.chartjs.org/) chart library integration for Symfony
-* [UX Cropper.js](https://github.com/symfony/ux-cropperjs): 
-  [Cropper.js](https://fengyuanchen.github.io/cropperjs/) image cropper library integration for Symfony
-* [UX Dropzone](https://github.com/symfony/ux-dropzone): 
-  File input drag-and-drop zones for Symfony Forms
-* [UX LazyImage](https://github.com/symfony/ux-lazy-image):
-  Improve image loading performances through lazy-loading and data-uri thumbnails
-* [UX Swup](https://github.com/symfony/ux-swup):
-  [Swup](https://swup.js.org/) page transition library integration for Symfony
+-   [UX Chart.js](https://github.com/symfony/ux-chartjs):
+    [Chart.js](https://www.chartjs.org/) chart library integration for Symfony
+-   [UX Cropper.js](https://github.com/symfony/ux-cropperjs):
+    [Cropper.js](https://fengyuanchen.github.io/cropperjs/) image cropper library integration for Symfony
+-   [UX Dropzone](https://github.com/symfony/ux-dropzone):
+    File input drag-and-drop zones for Symfony Forms
+-   [UX LazyImage](https://github.com/symfony/ux-lazy-image):
+    Improve image loading performances through lazy-loading and data-uri thumbnails
+-   [UX Swup](https://github.com/symfony/ux-swup):
+    [Swup](https://swup.js.org/) page transition library integration for Symfony
 
 # Let's build an amazing ecosystem together
 
 Symfony UX is an **initiative**: its aim is to build an ecosystem. To achieve this,
-we need your help: what other packages could we create in Symfony UX? What about a 
-library that automatically adds an [input mask](https://imask.js.org/) to the text 
+we need your help: what other packages could we create in Symfony UX? What about a
+library that automatically adds an [input mask](https://imask.js.org/) to the text
 fields of your Symfony forms? Or the ability to make the `EntityType` render with
-[AJAX auto-completion](https://tarekraafat.github.io/autoComplete.js)? Anything you 
+[AJAX auto-completion](https://tarekraafat.github.io/autoComplete.js)? Anything you
 do in JavaScript could be done streamlined as a UX package.
 
 We have some ideas and we will release more packages in the coming days. The rest

README.md

@@ -1,8 +1,49 @@
 {
     "private": true,
-    "workspaces": ["src/*/Resources/assets"],
+    "workspaces": [
+        "src/*/Resources/assets"
+    ],
     "scripts": {
         "build": "yarn workspaces run build",
-        "test": "yarn workspaces run test"
+        "test": "yarn workspaces run test",
+        "lint": "yarn workspaces run lint --fix",
+        "format": "prettier src/*/Resources/assets/{src,test}/*.js {,src/*/}*.{json,md} --write",
+        "check-lint": "yarn lint --no-fix",
+        "check-format": "yarn format --no-write --check"
+    },
+    "devDependencies": {
+        "@babel/eslint-parser": "^7.12.1",
+        "eslint": "^7.15.0",
+        "eslint-config-prettier": "^6.15.0",
+        "eslint-plugin-jest": "^24.1.3",
+        "prettier": "^2.2.1"
+    },
+    "eslintConfig": {
+        "root": true,
+        "parser": "@babel/eslint-parser",
+        "extends": [
+            "eslint:recommended",
+            "prettier"
+        ],
+        "env": {
+            "browser": true
+        },
+        "overrides": [
+            {
+                "files": [
+                    "src/*/Resources/assets/test/*.js"
+                ],
+                "extends": [
+                    "plugin:jest/recommended"
+                ]
+            }
+        ]
+    },
+    "prettier": {
+        "printWidth": 120,
+        "trailingComma": "es5",
+        "tabWidth": 4,
+        "jsxBracketSameLine": true,
+        "singleQuote": true
     }
 }

package.json

@@ -92,8 +92,12 @@ export default class extends Controller {
         console.log(event.detail.chart); // You can access the chart instance using the event details
 
         // For instance you can listen to additional events
-        event.detail.chart.options.onHover = (mouseEvent) => { /* ... */ };
-        event.detail.chart.options.onClick = (mouseEvent) => { /* ... */ };
+        event.detail.chart.options.onHover = (mouseEvent) => {
+            /* ... */
+        };
+        event.detail.chart.options.onClick = (mouseEvent) => {
+            /* ... */
+        };
     }
 }
 ```

src/Chartjs/README.md

@@ -14,7 +14,8 @@
     },
     "scripts": {
         "build": "babel src -d dist",
-        "test": "babel src -d dist && jest"
+        "test": "babel src -d dist && jest",
+        "lint": "eslint src test"
     },
     "dependencies": {
         "chart.js": "^2.9.4"

src/Chartjs/Resources/assets/package.json

@@ -2,7 +2,13 @@
     "name": "symfony/ux-chartjs",
     "type": "symfony-bundle",
     "description": "Chart.js integration for Symfony",
-    "keywords": ["symfony", "ux", "chart", "chart.js", "chartjs"],
+    "keywords": [
+        "symfony",
+        "ux",
+        "chart",
+        "chart.js",
+        "chartjs"
+    ],
     "homepage": "https://symfony.com",
     "license": "MIT",
     "authors": [

src/Chartjs/composer.json

@@ -18,7 +18,8 @@
     },
     "scripts": {
         "build": "babel src -d dist",
-        "test": "babel src -d dist && jest"
+        "test": "babel src -d dist && jest",
+        "lint": "eslint src test"
     },
     "dependencies": {
         "cropperjs": "^1.5.9"

src/Cropperjs/Resources/assets/package.json

@@ -2,7 +2,13 @@
     "name": "symfony/ux-cropperjs",
     "type": "symfony-bundle",
     "description": "Cropper.js integration for Symfony",
-    "keywords": ["symfony", "ux", "cropper", "cropper.js", "cropperjs"],
+    "keywords": [
+        "symfony",
+        "ux",
+        "cropper",
+        "cropper.js",
+        "cropperjs"
+    ],
     "homepage": "https://symfony.com",
     "license": "MIT",
     "authors": [

src/Cropperjs/composer.json

@@ -69,7 +69,7 @@ the `@symfony/ux-dropzone/src/style.css` autoimport to `false`:
 }
 ```
 
-> *Note*: you should put the value to `false` and not remove the line so that Symfony Flex
+> _Note_: you should put the value to `false` and not remove the line so that Symfony Flex
 > won't try to add the line again in the future.
 
 Once done, the default stylesheet won't be used anymore and you can implement your own CSS on