Merge pull request #93 from markcheret/automated-linting

build: add automated JS/CSS linting

.eslintignore

@@ -0,0 +1,6 @@
+dist/
+docs/
+vendor/
+node_modules/
+*.min.js
+jquery.tools.js

.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports =  {
+  env: {
+  	browser: true,
+  	jquery: true,
+  	es6: true
+  },
+  extends:  [
+    'wordpress',
+    'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  rules:  {},
+};

.github/workflows/php.yml

@@ -32,6 +32,13 @@ jobs:
     - name: Lint PHP code
       run: composer run lint:php
 
+    - name: Lint JS code
+      run: composer run format:js:fix && composer run lint:js
+    
+    # TODO: Fix CSS errors
+    #- name: Format and lint CSS code
+    #  run: composer run lint:css
+    
     # TODO: Add tests
     # - name: Run test suite
     #   run: composer run-script test

.gitignore

@@ -1,5 +1,6 @@
 .phpdoc/
 vendor/
+node_modules/
 dist/
 tmp/
 

.prettierignore

@@ -0,0 +1,6 @@
+dist/
+docs/
+vendor/
+node_modules/
+*.min.js
+jquery.tools.js

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2
+}

.stylelintignore

@@ -0,0 +1,5 @@
+dist/
+docs/
+vendor/
+node_modules/
+*.min.css

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-wordpress"
+}

README.md

@@ -42,7 +42,7 @@ This Plugin provides:
 1. Read the [contributing guidelines][contributing];
 1. clone this repository (`git clone git@github.com:markcheret/footnotes.git`):
     - we recommend that you use [VVV][vvv] for your local testing environment.
-1. install [Composer][composer], if you don't have it already; and
+1. install [Composer][composer] and [NPM][npm]; and
 1. install all dependencies (`composer install`):
     - you will have to install `php-mbstring` manually if you do not already 
       have it.
@@ -80,7 +80,15 @@ Automated testing will be introduced soon.
 This repo. uses pre-commit code formatting and linting on all staged files. 
 This ensures that only style-conformant code can be committed.
 
-The individual commands used by the pre-commit hook can also be called manually:
+The individual commands can also be called manually:
+
+- Run `composer run format` to run all format commands.
+- Run `composer run format:fix` to attempt to automatically fix all formatter warnings
+  and errors.
+
+- Run `composer run lint` to run all linting commands.
+- Run `composer run lint:fix` to attempt to automatically fix all linter warnings and
+  errors.
 
 ### PHP Code
 
@@ -94,13 +102,25 @@ PHP code must follow the [WordPress PHP Coding Standards][wpcs-php].
 
 JavaScript code must follow the [WordPress JavaScript Coding Standards][wpcs-js].
 
-Automated linting and formatting will be introduced soon.
+- Run `composer run format:js` to format all JS files with [Prettier][prettier].
+- Run `composer run format:js:fix` to attempt to automatically fix warnings and errors.
+
+- Run `composer run lint:js` to lint all JS files with [ESLint][eslint].
+- Run `composer run lint:js:fix` to attempt to automatically fix warnings and errors.
+
+Prettier configuration settings are found in `.prettierrc`.
+
+ESLint configuration settings are found in `.eslintrc.js`. File ignore rules are
+found in `.eslintignore`.
   
 ### CSS Stylesheets
 
 JavaScript code must follow the [WordPress CSS Coding Standards][wpcs-css].
 
-Automated linting and formatting will be introduced soon.
+- Run `composer run lint:css` to format all CSS files with [stylelint][stylelint].
+- Run `npcomposerm run lint:css:fix` to attempt to automatically fix warnings and errors.
+
+stylelint configuration settings are found in `.stylelint.json`.
 
 ## Documentation
 
@@ -129,10 +149,14 @@ This project is licensed under the [GNU GPL v3][gpl-v3].
 [contributing]: https://github.com/markcheret/footnotes/blob/main/CONTRIBUTING.md
 [vvv]: https://varyingvagrantvagrants.org/
 [composer]: https://getcomposer.org/download/
+[npm]: https://www.npmjs.com/
 [wpcs-php]: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/php/
 [phpcs]: https://github.com/squizlabs/PHP_CodeSniffer
 [wpcs-js]: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/
 [wpcs-css]: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/
