Init setup to lint HTML & HTML ERB files

.config/.erb_lint.yml

@@ -0,0 +1,55 @@
+# https://github.com/Shopify/erb_lint
+glob: "**/*.{text,js}{+*,}.erb"
+exclude:
+  - '**/vendor/**/*'
+  - '**/node_modules/**/*'
+EnableDefaultLinters: true
+linters:
+  # Default linters are enabled by default, so we only need to specify the
+  # ones we want to disable, as well as any additional ones we want to enable.
+  # Note that we disable some purely HTML-related linters here since we use
+  # HTML-ESLint for those (which is much more powerful).
+  # erb_lint is mainly used for Ruby-related linting in any files that contain
+  # ERB tags.
+  SpaceIndentation:
+    enabled: false
+  SpaceInHtmlTag:
+    enabled: false
+  TrailingWhitespace:
+    enabled: false
+  ExtraNewLine:
+    enabled: false
+  FinalNewLine:
+    enabled: false
+  SelfClosingTag:
+    enabled: false
+  PartialInstanceVariable:
+    enabled: true
+  DeprecatedClasses:
+    enabled: true
+  ErbSafety:
+    enabled: true
+  Rubocop:
+    enabled: true
+    rubocop_config:
+      inherit_from:
+        - .config/.rubocop.yml
+        # Disable some rules that would require global context, since each
+        # ruby statement (between ERB tags) is parsed and analyzed independently
+        # of each other by erb_lint.
+      Layout/InitialIndentation:
+        Enabled: false
+      Layout/LineLength:
+        Enabled: false
+      Layout/TrailingEmptyLines:
+        Enabled: false
+      Layout/TrailingWhitespace:
+        Enabled: false
+      Naming/FileName:
+        Enabled: false
+      Style/FrozenStringLiteralComment:
+        Enabled: false
+      Lint/UselessAssignment:
+        Enabled: false
+      Rails/OutputSafety:
+        Enabled: false

.config/commands/lint.justfile

@@ -0,0 +1,8 @@
+[private]
+help:
+    @just --list --justfile {{source_file()}}
+
+@erb *args:
+    #!/usr/bin/env bash
+    cd {{justfile_directory()}}
+    bundle exec erb_lint --config .config/.erb_lint.yml --show-linter-names --autocorrect {{args}}

.config/eslint.mjs

@@ -13,6 +13,7 @@ import stylistic from "@stylistic/eslint-plugin";
 import erb from "eslint-plugin-erb";
 import pluginCypress from "eslint-plugin-cypress/flat";
 import globals from "globals";
+import html from "@html-eslint/eslint-plugin";
 
 const ignoreFilesWithSprocketRequireSyntax = [
   "app/assets/javascripts/application.js",
@@ -108,8 +109,8 @@ export default [
   // Allow linting of ERB files, see https://github.com/Splines/eslint-plugin-erb
   erb.configs.recommended,
   pluginCypress.configs.recommended,
-  // Globally ignore the following paths
   {
+    // Globally ignore the following paths
     ignores: [
       "node_modules/",
       "pdfcomprezzor/",
@@ -151,5 +152,51 @@ export default [
       // see https://github.com/Splines/eslint-plugin-erb/releases/tag/v2.0.1
       reportUnusedDisableDirectives: "off",
     },
+    ignores: ["**/*.html**"],
+  },
+  {
+    // HTML linting (aside from erb_lint)
+    files: ["**/*.html", "**/*.html.erb"],
+    processor: erb.processors["processorHtml"],
+    ...html.configs["flat/recommended"],
+    plugins: {
+      "@html-eslint": html,
+      "@stylistic": stylistic,
+    },
+    rules: {
+      "@stylistic/eol-last": ["error", "always"],
+      "@stylistic/no-trailing-spaces": "error",
+      "@stylistic/no-multiple-empty-lines": ["error", { max: 1, maxEOF: 0 }],
+      ...html.configs["flat/recommended"].rules,
+      // 🎈 Best Practices
+      "@html-eslint/no-extra-spacing-text": "error",
+      "@html-eslint/no-script-style-type": "error",
+      // we should add this rule later
+      // "@html-eslint/no-target-blank": "error",
+      // 🎈 Accessibility
+      "@html-eslint/no-abstract-roles": "error",
+      "@html-eslint/no-accesskey-attrs": "error",
+      "@html-eslint/no-aria-hidden-body": "error",
+      "@html-eslint/no-non-scalable-viewport": "error",
+      "@html-eslint/no-positive-tabindex": "error",
+      "@html-eslint/no-skip-heading-levels": "error",
+      // 🎈 Styles
+      "@html-eslint/attrs-newline": ["error", {
+        closeStyle: "newline",
+        ifAttrsMoreThan: 5,
+      }],
+      // activate once all other rules are in place (otherwise ESLint throws errors)
+      "@html-eslint/element-newline": "off",
+      // something for the long run
+      // "@html-eslint/id-naming-convention": ["error", "kebab-case"],
+      "@html-eslint/indent": ["error", 2],
+      "@html-eslint/sort-attrs": "error",
+      "@html-eslint/no-extra-spacing-attrs": ["error", {
+        enforceBeforeSelfClose: true,
+        disallowMissing: true,
+        disallowTabs: true,
+        disallowInAssignment: true,
+      }],
+    },
   },
 ];

.justfile

@@ -15,6 +15,9 @@ mod docker ".config/commands/docker.justfile"
 # Commands to manage dependencies
 mod deps ".config/commands/deps.justfile"
 
+# Commands to lint code
+mod lint ".config/commands/lint.justfile"
+
 # Some utils, e.g. ERD-generation etc.
 mod utils ".config/commands/utils.justfile"
 

.vscode/extensions.json

@@ -5,6 +5,7 @@
         "streetsidesoftware.code-spell-checker",
         "streetsidesoftware.code-spell-checker-german",
         "nefrob.vscode-just-syntax",
-        "connorshea.vscode-ruby-test-adapter"
+        "connorshea.vscode-ruby-test-adapter",
+        "emeraldwalk.runonsave"
     ]
 }

