Merge pull request #93 from markcheret/automated-linting

build: add automated JS/CSS linting
2021-04-15 23:10:30 +02:00 · 2021-04-15 23:10:30 +02:00 · 6a32c828e1
commit 6a32c828e1
parent e5f1ca92b1 ee7cd5356e
19 changed files with 6955 additions and 92 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,6 @@
+dist/
+docs/
+vendor/
+node_modules/
+*.min.js
+jquery.tools.js
--- a/.eslintrc.js
+++ b/.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:  {},
+};
--- a/.github/workflows/php.yml
+++ b/.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
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,6 @@
 .phpdoc/
 vendor/
+node_modules/
 dist/
 tmp/

--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,6 @@
+dist/
+docs/
+vendor/
+node_modules/
+*.min.js
+jquery.tools.js
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2
+}
--- a/.stylelintignore
+++ b/.stylelintignore
@ -0,0 +1,5 @@
+dist/
+docs/
+vendor/
+node_modules/
+*.min.css
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-wordpress"
+}
--- a/README.md
+++ b/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
--- a/composer.json
+++ b/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:js": "echo TODO",
+        "lint:css": "npm run lint:css",
+        "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",
--- a/composer.lock
+++ b/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",
-                "reference": "ecf53957bd84126f024f261c4b2fef4a889aafd2",
+                "url": "https://api.github.com/repos/marcocesarato/php-conventional-changelog/zipball/c84d617e0081db7d390cab585facb703f0ea9536",
+                "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",
--- a/css/dev-amp-tooltips.css
+++ b/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;
--- a/css/dev-common.css
+++ b/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-end: 0px !important;
+	-webkit-margin-start: 0 !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;
-	background-color: #ffffff00 !important;
+	color: #fff0 !important;
+	background-color: #fff0 !important;
 }

 /**
--- a/css/dev-tooltips-alternative.css
+++ b/css/dev-tooltips-alternative.css
@ -23,7 +23,8 @@
 .footnote_tooltip.position {
 	display: unset;
 	position: absolute;
-/*
+
+	/*
 	bottom: 24px;
 	left: -50px;
 	width: 400px;
@ -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;
 */
--- a/css/dev-tooltips.css
+++ b/css/dev-tooltips.css
@ -3,7 +3,6 @@
 * 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.
--- a/css/settings.css
+++ b/css/settings.css
@ -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;
-	font-weight:bold;
+	color: #ff6d3b;
+	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;
@ -219,22 +228,26 @@ helping edit CSS, like tab support and syntactic colors.
 	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;
--- a/js/wysiwyg-editor.js
+++ b/js/wysiwyg-editor.js
@ -4,55 +4,55 @@
 * Edit: be careful to maintain version number near EOF
 */

-(function() {
-	tinymce.create('tinymce.plugins.Footnotes', {
-		/**
-		 * 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
-		 * of the editor instance to intercept that event.
-		 *
-		 * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
-		 * @param {string} url Absolute URL to where the plugin is located.
-		 */
-		init : function(ed, url) {
-			ed.addButton('footnotes', {
-				title : 'footnotes',
-				cmd : 'footnotes',
-				image : url + '/../img/fn-wysiwyg.png'
-			});
+(function () {
+  tinymce.create('tinymce.plugins.Footnotes', {
+    /**
+     * 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
+     * of the editor instance to intercept that event.
+     *
+     * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
+     * @param {string} url Absolute URL to where the plugin is located.
+     */
+    init: function (ed, url) {
+      ed.addButton('footnotes', {
+        title: 'footnotes',
+        cmd: 'footnotes',
+        image: url + '/../img/fn-wysiwyg.png',
+      });

-			ed.addCommand('footnotes', function() {
-				jQuery.ajax({
-					type: 'POST',
-					url: './admin-ajax.php',
-					data: {
-						action: 'footnotes_getTags'
-					},
-					success: function(data, textStatus, XMLHttpRequest){
-						var l_arr_Tags = JSON.parse(data);
-						var return_text = l_arr_Tags['start'] + ed.selection.getContent() + l_arr_Tags['end'];
-						ed.execCommand('insertHTML', true, return_text);
-					},
-					error: function(MLHttpRequest, textStatus, errorThrown){
-						console.log("Error: " + errorThrown);
-					}
-				});
-			});
-		},
+      ed.addCommand('footnotes', function () {
+        jQuery.ajax({
+          type: 'POST',
+          url: './admin-ajax.php',
+          data: {
+            action: 'footnotes_getTags',
+          },
+          success: function (data, textStatus, XMLHttpRequest) {
+            var tags = JSON.parse(data);
+            var returnText = tags.start + ed.selection.getContent() + tags.end;
+            ed.execCommand('insertHTML', true, returnText);
+          },
+          error: function (MLHttpRequest, textStatus, errorThrown) {
+            console.log('Error: ' + errorThrown);
+          },
+        });
+      });
+    },

-		/**
-		 * 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,
-		 * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
-		 * method can be used to create those.
-		 *
-		 * @param {String} n Name of the control to create.
-		 * @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.
-		 */
-		createControl : function(n, cm) {
-			return null;
-		},
+    /**
+     * 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,
+     * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
+     * method can be used to create those.
+     *
+     * @param {String} n Name of the control to create.
+     * @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.
+     */
+    createControl: function (n, cm) {
+      return null;
+    },

 		/**
 		 * Returns information about the plugin as a name/value array.
@ -73,6 +73,6 @@
 		}
 	});

-	// Register plugin
-	tinymce.PluginManager.add('footnotes', tinymce.plugins.Footnotes);
+  // Register plugin
+  tinymce.PluginManager.add('footnotes', tinymce.plugins.Footnotes);
 })();
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
+  }
+}