+[prettier]: https://prettier.io/
+[eslint]: https://eslint.org/
+[stylelint]: https://stylelint.io/
 [phpdocumentor]: https://phpdoc.org/
 [footnotes-docs]: https://markcheret.github.io/footnotes/
 [gpl-v3]: https://www.gnu.org/licenses/gpl-3.0.en.html

composer.json

@@ -6,13 +6,21 @@
         "release": "./_tools/release.sh",
         "release:commit": "composer run release -- -c",
         "build": "./_tools/build.sh",
+        "lint": "composer run lint:php && npm run lint",
+        "lint:fix": "composer run lint:php:fix && npm run lint:fix",
+        "format": "npm run format",
+        "format:fix": "npm run format:fix",
         "lint:php": "./vendor/bin/phpcs --standard='WordPress' --colors --encoding=utf-8 -n -p --ignore=*/vendor/* ./*.php ./*/*.php ./*/*/*.php",
         "lint:php:fix": "./vendor/bin/phpcbf --standard='WordPress' --encoding=utf-8 -p --ignore=*/vendor/* ./*.php ./*/*.php ./*/*/*.php", 
-        "lint:css": "echo TODO",
+        "lint:css": "npm run lint:css",
-        "lint:js": "echo TODO",
+        "lint:css:fix": "npm run lint:css:fix",
+        "lint:js": "npm run lint:js",
+        "lint:js:fix": "npm run lint:js:fix",
+        "format:js": "npm run format:js",
+        "format:js:fix": "npm run format:js:fix",
         "docs": "./vendor/bin/phpdoc -d . -t ./docs --ignore vendor/",
         "commit": "./vendor/bin/php-commitizen commit -- ./.php-commitizen.php",
-        "post-install-cmd": "./_tools/setup.sh"
+        "post-install-cmd": "npm install && ./_tools/setup.sh"
     },
     "require-dev": {
         "dealerdirect/phpcodesniffer-composer-installer": "^0.7.1",

composer.lock

@@ -1400,19 +1400,20 @@
         },
         {
             "name": "marcocesarato/php-conventional-changelog",
-            "version": "v1.9.10",
+            "version": "1.10.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/marcocesarato/php-conventional-changelog.git",
-                "reference": "ecf53957bd84126f024f261c4b2fef4a889aafd2"
+                "reference": "c84d617e0081db7d390cab585facb703f0ea9536"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/marcocesarato/php-conventional-changelog/zipball/ecf53957bd84126f024f261c4b2fef4a889aafd2",
+                "url": "https://api.github.com/repos/marcocesarato/php-conventional-changelog/zipball/c84d617e0081db7d390cab585facb703f0ea9536",
-                "reference": "ecf53957bd84126f024f261c4b2fef4a889aafd2",
+                "reference": "c84d617e0081db7d390cab585facb703f0ea9536",
                 "shasum": ""
             },
             "require": {
+                "ext-json": "*",
                 "php": ">=7.1.3",
                 "symfony/console": "^4 || ^5"
             },
@@ -1467,9 +1468,9 @@
             ],
             "support": {
                 "issues": "https://github.com/marcocesarato/php-conventional-changelog/issues",
-                "source": "https://github.com/marcocesarato/php-conventional-changelog/tree/v1.9.10"
+                "source": "https://github.com/marcocesarato/php-conventional-changelog/tree/v1.10.1"
             },
