Replace prettier by stylistic to lint JavaScript (#3303)

In the latest versions of ESLint, more and more formatting rules were
removed or declared deprecated. These rules have been integrated into
the new Stylistic package (https://eslint.style/guide/why) and expanded.

Stylistic acts as a better formatter  for JavaScript as Prettier.

With this PR there are many changes that make the code more uniform, but
it may be difficult to review due to the large amount. Even if I have no
worries about the changes, perhaps this would be something for the
release after next.

Let me know what you think.

Author: KristjanESPERANTO

.eslintrc.json

@@ -1,9 +1,9 @@
 {
-	"extends": ["eslint:recommended", "plugin:import/recommended", "plugin:jest/recommended", "plugin:jsdoc/recommended", "plugin:prettier/recommended"],
+	"extends": ["eslint:recommended", "plugin:@stylistic/all-extends", "plugin:import/recommended", "plugin:jest/recommended", "plugin:jsdoc/recommended"],
 	"plugins": [],
 	"env": {
 		"browser": true,
-		"es2022": true,
+		"es2023": true,
 		"jest/globals": true,
 		"node": true
 	},
@@ -16,7 +16,7 @@
 	},
 	"parserOptions": {
 		"sourceType": "module",
-		"ecmaVersion": 2022,
+		"ecmaVersion": 2023,
 		"ecmaFeatures": {
 			"globalReturn": true
 		}
@@ -38,6 +38,46 @@
 		"no-throw-literal": "error",
 		"no-unused-vars": "off",
 		"no-useless-return": "error",
-		"prefer-template": "error"
-	}
+		"object-shorthand": ["error", "methods"],
+		"prefer-template": "error",
+		"@stylistic/array-element-newline": ["error", "consistent"],
+		"@stylistic/arrow-parens": ["error", "always"],
+		"@stylistic/brace-style": "off",
+		"@stylistic/comma-dangle": ["error", "never"],
+		"@stylistic/dot-location": ["error", "property"],
+		"@stylistic/function-call-argument-newline": ["error", "consistent"],
+		"@stylistic/function-paren-newline": ["error", "consistent"],
+		"@stylistic/implicit-arrow-linebreak": ["error", "beside"],
+		"@stylistic/max-statements-per-line": ["error", { "max": 2 }],
+		"@stylistic/multiline-ternary": ["error", "always-multiline"],
+		"@stylistic/newline-per-chained-call": ["error", { "ignoreChainWithDepth": 4 }],
+		"@stylistic/no-extra-parens": "off",
+		"@stylistic/no-tabs": "off",
+		"@stylistic/object-curly-spacing": ["error", "always"],
+		"@stylistic/object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }],
+		"@stylistic/operator-linebreak": ["error", "before"],
+		"@stylistic/padded-blocks": "off",
+		"@stylistic/quote-props": ["error", "as-needed"],
+		"@stylistic/quotes": ["error", "double"],
+		"@stylistic/indent": ["error", "tab"],
+		"@stylistic/semi": ["error", "always"],
+		"@stylistic/space-before-function-paren": ["error", "always"],
+		"@stylistic/spaced-comment": "off"
+	},
+	"overrides": [
+		{
+			"files": ["config/config.js.sample"],
+			"rules": {
+				"@stylistic/comma-dangle": "off",
+				"@stylistic/indent": "off",
+				"@stylistic/no-multi-spaces": "off"
+			}
+		},
+		{
+			"files": ["tests/configs/modules/weather/*.js"],
+			"rules": {
+				"@stylistic/quotes": "off"
+			}
+		}
+	]
 }

.prettierignore

@@ -1,4 +1,4 @@
-.eslintignore
+*.js
 .prettierignore
 /config
 /coverage

CHANGELOG.md

