Merge pull request #93 from markcheret/automated-linting

build: add automated JS/CSS linting
This commit is contained in:
Mark Cheret 2021-04-15 23:10:30 +02:00 committed by GitHub
commit 6a32c828e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 6955 additions and 92 deletions

6
.eslintignore Normal file
View file

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

12
.eslintrc.js Normal file
View file

@ -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: {},
};

View file

@ -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

1
.gitignore vendored
View file

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

6
.prettierignore Normal file
View file

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

7
.prettierrc Normal file
View file

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

5
.stylelintignore Normal file
View file

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

3
.stylelintrc.json Normal file
View file

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

View file

@ -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

View file

@ -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",

13
composer.lock generated
View file

@ -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",

View file

@ -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;

View file

@ -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;
}
/**

View file

@ -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;
*/

View file

@ -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/

View file

@ -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;
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 doesnt 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;

View file

@ -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() {
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);
})();

6740
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

23
package.json Normal file
View file

@ -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"
}
}