Format JS files using Prettier (Fixes #10468, #10479)

.eslintrc.js

@@ -1,56 +1,23 @@
 module.exports = {
     env: {
-        'browser': true,
-        'commonjs': true,
-        'jasmine': true
+        browser: true,
+        commonjs: true,
+        jasmine: true
     },
-    extends: [
-        'eslint:recommended',
-        'plugin:json/recommended'
-    ],
+    extends: ['eslint:recommended', 'plugin:json/recommended', 'prettier'],
     rules: {
         // Require strict mode directive in top level functions
         // https://eslint.org/docs/rules/strict
-        'strict': ['error', 'function'],
-
-        // This option sets a specific tab width for your code
-        // https://eslint.org/docs/rules/indent
-        'indent': ['error', 4],
-
-        // Disallow mixed 'LF' and 'CRLF' as linebreaks
-        // https://eslint.org/docs/rules/linebreak-style
-        'linebreak-style': ['error', 'unix'],
-
-        // Specify whether double or single quotes should be used
-        'quotes': ['error', 'single'],
-
-        // Require or disallow use of semicolons instead of ASI
-        'semi': ['error', 'always'],
-
-        // Enforce location of semicolons
-        // https://eslint.org/docs/rules/semi-style
-        'semi-style': ['error', 'last'],
-
-        // Require camel case names
-        // https://eslint.org/docs/rules/camelcase
-        'camelcase': ['error', { 'properties': 'always' }],
+        strict: ['error', 'function'],
 
         // Use type-safe equality operators
         // https://eslint.org/docs/rules/eqeqeq
-        'eqeqeq': ['error', 'always'],
+        eqeqeq: ['error', 'always'],
 
         // Treat var statements as if they were block scoped
         // https://eslint.org/docs/rules/block-scoped-var
         'block-scoped-var': 'error',
 
-        // Require newlines around variable declarations
-        // https://eslint.org/docs/rules/one-var-declaration-per-line
-        'one-var-declaration-per-line': ['error', 'always'],
-
-        // Require constructor names to begin with a capital letter
-        // https://eslint.org/docs/rules/new-cap
-        'new-cap': 'error',
-
         // Disallow Use of alert, confirm, prompt
         // https://eslint.org/docs/rules/no-alert
         'no-alert': 'error',
@@ -65,7 +32,7 @@ module.exports = {
 
         // Require radix parameter
         // https://eslint.org/docs/rules/radix
-        'radix': 'error',
+        radix: 'error',
 
         // Disallow the use of `console`
         // https://eslint.org/docs/rules/no-console
@@ -77,14 +44,12 @@ module.exports = {
     overrides: [
         {
             // JS files transpiled by Babel
-            files: [
-                'media/js/**/*.es6.js',
-            ],
+            files: ['media/js/**/*.es6.js'],
             env: {
-                'es2017': true
+                es2017: true
             },
             parserOptions: {
-                'sourceType': 'module'
+                sourceType: 'module'
             },
             rules: {
                 // Require `let` or `const` instead of `var`
@@ -105,7 +70,7 @@ module.exports = {
                 'tests/unit/**/*.js'
             ],
             env: {
-                'es2017': true
+                es2017: true
             }
         },
         {
@@ -116,17 +81,17 @@ module.exports = {
                 'tests/unit/karma.conf.js'
             ],
             env: {
-                'node': true,
-                'es2017': true
+                node: true,
+                es2017: true
             },
             rules: {
-                'strict': ['error', 'global'],
+                strict: ['error', 'global']
             }
         }
     ],
     globals: {
-        'Mozilla': 'writable',
-        'Mzp': 'writable',
-        'site': 'writable'
+        Mozilla: 'writable',
+        Mzp: 'writable',
+        site: 'writable'
     }
 };

.git-blame-ignore-revs

@@ -1,2 +1,5 @@
 # Migrate code style to Black
 31943fea7582fa42320b44e796b0e343bfa90f89
+
+# Migrate JS code style to Prettier
+af4305055ec7748541c87c7cb035c547fbcb8303

.pre-commit-config.yaml

@@ -23,6 +23,10 @@ repos:
       - id: flake8
   #        TODO Add this and fix issues found
   #        additional_dependencies: [flake8-bugbear]
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v2.4.1
+    hooks:
+      - id: prettier
   - repo: https://github.com/awebdeveloper/pre-commit-stylelint
     rev: 0.0.2
     hooks:
@@ -36,11 +40,5 @@ repos:
       - id: eslint
         additional_dependencies:
           - "eslint-plugin-json@2.1.1"
-        exclude: >
-          (?x)^(
-            docs
-            | node_modules
-            | assets
-            | static
-            | media/js/libs
-          )
+          - "eslint-config-prettier@8.3.0"
+  #       Additional excludes in /.eslintignore file

.prettierignore

@@ -0,0 +1,25 @@
+# Ignore artifacts:
+.vscode/
+assets
+data
+docs
+git-repos
+node_modules
+static
+static_build
+static_final
+venv
+
+# Ignore external JS libraries
+media/js/libs/**/
+media/js/ie/libs/**/
+
+# Ignore file types:
+# https://github.com/prettier/prettier/issues/6356 blocks formating scss/css.
+*.html
+*.md
+*.scss
+*.css
+*.yml
+*.yaml
+*.json

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 4,
+  "semi": true,
+  "singleQuote": true
+}

.stylelintrc

@@ -1,40 +1,43 @@
 {
-  "rules": {
-    "color-no-invalid-hex": true,
-    "font-family-no-duplicate-names": true,
-    "font-family-name-quotes": "always-where-recommended",
-    "function-name-case": "lower",
-    "function-url-no-scheme-relative": true,
-    "function-url-quotes": "always",
-    "number-no-trailing-zeros": true,
-    "length-zero-no-unit": true,
-    "unit-case": "lower",
-    "unit-no-unknown": true,
-    "property-case": "lower",
-    "property-no-unknown": true,
-    "keyframe-declaration-no-important": true,
-    "declaration-no-important": true,
-    "declaration-block-no-shorthand-property-overrides": true,
-    "declaration-block-single-line-max-declarations": 1,
-    "declaration-block-trailing-semicolon": "always",
-    "declaration-block-semicolon-newline-after": "always-multi-line",
-    "block-no-empty": true,
-    "selector-pseudo-class-no-unknown": true,
-    "selector-pseudo-element-no-unknown": true,
-    "selector-pseudo-element-case": "lower",
-    "selector-type-case": "lower",
-    "selector-type-no-unknown": true,
-    "selector-max-empty-lines": 0,
-    "media-feature-name-case": "lower",
-    "media-feature-name-no-unknown": [true, {
-      ignoreMediaFeatureNames: ["min--moz-device-pixel-ratio"]
-    }],
-    "comment-no-empty": true,
-    "max-nesting-depth": 5,
-    "no-invalid-double-slash-comments": true,
-    "no-unknown-animations": true,
-    "no-extra-semicolons": true,
-    "no-missing-end-of-source-newline": true,
-    "no-eol-whitespace": true
-  }
+    "rules": {
+        "color-no-invalid-hex": true,
+        "font-family-no-duplicate-names": true,
+        "font-family-name-quotes": "always-where-recommended",
+        "function-name-case": "lower",
+        "function-url-no-scheme-relative": true,
+        "function-url-quotes": "always",
+        "number-no-trailing-zeros": true,
+        "length-zero-no-unit": true,
+        "unit-case": "lower",
+        "unit-no-unknown": true,
+        "property-case": "lower",
+        "property-no-unknown": true,
+        "keyframe-declaration-no-important": true,
+        "declaration-no-important": true,
+        "declaration-block-no-shorthand-property-overrides": true,
+        "declaration-block-single-line-max-declarations": 1,
+        "declaration-block-trailing-semicolon": "always",
+        "declaration-block-semicolon-newline-after": "always-multi-line",
+        "block-no-empty": true,
+        "selector-pseudo-class-no-unknown": true,
+        "selector-pseudo-element-no-unknown": true,
+        "selector-pseudo-element-case": "lower",
+        "selector-type-case": "lower",
+        "selector-type-no-unknown": true,
+        "selector-max-empty-lines": 0,
+        "media-feature-name-case": "lower",
+        "media-feature-name-no-unknown": [
+            true,
+            {
+                "ignoreMediaFeatureNames": ["min--moz-device-pixel-ratio"]
+            }
+        ],
+        "comment-no-empty": true,
+        "max-nesting-depth": 5,
+        "no-invalid-double-slash-comments": true,
+        "no-unknown-animations": true,
+        "no-extra-semicolons": true,
+        "no-missing-end-of-source-newline": true,
+        "no-eol-whitespace": true
+    }
 }

Dockerfile

@@ -13,7 +13,7 @@ COPY package.json yarn.lock ./
 RUN yarn install --pure-lockfile
 
 # copy supporting files and media
-COPY .eslintrc.js .eslintignore .stylelintrc .stylelintignore webpack.config.js webpack.static.config.js ./
+COPY .eslintrc.js .eslintignore .stylelintrc .stylelintignore .prettierignore .prettierrc.json webpack.config.js webpack.static.config.js ./
 COPY ./media ./media
 COPY ./tests/unit ./tests/unit
 

Makefile

@@ -18,7 +18,8 @@ help:
 	@echo "  fresh-data    - pull the latest database and update all external data"
 	@echo "  clean         - remove all build, test, coverage and Python artifacts"
 	@echo "  rebuild       - force a rebuild of all of the docker images"
-	@echo "  lint          - check style with flake8, eslint, and stylelint"
+	@echo "  lint          - check style with Flake8, ESlint, Stylelint, and Prettier"
+	@echo "  format        - format front-end code using Prettier"
 	@echo "  test          - run tests against local files"
 	@echo "  test-image    - run tests against files in docker image"
 	@echo "  test-cdn      - run CDN tests against TEST_DOMAIN"
@@ -97,6 +98,10 @@ lint: .docker-build-pull
 	${DC} run test flake8
 	${DC} run assets npm run lint
 
+format: .docker-build-pull
+	${DC} run assets npm run prettier
+	${DC} run app black .
+
 test: .docker-build-pull
 	${DC} run test
 

docs/coding.rst

@@ -514,29 +514,30 @@ location of the user.
         <h1>Yay World!</h1>
     {% endif %}
 
-Coding Style Guides
--------------------
+Coding Style
+------------
+
+Bedrock uses the following open source tools to follow coding styles and conventions,
+as well as applying automatic code formatting:
+
+* `Black <https://black.readthedocs.io/>`_ for Python code formatting.
+* `Flake8 <https://flake8.pycqa.org/>`_ for Python style and code quality rules.
+* `Prettier <https://prettier.io/>`_ for JavaScript code formatting.
+* `ESLint <https://eslint.org/>`_ for JavaScript code quality rules.
+* `Stylelint <https://stylelint.io/>`_ for Sass/CSS style and code quality rules.
+
+For front-end HTML & CSS conventions, bedrock uses Mozilla's Protocol design system for
+building components. You can read the `Protocol documentation site <https://protocol.mozilla.org/>`_
+for more information.
+
+Mozilla also has some more general coding styleguides available, although some of
+these are now rather outdated:
 
 * `Mozilla Python Style Guide <http://mozweb.readthedocs.org/en/latest/reference/python-style.html>`_
 * `Mozilla HTML Style Guide <http://mozweb.readthedocs.org/en/latest/reference/html-style.html>`_
 * `Mozilla JS Style Guide <http://mozweb.readthedocs.org/en/latest/reference/js-style.html>`_
 * `Mozilla CSS Style Guide <http://mozweb.readthedocs.org/en/latest/reference/css-style.html>`_
 
-Use the ``.open-sans``, ``.open-sans-light`` and ``.open-sans-extrabold`` mixins
-to specify font families to allow using international fonts. See the :ref:`CSS <l10n>`
-section in the l10n doc for details.
-
-Use the ``.font-size()`` mixin to generate root-relative font sizes. You can
-declare a font size in pixels and the mixin will convert it to an equivalent
-``rem`` (root em) unit while also including the pixel value as a fallback for
-older browsers that don't support ``rem``. This is preferable to declaring font
-sizes in either fixed units (``px``, ``pt``, etc) or element-relative units (``em``, ``%``).
-See `this post by Jonathan Snook <http://snook.ca/archives/html_and_css/font-size-with-rem>`_
-for more info.
-
-When including CSS blocks, use ``{% block page_css %}`` for page specific inclusion of CSS.
-``{% block site_css %}`` should only be touched in rare cases where base styles need to be overwritten.
-
 Configuring your code editor
 ----------------------------
 

media/js/base/banners/eu-mr1-banner-init.js

@@ -2,14 +2,12 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-(function() {
+(function () {
     'use strict';
 
     function onLoad() {
-
         window.Mozilla.Banner.init('eu-mr1-banner');
     }
 
     window.Mozilla.run(onLoad);
-
 })();

media/js/base/banners/firefox-app-store-banner-init.js

@@ -11,15 +11,18 @@ if (typeof window.Mozilla === 'undefined') {
     window.Mozilla = {};
 }
 
-(function() {
+(function () {
     'use strict';
 
     function onLoad() {
         window.Mozilla.Banner.init('firefox-app-store-banner', true);
     }
 
-    if (window.Mozilla.run && window.site && (window.site.platform === 'android' || window.site.platform === 'ios')) {
+    if (
+        window.Mozilla.run &&
+        window.site &&
+        (window.site.platform === 'android' || window.site.platform === 'ios')
+    ) {
         window.Mozilla.run(onLoad);
     }
-
 })();

media/js/base/banners/mobile-compare-banner-init.js

@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-(function() {
+(function () {
     'use strict';
 
     function onLoad() {