@@ -31,6 +31,7 @@ _This release is scheduled to be released on 2024-01-01._
 - Updated dependencies
 - Clock module: optionally display current moon phase in addition to rise/set times
 - electron is now per default started without gpu, if needed it must be enabled with new env var `ELECTRON_ENABLE_GPU=1` on startup (#3226)
+- Replace prettier by stylistic in ESLint config to lint JavaScript
 
 ### Fixed
 

clientonly/index.js

@@ -7,15 +7,16 @@
 	/**
 	 * Helper function to get server address/hostname from either the commandline or env
 	 */
-	function getServerAddress() {
+	function getServerAddress () {
+
 		/**
 		 * Get command line parameters
 		 * Assumes that a cmdline parameter is defined with `--key [value]`
 		 * @param {string} key key to look for at the command line
 		 * @param {string} defaultValue value if no key is given at the command line
 		 * @returns {string} the value of the parameter
 		 */
-		function getCommandLineParameter(key, defaultValue = undefined) {
+		function getCommandLineParameter (key, defaultValue = undefined) {
 			const index = process.argv.indexOf(`--${key}`);
 			const value = index > -1 ? process.argv[index + 1] : undefined;
 			return value !== undefined ? String(value) : defaultValue;
@@ -35,7 +36,7 @@
 	 * @param {string} url location where the server is running.
 	 * @returns {Promise} the config
 	 */
-	function getServerConfig(url) {
+	function getServerConfig (url) {
 		// Return new pending promise
 		return new Promise((resolve, reject) => {
 			// Select http or https module, depending on requested url
@@ -64,7 +65,7 @@
 	 * @param {string} message error message to print
 	 * @param {number} code error code for the exit call
 	 */
-	function fail(message, code = 1) {
+	function fail (message, code = 1) {
 		if (message !== undefined && typeof message === "string") {
 			console.log(message);
 		} else {
@@ -121,4 +122,4 @@
 	} else {
 		fail();
 	}
-})();
+}());

config/config.js.sample

@@ -18,17 +18,17 @@ let config = {
 							// - "0.0.0.0", "::" to listen on any interface
 							// Default, when address config is left out or empty, is "localhost"
 	port: 8080,
-	basePath: "/",			// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
-					  		// you must set the sub path here. basePath must end with a /
+	basePath: "/",	// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
+									// you must set the sub path here. basePath must end with a /
 	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],	// Set [] to allow all IP addresses
-															// or add a specific IPv4 of 192.168.1.5 :
-															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
-															// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
-															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
+									// or add a specific IPv4 of 192.168.1.5 :
+									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
+									// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
+									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
 
-	useHttps: false, 		// Support HTTPS or not, default "false" will use HTTP
-	httpsPrivateKey: "", 	// HTTPS private key path, only require when useHttps is true
-	httpsCertificate: "", 	// HTTPS Certificate path, only require when useHttps is true
+	useHttps: false,			// Support HTTPS or not, default "false" will use HTTP
+	httpsPrivateKey: "",	// HTTPS private key path, only require when useHttps is true
+	httpsCertificate: "",	// HTTPS Certificate path, only require when useHttps is true
 
 	language: "en",
 	locale: "en-US",
@@ -109,4 +109,4 @@ let config = {
 };
 
 /*************** DO NOT EDIT THE LINE BELOW ***************/
-if (typeof module !== "undefined") {module.exports = config;}
+if (typeof module !== "undefined") { module.exports = config; }

js/animateCSS.js

@@ -134,12 +134,12 @@ const AnimateCSSOut = [
  * @param {string} [animation] animation name.
  * @param {number} [animationTime] animation duration.
  */
-function addAnimateCSS(element, animation, animationTime) {
+function addAnimateCSS (element, animation, animationTime) {
 	const animationName = `animate__${animation}`;
 	const node = document.getElementById(element);
 	if (!node) {
 		// don't execute animate: we don't find div
-		Log.warn(`addAnimateCSS: node not found for`, element);
+		Log.warn("addAnimateCSS: node not found for", element);
 		return;
 	}
 	node.style.setProperty("--animate-duration", `${animationTime}s`);
@@ -151,12 +151,12 @@ function addAnimateCSS(element, animation, animationTime) {
  * @param {string} [element] div element to animate.
  * @param {string} [animation] animation name.
  */
-function removeAnimateCSS(element, animation) {
+function removeAnimateCSS (element, animation) {
 	const animationName = `animate__${animation}`;
 	const node = document.getElementById(element);
 	if (!node) {
 		// don't execute animate: we don't find div
-		Log.warn(`removeAnimateCSS: node not found for`, element);
+		Log.warn("removeAnimateCSS: node not found for", element);
 		return;
 	}
 	node.classList.remove("animate__animated", animationName);

js/app.js

@@ -47,7 +47,7 @@ process.on("uncaughtException", function (err) {
  * The core app.
  * @class
  */
-function App() {
+function App () {
 	let nodeHelpers = [];
 	let httpServer;
 
@@ -56,7 +56,7 @@ function App() {
 	 * @async
 	 * @returns {Promise<object>} the loaded config or the defaults if something goes wrong
 	 */
-	async function loadConfig() {
+	async function loadConfig () {
 		Log.log("Loading config ...");
 		const defaults = require(`${__dirname}/defaults`);
 
@@ -136,7 +136,7 @@ function App() {
 	 * if it encounters one option from the deprecated.js list
 	 * @param {object} userConfig The user config
 	 */
-	function checkDeprecatedOptions(userConfig) {
+	function checkDeprecatedOptions (userConfig) {
 		const deprecated = require(`${global.root_path}/js/deprecated`);
 		const deprecatedOptions = deprecated.configs;
 
@@ -150,7 +150,7 @@ function App() {
 	 * Loads a specific module.
 	 * @param {string} module The name of the module (including subpath).
 	 */
-	function loadModule(module) {
+	function loadModule (module) {
 		const elements = module.split("/");
 		const moduleName = elements[elements.length - 1];
 		let moduleFolder = `${__dirname}/../modules/${module}`;
@@ -204,7 +204,7 @@ function App() {
 	 * @param {Module[]} modules All modules to be loaded
 	 * @returns {Promise} A promise that is resolved when all modules been loaded
 	 */
-	async function loadModules(modules) {
+	async function loadModules (modules) {
 		Log.log("Loading module helpers ...");
 
 		for (let module of modules) {
@@ -221,7 +221,7 @@ function App() {
 	 * @returns {number} A positive number if a is larger than b, a negative
 	 * number if a is smaller and 0 if they are the same
 	 */
-	function cmpVersions(a, b) {
+	function cmpVersions (a, b) {
 		let i, diff;
 		const regExStrip0 = /(\.0+)+$/;
 		const segmentsA = a.replace(regExStrip0, "").split(".");

js/check_config.js

@@ -20,15 +20,15 @@ const Utils = require(`${rootPath}/js/utils.js`);
  * Check if set by environment variable MM_CONFIG_FILE
  * @returns {string} path and filename of the config file
  */
-function getConfigFile() {
+function getConfigFile () {
 	// FIXME: This function should be in core. Do you want refactor me ;) ?, be good!
 	return path.resolve(process.env.MM_CONFIG_FILE || `${rootPath}/config/config.js`);
 }
 
 /**
  * Checks the config file using eslint.
  */
-function checkConfigFile() {
+function checkConfigFile () {
 	const configFileName = getConfigFile();
 
 	// Check if file is present

js/class.js

@@ -9,7 +9,7 @@
  */
 (function () {
 	let initializing = false;
-	const fnTest = /xyz/.test(function () {
+	const fnTest = (/xyz/).test(function () {
 		xyz;
 	})
 		? /\b_super\b/
@@ -36,31 +36,31 @@
 		// Copy the properties over onto the new prototype
 		for (const name in prop) {
 			// Check if we're overwriting an existing function
-			prototype[name] =
-				typeof prop[name] === "function" && typeof _super[name] === "function" && fnTest.test(prop[name])
+			prototype[name]
+				= typeof prop[name] === "function" && typeof _super[name] === "function" && fnTest.test(prop[name])
 					? (function (name, fn) {
-							return function () {
-								const tmp = this._super;
+						return function () {
+							const tmp = this._super;
 
-								// Add a new ._super() method that is the same method
-								// but on the super-class
-								this._super = _super[name];
+							// Add a new ._super() method that is the same method
+							// but on the super-class
+							this._super = _super[name];
 
-								// The method only need to be bound temporarily, so we
-								// remove it when we're done executing
-								const ret = fn.apply(this, arguments);
-								this._super = tmp;
+							// The method only need to be bound temporarily, so we
+							// remove it when we're done executing
+							const ret = fn.apply(this, arguments);
+							this._super = tmp;
 
-								return ret;
-							};
-						})(name, prop[name])
+							return ret;
+						};
+					}(name, prop[name]))
 					: prop[name];
 		}
 
 		/**
 		 * The dummy class constructor
 		 */
-		function Class() {
+		function Class () {
 			// All construction is actually done in the init method
 			if (!initializing && this.init) {
 				this.init.apply(this, arguments);
@@ -78,14 +78,14 @@
 
 		return Class;
 	};
-})();
+}());
 
 /**
  * Define the clone method for later use. Helper Method.
  * @param {object} obj Object to be cloned
  * @returns {object} the cloned object
  */
-function cloneObject(obj) {
+function cloneObject (obj) {
 	if (obj === null || typeof obj !== "object") {
 		return obj;
 	}

js/electron.js

@@ -25,7 +25,7 @@ let mainWindow;
 /**
  *
  */
-function createWindow() {
+function createWindow () {
 	// see https://www.electronjs.org/docs/latest/api/screen
 	// Create a window that fills the screen's available work area.
 	let electronSize = (800, 600);
@@ -121,11 +121,11 @@ function createWindow() {
 	mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
 		let curHeaders = details.responseHeaders;
 		if (config["ignoreXOriginHeader"] || false) {
-			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !/x-frame-options/i.test(header[0])));
+			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !(/x-frame-options/i).test(header[0])));
 		}
 
 		if (config["ignoreContentSecurityPolicy"] || false) {
-			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !/content-security-policy/i.test(header[0])));
+			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !(/content-security-policy/i).test(header[0])));
 		}
 
 		callback({ responseHeaders: curHeaders });