Browse Source

Move JavaScript guidelines to the same page

Thibaud Colas 3 years ago
parent
commit
48e080965b

+ 0 - 1
docs/contributing/index.rst

@@ -63,7 +63,6 @@ More information
     general_guidelines
     python_guidelines
     ui_guidelines
-    javascript_guidelines
     documentation_guidelines
     documentation-modes
     security

+ 0 - 60
docs/contributing/javascript_guidelines.rst

@@ -1,60 +0,0 @@
-JavaScript coding guidelines
-============================
-
-Write JavaScript according to the `Airbnb Styleguide <https://github.com/airbnb/javascript>`_, with some exceptions:
-
--  Use `Prettier <https://prettier.io/>`_ for all formatting considerations.
--  We accept ``snake_case`` in object properties, such as
-   ``ajaxResponse.page_title``, however camelCase or UPPER_CASE should be used
-   everywhere else.
-
-
-Linting and formatting code
-~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-Wagtail uses `ESLint <https://eslint.org/>`_ and `Prettier <https://prettier.io/>`_.
-You'll need Node and npm on your development machine.
-Ensure project dependencies are installed by running ``npm install --no-save``.
-
-Linting code
-------------
-
-.. code-block:: console
-
-    $ npm run lint:js
-
-This will lint all the JS in the wagtail project, excluding vendor
-files and compiled libraries.
-
-Some of the modals are generated via server-side scripts. These include
-template tags that upset the linter, so modal workflow JavaScript is
-excluded from the linter.
-
-Formatting code
----------------
-
-For Prettier auto-formatting, run:
-
-.. code-block:: console
-
-    $ npm run format
-
-If you want to autofix linting errors:
-
-.. code-block:: console
-
-    $ npm run lint:js -- --fix
-
-This will perform safe edits to conform your JS code to the styleguide.
-It won't touch the line-length, or convert quotemarks from double to single.
-
-Run the linter after you've formatted the code to see what manual fixes
-you need to make to the codebase.
-
-Changing the linter configuration
----------------------------------
-
-The configuration for the linting rules is managed in an external
-repository so that it can be easily shared across other Wagtail projects
-or plugins. This configuration can be found at
-`eslint-config-wagtail <https://github.com/wagtail/eslint-config-wagtail>`_.

+ 9 - 1
docs/contributing/ui_guidelines.md

@@ -5,6 +5,7 @@ Wagtail’s user interface is built with:
 - **HTML** using [Django templates](https://docs.djangoproject.com/en/stable/ref/templates/language/).
 - **CSS** using [Sass](https://sass-lang.com/) and [Tailwind](https://tailwindcss.com/).
 - **SVG** for our icons, minified with [SVGO](https://jakearchibald.github.io/svgomg/).
+- **JavaScript** with [TypeScript](https://www.typescriptlang.org/).
 
 ## Linting and formatting
 
@@ -29,7 +30,14 @@ We use [djhtml](https://github.com/rtts/djhtml) for formatting and [Curlylint](h
 We use [Prettier](https://prettier.io/) for formatting and [Stylelint](https://stylelint.io/) for linting.
 
 - We follow [BEM](http://getbem.com/) and [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), with a large amount of utilities created with [Tailwind](https://tailwindcss.com/).
-- Familiarise yourself with our [stylelint-config-torchbox](https://github.com/wagtail/stylelint-config-wagtail) configuration, which details our preferred code style.
+- Familiarise yourself with our [stylelint-config-wagtail](https://github.com/wagtail/stylelint-config-wagtail) configuration, which details our preferred code style.
 - Use `rems` for `font-size`, because they offer absolute control over text. Additionally, unit-less `line-height` is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the `font-size`.
 - Always use variables for design tokens such as colors or font sizes, rather than hard-coding specific values.
 - We use the `w-` prefix for all styles intended to be reusable by Wagtail site implementers.
+
+## JavaScript guidelines
+
+We use [Prettier](https://prettier.io/) for formatting and [ESLint](https://eslint.org/) for linting.
+
+- We follow a laxer version of the [Airbnb styleguide](https://github.com/airbnb/javascript).
+- Familiarise yourself wit our [eslint-config-wagtail](https://github.com/wagtail/eslint-config-wagtail) configuration, which details our preferred code style.