-            "time": "2021-04-13T19:48:52+00:00"
+            "time": "2021-04-15T12:15:06+00:00"
         },
         {
             "name": "monolog/monolog",

css/dev-amp-tooltips.css

@@ -26,7 +26,8 @@ span.footnote_referrer > span.footnote_tooltip {
 	visibility: hidden;
 	opacity: 0;
 	transition-property: visibility, opacity;
-/*
+
+	/*
 	transition-delay: 500ms;
 	transition-duration: 1s;
 */
@@ -37,7 +38,8 @@ span.footnote_referrer:hover > span.footnote_tooltip {
 	visibility: visible;
 	opacity: 1;
 	transition-property: visibility, opacity;
-/*
+
+	/*
 	transition-delay: 0;
 	transition-duration: 200ms;
 */
@@ -57,7 +59,8 @@ span.footnote_referrer:hover > span.footnote_tooltip {
 .footnote_tooltip.position {
 	display: unset;
 	position: absolute;
-/*
+
+	/*
 	bottom: 24px;
 	left: -50px;
 	width: 400px;

css/dev-common.css

@@ -80,7 +80,7 @@
 	border: 4px solid red;
 	padding: 20px 40px;
 	margin: 20px 0;
-	background: #ff000055;
+	background: #f005;
 	text-align: start;
 }
 
@@ -306,18 +306,19 @@ Classes:
 	margin-bottom: 0.25em !important;
 	padding: 0 !important;
 	font-weight: normal !important;
+
 	/* bottom border optional since 2.2.5 */
 	display: block !important;
 	-webkit-margin-before: 0.83em !important;
 	-webkit-margin-after: 0.83em !important;
-	-webkit-margin-start: 0px !important;
+	-webkit-margin-start: 0 !important;
-	-webkit-margin-end: 0px !important;
+	-webkit-margin-end: 0 !important;
 	text-align: start !important;
 	vertical-align: middle;
 }
 
 .footnote_container_prepare > p > span:first-child,
-	.footnote_container_prepare > p > span:nth-child(3) {
+.footnote_container_prepare > p > span:nth-child(3) {
 	text-align: start !important;
 	font-size: 1.5em !important;
 }
@@ -379,8 +380,8 @@ table
 	width: 1px !important;
 	white-space: nowrap !important;
 	overflow: hidden !important;
-	color: #ffffff00 !important;
+	color: #fff0 !important;
-	background-color: #ffffff00 !important;
+	background-color: #fff0 !important;
 }
 
 /**

css/dev-tooltips-alternative.css

@@ -1,18 +1,18 @@
 /*<?php for docblocks
 /**
  * Additional stylesheet for alternative tooltips.
- * 
+ *
  * @since 2.5.5
- 
+
  * System of unified minified style sheets tailored to the instance.
- * 
+ *
  * @see full header in dev-common.css.
  */
 
 
 /**
  * Alternative tooltips
- * 
+ *
  * These default position values may be overridden by internal CSS.
  */
 
@@ -23,7 +23,8 @@
 .footnote_tooltip.position {
 	display: unset;
 	position: absolute;
-/*
+
+	/*
 	bottom: 24px;
 	left: -50px;
 	width: 400px;
@@ -32,7 +33,7 @@
 
 /**
  * Timing; fade-in/fade-out parameters.
- * 
+ *
  * To streamline internal CSS, immutable rules are in external stylesheet.
  * Property values of settings are internal CSS.
  * @see class/task.php
@@ -43,7 +44,8 @@
 	opacity: 1;
 	transition-property: visibility, opacity;
 	transition-timing-function: linear;
-/*
+
+	/*
 	transition-delay: 0ms;
 	transition-duration: 200ms;
 */
@@ -54,7 +56,8 @@
 	opacity: 0;
 	transition-property: visibility, opacity;
 	transition-timing-function: linear;
-/*
+
+	/*
 	transition-delay: 400ms;
 	transition-duration: 200ms;
 */

css/dev-tooltips.css

@@ -1,9 +1,8 @@
 /*<?php for docblocks
 /**
  * Additional stylesheet needed when tooltips (jQuery or alternative) are enabled.
- * 
+ *
  * @version 2.5.8
- * 
  * System of unified minified style sheets tailored to the instance.
  * @since 2.5.5
  * @see full header in dev-common.css.
@@ -11,15 +10,15 @@
 
 /**
  * Tooltips.
- * 
+ *
  * - Bugfix: Tooltips: set z-index to maximum 2147483647 to address display issues with overlay content, thanks to @russianicons bug report.
- * 
+ *
  * @since 2.1.6
  * @reporter @russianicons
  * @link https://wordpress.org/support/topic/counter-styles-not-working/#post-13767299
- * 
+ *
  * - Bugfix: Layout: support right-to-left writing direction by replacing remaining CSS values 'left' with 'start', thanks to @arahmanshaalan bug report.
- * 
+ *
  * @since 2.5.8
  * @reporter @arahmanshaalan
  * @link https://wordpress.org/support/topic/right-to-left-text-problem/

css/settings.css

@@ -5,7 +5,7 @@
  * Created-Date: 15.05.14
  * Created-Time: 16:21
  * Since: 1.0
- * 
+ *
  * This dashboard stylesheet is minified as-is.
  * @see class/dashboard/layout.php
  */
@@ -28,17 +28,20 @@
 	text-decoration: none;
 	font-weight: normal;
 }
+
 .footnotes_logo_part1_heading {
 	left: 20px;
 	color: #2bb975;
 }
+
 .footnotes_logo_part2_heading {
 	left: 51px;
 	color: #545f5a;
 }
+
 .footnotes_heart_heading {
-	color:#ff6d3b;
+	color: #ff6d3b;
-	font-weight:bold;
+	font-weight: bold;
 	position: absolute;
 	left: 96px;
 }
@@ -59,6 +62,7 @@ On User Request:
 Limited to a number of IDs to not affect all dashboards
 <https://wordpress.org/support/topic/all-input-have-width-80/>
 */
+
 /*input[type=text], input[type=password], textarea, select*/
 #footnote_inputfield_readon_label,
 #footnote_inputfield_references_label,
@@ -82,6 +86,7 @@ Limited to a number of IDs to not affect all dashboards
 #footnote_inputfield_custom_mouse_over_box_excerpt_length {
 	width: 180px;
 }
+
 #footnote_inputfield_placeholder_start_user_defined,
 #footnote_inputfield_placeholder_end_user_defined {
 	width: 320px;
@@ -147,7 +152,7 @@ label {
 	border: none !important;
 }
 
-.postbox > .inside >table > tbody > tr > td:first-child {
+.postbox > .inside > table > tbody > tr > td:first-child {
 	width: 15% !important;
 	font-weight: bold !important;
 }
@@ -182,17 +187,21 @@ IE doesn’t support nth child, but these are not critical
 .expert_lookup tr td:first-child {
 	width: 170px !important;
 }
+
 .expert_lookup tr th:nth-child(2),
 .expert_lookup tr td:nth-child(2) {
 	width: 65px !important;
 }
+
 .expert_lookup tr th:nth-child(3),
 .expert_lookup tr td:nth-child(3) {
 	width: 200px !important;
 }
+
 .expert_lookup tr td:nth-child(3) input {
 	width: 190px;
 }
+
 .expert_lookup tr th:last-child,
 .expert_lookup tr td:last-child {
 	white-space: nowrap;
@@ -212,29 +221,33 @@ For better maintainability and readability of the source
 list, the </p> end tags are omitted per HTML5 standard:
 <https://stackoverflow.com/questions/8460993/p-end-tag-p-is-not-needed-in-html>
 
-The textarea has monospace font, but no other features 
+The textarea has monospace font, but no other features
 helping edit CSS, like tab support and syntactic colors.
 */
 #customize_css_new tr td:first-child {
 	width: 38% !important;
 	font-weight: normal !important;
 }
+
 .customize_css_new tr td:first-child span:first-child {
 	font-weight: bold !important;
 }
+
 .customize_css_new .list {
 	padding-top: 10px;
 }
+
 .customize_css_new .list p {
 	font-family: monospace;
 	padding: 0 10px;
 	text-indent: -10px;
-	margin: .5em 0;
+	margin: 0.5em 0;
 }
 
 #footnote_inputfield_custom_css_new {
 	height: 500px;
 }
+
 #footnote_inputfield_custom_css,
 #footnote_inputfield_custom_css_new {
 	width: 96%;
@@ -276,6 +289,7 @@ notice after the end of the settings box.
 .footnotes_description {
 	padding: 0 4%;
 }
+
 .footnotes_description p {
 	font-size: 1.06em;
 	font-style: italic;

js/wysiwyg-editor.js

@@ -1,58 +1,58 @@
 /**
  * Created by Stefan on 24.05.14.
  *
- * Edit: be careful to maintain version number near EOF   
+ * Edit: be careful to maintain version number near EOF
  */
 
-(function() {
+(function () {
-	tinymce.create('tinymce.plugins.Footnotes', {
+  tinymce.create('tinymce.plugins.Footnotes', {
-		/**
+    /**
-		 * Initializes the plugin, this will be executed after the plugin has been created.
+     * Initializes the plugin, this will be executed after the plugin has been created.
-		 * This call is done before the editor instance has finished its initialization so use the onInit event
+     * This call is done before the editor instance has finished its initialization so use the onInit event
-		 * of the editor instance to intercept that event.
+     * of the editor instance to intercept that event.
-		 *
+     *
-		 * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
+     * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
-		 * @param {string} url Absolute URL to where the plugin is located.
+     * @param {string} url Absolute URL to where the plugin is located.
-		 */
+     */
-		init : function(ed, url) {
+    init: function (ed, url) {
-			ed.addButton('footnotes', {
+      ed.addButton('footnotes', {
-				title : 'footnotes',
+        title: 'footnotes',
-				cmd : 'footnotes',
+        cmd: 'footnotes',
-				image : url + '/../img/fn-wysiwyg.png'
+        image: url + '/../img/fn-wysiwyg.png',
-			});
+      });
 
-			ed.addCommand('footnotes', function() {
+      ed.addCommand('footnotes', function () {
-				jQuery.ajax({
+        jQuery.ajax({
-					type: 'POST',
+          type: 'POST',
-					url: './admin-ajax.php',
+          url: './admin-ajax.php',
-					data: {
+          data: {
-						action: 'footnotes_getTags'
+            action: 'footnotes_getTags',
-					},
+          },
-					success: function(data, textStatus, XMLHttpRequest){
+          success: function (data, textStatus, XMLHttpRequest) {
-						var l_arr_Tags = JSON.parse(data);
+            var tags = JSON.parse(data);
-						var return_text = l_arr_Tags['start'] + ed.selection.getContent() + l_arr_Tags['end'];
+            var returnText = tags.start + ed.selection.getContent() + tags.end;
-						ed.execCommand('insertHTML', true, return_text);
+            ed.execCommand('insertHTML', true, returnText);
-					},
+          },
-					error: function(MLHttpRequest, textStatus, errorThrown){
+          error: function (MLHttpRequest, textStatus, errorThrown) {
-						console.log("Error: " + errorThrown);
+            console.log('Error: ' + errorThrown);
-					}
+          },
-				});
+        });
-			});
+      });
-		},
+    },
 
-		/**
+    /**
-		 * Creates control instances based on the incoming name. This method is normally not
+     * Creates control instances based on the incoming name. This method is normally not
-		 * needed since the addButton method of the tinymce.Editor class is an easier way of adding buttons,
+     * needed since the addButton method of the tinymce.Editor class is an easier way of adding buttons,
-		 * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
+     * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
-		 * method can be used to create those.
+     * method can be used to create those.
-		 *
+     *
-		 * @param {String} n Name of the control to create.
+     * @param {String} n Name of the control to create.
-		 * @param {tinymce.ControlManager} cm Control manager to use in order to create new control.
+     * @param {tinymce.ControlManager} cm Control manager to use in order to create new control.
-		 * @return {tinymce.ui.Control} New control instance or null if no control was created.
+     * @return {tinymce.ui.Control} New control instance or null if no control was created.
-		 */
+     */
-		createControl : function(n, cm) {
+    createControl: function (n, cm) {
-			return null;
+      return null;
-		},
+    },
 
 		/**
 		 * Returns information about the plugin as a name/value array.
@@ -73,6 +73,6 @@
 		}
 	});
 
-	// Register plugin
+  // Register plugin
-	tinymce.PluginManager.add('footnotes', tinymce.plugins.Footnotes);
+  tinymce.PluginManager.add('footnotes', tinymce.plugins.Footnotes);
 })();

package.json

@@ -0,0 +1,23 @@
+{
+  "scripts": {
+    "format": "npm run format:js",
+    "format:fix": "npm run format:js:fix",
+    "format:js": "prettier --config .prettierrc './js/*.js'",
+    "format:js:fix": "npm run format:js -- --write",
+    "lint": "npm run lint:js && npm run lint:css",
+    "lint:fix": "npm run lint:js:fix && npm run lint:css:fix",
+    "lint:js": "eslint \"./js/*.js\"",
+    "lint:js:fix": "npm run lint:js -- --fix",
+    "lint:css": "stylelint \"./css/*.css\"",
+    "lint:css:fix": "npm run lint:css -- --fix"
+  },
+  "devDependencies": {
+    "eslint": "^7.24.0",
+    "eslint-config-prettier": "^8.2.0",
+    "eslint-config-wordpress": "^2.0.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "prettier": "^2.2.1",
+    "stylelint": "^13.12.0",
+    "stylelint-config-wordpress": "^17.0.0"
+  }
+}