mozilla
/
treeherder
зеркало из https://github.com/mozilla/treeherder.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность
treeherder/docs/code_style.md

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

27 строки
1.3 KiB
Markdown
Исходник Обычный вид История

Bug 1522101 - Use Prettier to format Markdown
2019-01-22 19:27:56 +03:00
# Code Style
Bug 1192957 - Docs: Explain the Python import style and how to run isort In the future, the new "Code Style" page will also be used to explain other styles/linters used in the project, eg JavaScript / ESlint.
2015-09-30 17:28:31 +03:00
Bug 1522101 - Use Prettier to format Markdown
2019-01-22 19:27:56 +03:00
## UI
Ui documentation update Add info on javascript and css libraries in code style section of docs.
2018-09-18 06:03:06 +03:00
Bug 1507172 - Use Prettier for formatting JS/JSX (#4276) Since it's more reliable (and strict) at code formatting than ESLint. We use it via an ESLint plugin, and so disable the style-related AirBnB preset rules, leaving the AirBnB guide to handle only correctness and best practices rules. It's highly encouraged to use an IDE integration or Git commit hook to run Prettier (or `yarn lint --fix`) automatically. See: * https://prettier.io/docs/en/editors.html * https://prettier.io/docs/en/precommit.html We may consider enabling a git commit hook out of the box (using eg Husky) in the future, however they have previously been known to interfere with partial-staging workflows, so would need to test the fixes they have made for them thoroughly first. In future PRs we may also want to start formatting JSON/CSS/Markdown using Prettier too.
2018-11-16 11:28:34 +03:00
We use Prettier for JS/JSX formatting and the [Airbnb](https://github.com/airbnb/javascript)
guide for non-style related best practices. Both are validated using ESlint (see Validating
Bug 1466084 - Docs: Switch to MkDocs and Material theme (#4565) Switches from Sphinx to MkDocs, since it: * supports Markdown natively without requiring hacks like `eval_rst` * validates inline links, ensuring that they are not broken * has a more pleasant live-reloading dev-server * supports the nicer looking mkdocs-material theme * is a third of the size of Sphinx (including deps) The theme change is now possible since Read the Docs have just started supporting use of custom themes (previously they would override the theme and use `readthedocs` theme regardless).
2019-02-06 22:34:08 +03:00
Javascript in the [Installation section](installation.md#validating-javascript)).
Bug 1507172 - Use Prettier for formatting JS/JSX (#4276) Since it's more reliable (and strict) at code formatting than ESLint. We use it via an ESLint plugin, and so disable the style-related AirBnB preset rules, leaving the AirBnB guide to handle only correctness and best practices rules. It's highly encouraged to use an IDE integration or Git commit hook to run Prettier (or `yarn lint --fix`) automatically. See: * https://prettier.io/docs/en/editors.html * https://prettier.io/docs/en/precommit.html We may consider enabling a git commit hook out of the box (using eg Husky) in the future, however they have previously been known to interfere with partial-staging workflows, so would need to test the fixes they have made for them thoroughly first. In future PRs we may also want to start formatting JSON/CSS/Markdown using Prettier too.
2018-11-16 11:28:34 +03:00
Bug 1522101 - Use `prettier --check` to validate formatting Currently Prettier is used via the ESLint integration, which only supports JS/JSX and not the other filetypes Prettier is able to format. For now these additional filetypes are excluded by `.prettierignore` entries, however these will be removed/fixes applied in later commits.
2019-01-22 19:13:47 +03:00
Prettier is also used to format JSON/CSS/HTML/Markdown/YAML. However these are not supported
by ESLint, so instead are validated using Prettier's CLI. To manually check their formatting
(as well as that of JS/JSX) using Prettier, run `yarn format:check`, or to apply formatting
fixes run `yarn format`.
However we recommend that you instead
[add Prettier to your editor/IDE](https://prettier.io/docs/en/editors.html)
Bug 1507172 - Use Prettier for formatting JS/JSX (#4276) Since it's more reliable (and strict) at code formatting than ESLint. We use it via an ESLint plugin, and so disable the style-related AirBnB preset rules, leaving the AirBnB guide to handle only correctness and best practices rules. It's highly encouraged to use an IDE integration or Git commit hook to run Prettier (or `yarn lint --fix`) automatically. See: * https://prettier.io/docs/en/editors.html * https://prettier.io/docs/en/precommit.html We may consider enabling a git commit hook out of the box (using eg Husky) in the future, however they have previously been known to interfere with partial-staging workflows, so would need to test the fixes they have made for them thoroughly first. In future PRs we may also want to start formatting JSON/CSS/Markdown using Prettier too.
2018-11-16 11:28:34 +03:00
and enable "format on save" for the most seamless development workflow.
Bug 1507406 - ESLint: Enforce more strict import style (#4279) Imports must now be grouped like so (with newlines between each): ``` // "external" modules import _ from 'lodash'; import chalk from 'chalk'; // modules from a "parent" directory import foo from '../foo'; import qux from '../../foo/qux'; // "sibling" modules from the same or a sibling's directory import bar from './bar'; import baz from './bar/baz'; ``` The `import/order` rule has auto-fix support, so any errors can be resolved using `yarn lint --fix`. See: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
2018-11-16 11:07:49 +03:00
Imports in JS/JSX must be ordered like so (with newlines between each group):
Bug 1522101 - Use Prettier to format Markdown
2019-01-22 19:27:56 +03:00
Bug 1507406 - ESLint: Enforce more strict import style (#4279) Imports must now be grouped like so (with newlines between each): ``` // "external" modules import _ from 'lodash'; import chalk from 'chalk'; // modules from a "parent" directory import foo from '../foo'; import qux from '../../foo/qux'; // "sibling" modules from the same or a sibling's directory import bar from './bar'; import baz from './bar/baz'; ``` The `import/order` rule has auto-fix support, so any errors can be resolved using `yarn lint --fix`. See: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
2018-11-16 11:07:49 +03:00
1. external modules (eg `'react'`)
2. modules from a parent directory (eg `'../foo'`)
3. "sibling" modules from the same or a sibling's directory (eg `'./bar'` or './bar/baz')
Bug 1507172 - Use Prettier for formatting JS/JSX (#4276) Since it's more reliable (and strict) at code formatting than ESLint. We use it via an ESLint plugin, and so disable the style-related AirBnB preset rules, leaving the AirBnB guide to handle only correctness and best practices rules. It's highly encouraged to use an IDE integration or Git commit hook to run Prettier (or `yarn lint --fix`) automatically. See: * https://prettier.io/docs/en/editors.html * https://prettier.io/docs/en/precommit.html We may consider enabling a git commit hook out of the box (using eg Husky) in the future, however they have previously been known to interfere with partial-staging workflows, so would need to test the fixes they have made for them thoroughly first. In future PRs we may also want to start formatting JSON/CSS/Markdown using Prettier too.
2018-11-16 11:28:34 +03:00
For CSS, we use [reactstrap](https://reactstrap.github.io/) and Bootstrap's utility classes as
much as possible before adding custom CSS to a style sheet. Any custom style that can be made
Bug 1617734 - Push health ui a11y improvements (#6059) * CSS Cleanup * Use darker-info and darker-secondary for a11y * Put Parent Push metric at end of list and clean it up * Add a `scrollToLine` when clicking/expanding metric names
2020-02-27 21:01:46 +03:00
reusable should be named generically and stored in the `ui/css/treeherder-custom-styles.css` file.