.vscode/settings.json

@@ -18,11 +18,26 @@
     "eslint.options": {
         "overrideConfigFile": ".config/eslint.mjs"
     },
+    "eslint.validate": [
+        "javascript",
+        "html"
+    ],
     //////////////////////////////////////
     // HTML
     //////////////////////////////////////
     "[html]": {
-        "editor.formatOnSave": false // TODO: activate once HTML formatter installed
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    },
+    "emeraldwalk.runonsave": {
+        "autoClearConsole": true,
+        "commands": [
+            {
+                "match": "\\.(html|text|js).erb$",
+                "cmd": "just lint erb ${file}",
+                "isAsync": true
+            }
+        ]
     },
     //////////////////////////////////////
     // Ruby (Rubocop)
@@ -52,7 +67,6 @@
         "codeLens": true,
         "definition": true
     },
-    "rubyLsp.enableExperimentalFeatures": true,
     //////////////////////////////////////
     // Ruby Test Explorer
     //////////////////////////////////////
@@ -67,7 +81,7 @@
     // Files
     //////////////////////////////////////
     "files.exclude": {
-        "node_modules/": true,
+        "node_modules/": false,
         "pdfcomprezzor/": true,
         "coverage/": true,
         "solr/": true,
@@ -77,6 +91,7 @@
         "*.js.erb": "javascript",
         "*.html.erb": "html"
     },
+    "files.saveConflictResolution": "overwriteFileOnDisk",
     //////////////////////////////////////
     // Editor
     //////////////////////////////////////
@@ -111,6 +126,7 @@
     "cSpell.words": [
         "activerecord",
         "ajax",
+        "autocorrect",
         "commontator",
         "cospeaker",
         "cospeakers",
@@ -119,11 +135,12 @@
         "helpdesk",
         "katex",
         "preselection",
+        "Rubocop",
         "selectize",
         "Timecop",
         "turbolinks",
-        "Unsets",
         "uncached",
+        "Unsets",
         "whitespaces"
     ],
     "cSpell.enableFiletypes": [

Gemfile

@@ -71,6 +71,7 @@ gem "turbolinks", "~> 5.2" # make navigating the app faster
 gem "webpacker", "~> 5.4"
 
 group :development, :docker_development do
+  gem "erb_lint", "~> 0.7.0"
   gem "listen", "~> 3.9"
   gem "marcel", "~> 1.0"
   gem "pgreset", "~> 0.4"

Gemfile.lock

@@ -149,6 +149,13 @@ GEM
     base64 (0.2.0)
     bcrypt (3.1.20)
     benchmark (0.4.0)
+    better_html (2.1.1)
+      actionview (>= 6.0)
+      activesupport (>= 6.0)
+      ast (~> 2.0)
+      erubi (~> 1.4)
+      parser (>= 2.4)
+      smart_properties
     bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.18.4)
@@ -213,6 +220,13 @@ GEM
     down (5.4.2)
       addressable (~> 2.8)
     drb (2.2.1)
+    erb_lint (0.7.0)
+      activesupport
+      better_html (>= 2.0.1)
+      parser (>= 2.7.1.4)
+      rainbow
+      rubocop (>= 1)
+      smart_properties
     erubi (1.13.0)
     erubis (2.7.0)
     et-orbi (1.2.11)
@@ -587,6 +601,7 @@ GEM
       simplecov (~> 0.19)
     simplecov-html (0.13.1)
     simplecov_json_formatter (0.1.4)
+    smart_properties (1.17.0)
     spring (2.1.1)
     spring-watcher-listen (2.0.1)
       listen (>= 2.7, < 4.0)
@@ -687,6 +702,7 @@ DEPENDENCIES
   database_cleaner-active_record (~> 2.2)
   devise (~> 4.9)
   devise-bootstrap-views (~> 1.1)
+  erb_lint (~> 0.7.0)
   erubis (~> 2.7)
   exception_handler (~> 0.8.0.0, ~> 0.8.0)
   factory_bot_rails (~> 6.4)

package.json

@@ -18,10 +18,12 @@
     "webpack-dev-server": "^4.15.1"
   },
   "devDependencies": {
+    "@html-eslint/eslint-plugin": "^0.31.1",
+    "@html-eslint/parser": "^0.31.0",
     "@stylistic/eslint-plugin": "^1.8.0",
-    "eslint": "^9.1.1",
+    "eslint": "^9.17.0",
     "eslint-plugin-cypress": "^3.3.0",
-    "eslint-plugin-erb": "^2.0.0",
+    "eslint-plugin-erb": "^2.1.0",
     "globals": "^15.1.0"
   },
   "scripts": {