#80 - setup eslint (#96)

* feat: add scripts

* feat: eslint config

* feat: update eslint

* fix: after review

* fix: eslint

Co-authored-by: aleksander.kowalski <[email protected]>

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'standard',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  rules: {
+    semi: [2, 'never'],
+    quotes: ['error', 'single'],
+    indent: ['error', 2],
+    'comma-dangle': ['error', 'always-multiline'],
+    'object-curly-spacing': ['error', 'always'],
+  }
+}

.github/workflows/js.yml

@@ -0,0 +1,31 @@
+name: Lint JS stuff
+
+on:
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  test-and-lint-js:
+    name: Lint JS stuff
+    runs-on: ubuntu-20.04
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-npm-dependencies-${{ hashFiles('package.lock') }}
+          restore-keys: ${{ runner.os }}-npm-dependencies
+
+      - name: Set up node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - name: Instal npm dependencies
+        run: npm install
+
+      - name: Run JS linter
+        run: npm run eslint

package.json

@@ -12,7 +12,9 @@
     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "eslint": "./node_modules/.bin/eslint resources/js/ --ext .js",
+    "eslint-fix": "./node_modules/.bin/eslint resources/js/ --ext .js --fix"
   },
   "repository": {
     "type": "git",
@@ -26,16 +28,21 @@
   },
   "homepage": "https://github.com/blumilksoftware/meetup#readme",
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.0",
-    "autoprefixer": "^10.4.4",
-    "browser-sync": "^2.27.9",
     "browser-sync-webpack-plugin": "^2.3.0",
-    "laravel-mix": "^6.0.43",
-    "postcss": "^8.4.12",
-    "tailwindcss": "^3.0.23"
+    "eslint": "^8.14.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.2.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-tailwindcss": "^3.5.0"
   },
   "dependencies": {
     "alpinejs": "^3.9.6",
-    "cross-env": "^7.0.3"
+    "cross-env": "^7.0.3",
+    "tailwindcss": "^3.0.23",
+    "laravel-mix": "^6.0.43",
+    "@tailwindcss/forms": "^0.5.0",
+    "autoprefixer": "^10.4.4",
+    "postcss": "^8.4.12"
   }
 }

resources/js/app.js

@@ -1,5 +1,5 @@
-import Alpine from 'alpinejs';
+import Alpine from 'alpinejs'
 
-window.Alpine = Alpine;
+window.Alpine = Alpine
 
-Alpine.start();
+Alpine.start()

webpack.mix.js

@@ -1,11 +1,9 @@
 let mix = require('laravel-mix');
 
 mix
-  .js('resources/js/app.js', 'resources/static/js')
-  .setPublicPath('resources/static')
-  .postCss('resources/css/app.css', 'resources/static/css', [
-    require('tailwindcss'),
-  ]);
-
-  mix.browserSync('127.0.0.1');
-  mix.disableSuccessNotifications();
+    .js('resources/js/app.js', 'resources/static/js')
+    .version()
+    .setPublicPath('resources/static')
+    .postCss('resources/css/app.css', 'resources/static/css', [
+        require('tailwindcss'),
+    ]);