Add Prettier plugin for Nunjuck templates (#3887)

CHANGELOG.md

@@ -18,6 +18,7 @@ Thanks to: @dathbe.
 ### Added
 
 - Added configuration option for `User-Agent`, used by calendar & news module (#3255)
+- [linter] Added prettier plugin for nunjuck templates (#3887)
 
 ### Changed
 
@@ -308,7 +309,7 @@ For more info, please read the following post: [A New Chapter for MagicMirror: T
 ### Added
 
 - Output of system information to the console for troubleshooting (#3328 and #3337), ignore errors under aarch64 (#3349)
-- [core] Add `eslint-plugin-package-json` to lint the `package.json` files (#3368)
+- [linter] Add `eslint-plugin-package-json` to lint the `package.json` files (#3368)
 - [weather] `showHumidity` config is now a string describing where to show this element. Supported values: "wind", "temp", "feelslike", "below", "none". (#3330)
 - electron-rebuild test suite for electron and 3rd party modules compatibility (#3392)
 - Create MM² icon and attach it to electron process (#3407)
@@ -470,7 +471,7 @@ Special thanks to @khassel, @rejas and @sdetweil for taking over most (if not al
 - Added UV Index to hourly and current Weather, with support for Openmeteo
 - Added tests for serveronly
 - Set Timezone `Europe/Berlin` in unit tests (needed for new formatTime tests)
-- Added no-param-reassign eslint rule and fix warnings
+- [linter] Added no-param-reassign eslint rule and fix warnings
 - [updatenotification] Added `sendUpdatesNotifications` feature. Broadcast update with `UPDATES` notification to other modules
 - [updatenotification] Allow force scanning with `SCAN_UPDATES` notification from other modules
 - Added per-calendar fetchInterval

modules/default/alert/templates/alert.njk

@@ -1,13 +1,13 @@
 {% if imageUrl or imageFA %}
   {% set imageHeight = imageHeight if imageHeight else "80px" %}
   {% if imageUrl %}
-        <img src="{{ imageUrl }}"
+    <img src="{{ imageUrl }}" height="{{ imageHeight }}" style="margin-bottom: 10px" />
-             height="{{ imageHeight }}"
-             style="margin-bottom: 10px" />
   {% else %}
-        <span class="bright fas fa-{{ imageFA }}"
+    <span
+      class="bright fas fa-{{ imageFA }}"
       style="margin-bottom: 10px;
-                     font-size: {{ imageHeight }}"></span>
+                     font-size: {{ imageHeight }}"
+    ></span>
   {% endif %}
   <br />
 {% endif %}

modules/default/newsfeed/newsfeed.njk

@@ -8,19 +8,25 @@
 {% macro escapeTitle(title, url, dangerouslyDisableAutoEscaping=false, showTitleAsUrl=false) %}
   {% if dangerouslyDisableAutoEscaping %}
     {% if showTitleAsUrl %}
-            <a href="{{ url }}"
+      <a
+        href="{{ url }}"
         style="text-decoration:none;
                       color:#ffffff"
-               target="_blank">{{ title | safe }}</a>
+        target="_blank"
+        >{{ title | safe }}</a
+      >
     {% else %}
       {{ title | safe }}
     {% endif %}
   {% else %}
     {% if showTitleAsUrl %}
-            <a href="{{ url }}"
+      <a
+        href="{{ url }}"
         style="text-decoration:none;
                       color:#ffffff"
-               target="_blank">{{ title }}</a>
+        target="_blank"
+        >{{ title }}</a
+      >
     {% else %}
       {{ title }}
     {% endif %}
@@ -39,9 +45,7 @@
               {% if config.showPublishDate %}{{ item.publishDate }}:{% endif %}
             </div>
           {% endif %}
-                    <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
+          <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">{{ escapeTitle(item.title, item.url, config.dangerouslyDisableAutoEscaping, config.showTitleAsUrl) }}</div>
-                        {{ escapeTitle(item.title, item.url, config.dangerouslyDisableAutoEscaping, config.showTitleAsUrl) }}
-                    </div>
           {% if config.showDescription %}
             <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
               {% if config.truncDescription %}
@@ -64,9 +68,7 @@
           {% if config.showPublishDate %}{{ publishDate }}:{% endif %}
         </div>
       {% endif %}
-            <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
+      <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">{{ escapeTitle(title, url, config.dangerouslyDisableAutoEscaping, config.showTitleAsUrl) }}</div>
-                {{ escapeTitle(title, url, config.dangerouslyDisableAutoEscaping, config.showTitleAsUrl) }}
-            </div>
       {% if config.showDescription %}
         <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
           {% if config.truncDescription %}
@@ -81,9 +83,7 @@
   {% elseif empty %}
   <div class="small dimmed">{{ "NEWSFEED_NO_ITEMS" | translate | safe }}</div>
   {% elseif error %}
-    <div class="small dimmed">
+  <div class="small dimmed">{{ "MODULE_CONFIG_ERROR" | translate({MODULE_NAME: "Newsfeed", ERROR: error}) | safe }}</div>
-        {{ "MODULE_CONFIG_ERROR" | translate({MODULE_NAME: "Newsfeed", ERROR: error}) | safe }}
-    </div>
 {% else %}
   <div class="small dimmed">{{ "LOADING" | translate | safe }}</div>
 {% endif %}

modules/default/newsfeed/oldconfig.njk

@@ -1,3 +1 @@
-<div class="small bright">
+<div class="small bright">{{ "MODULE_CONFIG_CHANGED" | translate({MODULE_NAME: "Newsfeed"}) | safe }}</div>
-    {{ "MODULE_CONFIG_CHANGED" | translate({MODULE_NAME: "Newsfeed"}) | safe }}
-</div>

modules/default/weather/current.njk

@@ -1,6 +1,8 @@
 {% macro humidity() %}
   {% if current.humidity %}
-        <span class="humidity"><span>{{ current.humidity | decimalSymbol }}</span><sup>&nbsp;<i class="wi wi-humidity humidity-icon"></i></sup></span>
+    <span class="humidity"
+      ><span>{{ current.humidity | decimalSymbol }}</span><sup>&nbsp;<i class="wi wi-humidity humidity-icon"></i></sup
+    ></span>
   {% endif %}
 {% endmacro %}
 {% if current %}
@@ -47,16 +49,12 @@
       <span style="display: inline-block">
         {% if config.showIndoorTemperature and indoor.temperature %}
           <sup class="small" style="position: relative; display: block; text-align: left;">
-                                    <span>
+            <span> {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }} </span>
-                                        {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}
-                                    </span>
           </sup>
         {% endif %}
         {% if config.showIndoorHumidity and indoor.humidity %}
           <sub class="small" style="position: relative; display: block; text-align: left;">
-                                    <span>
+            <span> {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }} </span>
-                                            {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}
-                                    </span>
           </sub>
         {% endif %}
       </span>
@@ -79,15 +77,11 @@
         <br />
       {% endif %}
       {% if config.showPrecipitationAmount and current.precipitationAmount %}
-                <span class="dimmed">
+        <span class="dimmed"> <span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }} </span>
-                    <span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }}
-                </span>
         <br />
       {% endif %}
       {% if config.showPrecipitationProbability and current.precipitationProbability %}
-                <span class="dimmed">
+        <span class="dimmed"> <span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}% </span>
-                    <span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}%
-                </span>
       {% endif %}
     </div>
   {% endif %}

modules/default/weather/forecast.njk

@@ -7,8 +7,10 @@
     {% endif %}
     {% set forecast = forecast.slice(0, numSteps) %}
     {% for f in forecast %}
-            <tr {% if config.colored %}class="colored"{% endif %}
+      <tr
-                {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
+        {% if config.colored %}class="colored"{% endif %}
+        {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}
+      >
         {% if (currentStep == 0) and config.ignoreToday == false and config.absoluteDates == false %}
           <td class="day">{{ "TODAY" | translate }}</td>
         {% elif (currentStep == 1) and config.ignoreToday == false and config.absoluteDates == false %}
@@ -19,21 +21,13 @@
         <td class="bright weather-icon">
           <span class="wi weathericon wi-{{ f.weatherType }}"></span>
         </td>
-                <td class="align-right bright max-temp">
+        <td class="align-right bright max-temp">{{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }}</td>
-                    {{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }}
+        <td class="align-right min-temp">{{ f.minTemperature | roundValue | unit("temperature") | decimalSymbol }}</td>
-                </td>
-                <td class="align-right min-temp">
-                    {{ f.minTemperature | roundValue | unit("temperature") | decimalSymbol }}
-                </td>
         {% if config.showPrecipitationAmount %}
-                    <td class="align-right bright precipitation-amount">
+          <td class="align-right bright precipitation-amount">{{ f.precipitationAmount | unit("precip", f.precipitationUnits) }}</td>
-                        {{ f.precipitationAmount | unit("precip", f.precipitationUnits) }}
-                    </td>
         {% endif %}
         {% if config.showPrecipitationProbability %}
-                    <td class="align-right bright precipitation-prob">
+          <td class="align-right bright precipitation-prob">{{ f.precipitationProbability | unit('precip', '%') }}</td>
-                        {{ f.precipitationProbability | unit('precip', '%') }}
-                    </td>
         {% endif %}
         {% if config.showUVIndex %}
           <td class="align-right dimmed uv-index">

modules/default/weather/hourly.njk

@@ -4,15 +4,15 @@
   <table class="{{ config.tableClass }}">
     {% set hours = hourly.slice(0, numSteps) %}
     {% for hour in hours %}
-            <tr {% if config.colored %}class="colored"{% endif %}
+      <tr
-                {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
+        {% if config.colored %}class="colored"{% endif %}
+        {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}
+      >
         <td class="day">{{ hour.date | formatTime }}</td>
         <td class="bright weather-icon">
           <span class="wi weathericon wi-{{ hour.weatherType }}"></span>
         </td>
-                <td class="align-right bright">
+        <td class="align-right bright">{{ hour.temperature | roundValue | unit("temperature") }}</td>
-                    {{ hour.temperature | roundValue | unit("temperature") }}
-                </td>
         {% if config.showUVIndex %}
           <td class="align-right bright uv-index">
             {% if hour.uv_index!=0 %}
@@ -29,16 +29,12 @@
         {% endif %}
         {% if config.showPrecipitationAmount %}
           {% if (not config.hideZeroes or hour.precipitationAmount>0) %}
-                      <td class="align-right bright precipitation-amount">
+            <td class="align-right bright precipitation-amount">{{ hour.precipitationAmount | unit("precip", hour.precipitationUnits) }}</td>
-                          {{ hour.precipitationAmount | unit("precip", hour.precipitationUnits) }}
-                      </td>
           {% endif %}
         {% endif %}
         {% if config.showPrecipitationProbability %}
           {% if (not config.hideZeroes or hour.precipitationAmount>0) %}
-                    <td class="align-right bright precipitation-prob">
+            <td class="align-right bright precipitation-prob">{{ hour.precipitationProbability | unit('precip', '%') }}</td>
-                      {{ hour.precipitationProbability | unit('precip', '%') }}
-                    </td>
           {% endif %}
         {% endif %}
       </tr>

package-lock.json

@@ -52,6 +52,7 @@
 				"markdownlint-cli2": "^0.18.1",
 				"playwright": "^1.55.0",
 				"prettier": "^3.6.2",
+				"prettier-plugin-jinja-template": "^2.1.0",
 				"stylelint": "^16.24.0",
 				"stylelint-config-standard": "^39.0.0",
 				"stylelint-prettier": "^5.0.3"
@@ -11763,6 +11764,16 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/prettier-plugin-jinja-template": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-jinja-template/-/prettier-plugin-jinja-template-2.1.0.tgz",
+			"integrity": "sha512-mzoCp2Oy9BDSug80fw3B3J4n4KQj1hRvoQOL1akqcDKBb5nvYxrik9zUEDs4AEJ6nK7QDTGoH0y9rx7AlnQ78Q==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"prettier": "^3.0.0"
+			}
+		},
 		"node_modules/pretty-format": {
 			"version": "30.0.5",
 			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.5.tgz",

package.json

@@ -111,6 +111,7 @@
 		"markdownlint-cli2": "^0.18.1",
 		"playwright": "^1.55.0",
 		"prettier": "^3.6.2",
+		"prettier-plugin-jinja-template": "^2.1.0",
 		"stylelint": "^16.24.0",
 		"stylelint-config-standard": "^39.0.0",
 		"stylelint-prettier": "^5.0.3"

prettier.config.mjs

@@ -1,10 +1,17 @@
 const config = {
+	plugins: ["prettier-plugin-jinja-template"],
 	overrides: [
 		{
 			files: "*.md",
 			options: {
 				parser: "markdown"
 			}
+		},
+		{
+			files: ["*.njk"],
+			options: {
+				parser: "jinja-template"
+			}
 		}
 	],
 	trailingComma: "none"