[change] Switched to prettier for CSS/JS linting #367

Closes #367

---------

Co-authored-by: Federico Capoano <[email protected]>

Author: youhaveme9

.github/workflows/ci.yml

@@ -47,7 +47,7 @@ jobs:
       run: |
         pip install -U pip wheel setuptools
         pip install -U -r requirements-test.txt
-        sudo npm install -g jshint stylelint
+        sudo npm install -g prettier
         pip install -e .[qa,rest,selenium]
         pip install ${{ matrix.django-version }}
 

.jshintrc

@@ -52,7 +52,7 @@ Install development dependencies:
 
     pip install -e .[qa,rest]
     pip install -r requirements-test.txt
-    sudo npm install -g jshint stylelint
+    sudo npm install -g prettier
 
 Set up the git *pre-push* hook to run tests and QA checks automatically
 right before the git push action, so that if anything fails the push

.stylelintrc.json

@@ -20,9 +20,9 @@ It runs ``isort`` and ``black`` to format python code (these two
 dependencies are required and installed automatically when running ``pip
 install openwisp-utils[qa]``).
 
-The ``stylelint`` and ``jshint`` programs are used to perform style checks
-on CSS and JS code respectively, but they are optional: if ``stylelint``
-and/or ``jshint`` are not installed, the check(s) will be skipped.
+The ``prettier`` programs is used to perform style checks on CSS and JS
+code, but it is optional: if ``prettier`` is not installed, the check(s)
+will be skipped.
 
 ``openwisp-qa-check``
 ---------------------
@@ -38,9 +38,9 @@ Shell script to run the following quality assurance checks:
 - ``isort`` - Sorts python imports alphabetically, and separated into
   sections
 - ``black`` - Formats python code using a common standard
-- ``csslinter`` - Formats and checks CSS code using stylelint common
+- ``csslinter`` - Formats and checks CSS code using prettier common
   standard
-- ``jslinter`` - Checks Javascript code using jshint common standard
+- ``jslinter`` - Checks Javascript code using prettier common standard
 
 If a check requires a flag, it can be passed forward in the same way.
 

docs/developer/installation.rst

@@ -41,9 +41,9 @@ show_help() {
   printf "ReStructuredText check options:\n"
   printf "  --skip-checkrst\t\t: Skip ReStructuredText check\n"
   printf "CSSlinter check options:\n"
-  printf "  --csslinter\t\t\t: Runs stylelint check\n"
+  printf "  --csslinter\t\t\t: Runs prettier check on css files\n"
   printf "Jslinter check options:\n"
-  printf "  --jslinter\t\t\t: Runs jshint check\n"
+  printf "  --jslinter\t\t\t: Runs prettier check on javascript files\n"
 }
 
 echoerr() { echo "$@" 1>&2; }
@@ -67,13 +67,13 @@ runcheckendline() {
   fi
 }
 
-runstylelintcheck() {
-  package='stylelint'
-  if which stylelint > /dev/null; then
-    stylelint verbose $(find . -type f -name "*.css") &&
-      echo "SUCCESS: Stylelint check successful!" ||
+runcssprettiercheck() {
+  package='prettier'
+  if which prettier > /dev/null; then
+    prettier $(find . -type f -name "*.css") --check &&
+      echo "SUCCESS: Prettier check successful!" ||
       {
-        echoerr "ERROR: Stylelint check failed! Hint: did you forget to run openwisp-qa-format?"
+        echoerr "ERROR: Prettier check failed! Hint: did you forget to run openwisp-qa-format?"
         FAILURE=1
       }
   else
@@ -82,13 +82,13 @@ runstylelintcheck() {
   fi
 }
 
-runjshintcheck() {
-  package='jshint'
-  if which jshint > /dev/null; then
-    jshint --verbose $(find . -type f -name "*.js" -a ! -path "*vendor/*.js") &&
-      echo "SUCCESS: Jshint check successful!" ||
+runjsprettiercheck() {
+  package='prettier'
+  if which prettier > /dev/null; then
+    prettier $(find . -type f -name "*.js" -a ! -path "*vendor/*.js") --check &&
+      echo "SUCCESS: Prettier check successful!" ||
       {
-        echoerr "ERROR: Jshint check failed! Hint: please follow js code conventions. Visit: https://openwisp.io/docs/developer/contributing.html#javascript-code-conventions"
+        echoerr "ERROR: Prettier check failed! Hint: please follow js code conventions. Visit: https://openwisp.io/docs/developer/contributing.html#javascript-code-conventions"
         FAILURE=1
       }
   else
@@ -283,11 +283,11 @@ if ! $SKIP_FLAKE8; then
 fi
 
 if ! $SKIP_CSS_LINTER; then
-  runstylelintcheck
+  runcssprettiercheck
 fi
 
 if ! $SKIP_JS_LINTER; then
-  runjshintcheck
+  runjsprettiercheck
 fi
 
 if ! $SKIP_RSTCHECK; then

docs/developer/qa-checks.rst

@@ -5,8 +5,9 @@ isort .
 black -S .
 docstrfmt --no-docstring-trailing-line --ignore-cache --line-length 74 .
 
-if which stylelint > /dev/null; then
-  stylelint $(find . -type f -name "*.css") --fix
+if which prettier > /dev/null; then
+  prettier $(find . -type f -name "*.css") --write
+  prettier $(find . -type f -name "*.js" -a ! -path "*vendor/*.js") --write
 else
-  echo "SKIPPED CSS FILES: Please install stylelint"
+  echo "SKIPPED CSS FILES: Please install prettier"
 fi

openwisp-qa-check

@@ -1,10 +1,10 @@
 #id_user_consented {
-    float: left;
-    margin-right: 8px;
-    vertical-align: top;
-    margin-bottom: 0px;
+  float: left;
+  margin-right: 8px;
+  vertical-align: top;
+  margin-bottom: 0px;
 }
-#id_metric_collection_consent_form > span.helptext{
-    display: block;
-    margin-top: 8px;
+#id_metric_collection_consent_form > span.helptext {
+  display: block;
+  margin-top: 8px;
 }