diff options
Diffstat (limited to 'doc/development/fe_guide/tooling.md')
| -rw-r--r-- | doc/development/fe_guide/tooling.md | 50 |
1 files changed, 48 insertions, 2 deletions
diff --git a/doc/development/fe_guide/tooling.md b/doc/development/fe_guide/tooling.md index 585cd969c96..28deb7d95f9 100644 --- a/doc/development/fe_guide/tooling.md +++ b/doc/development/fe_guide/tooling.md @@ -4,6 +4,44 @@ We use ESLint to encapsulate and enforce frontend code standards. Our configuration may be found in the [`gitlab-eslint-config`](https://gitlab.com/gitlab-org/gitlab-eslint-config) project. +### Yarn Script + +This section describes yarn scripts that are available to validate and apply automatic fixes to files using ESLint. + +To check all currently staged files (based on `git diff`) with ESLint, run the following script: + +```shell +yarn eslint-staged +``` + +_A list of problems found will be logged to the console._ + +To apply automatic ESLint fixes to all currently staged files (based on `git diff`), run the following script: + +```shell +yarn eslint-staged-fix +``` + +_If manual changes are required, a list of changes will be sent to the console._ + +To check **all** files in the repository with ESLint, run the following script: + +```shell +yarn eslint +``` + +_A list of problems found will be logged to the console._ + +To apply automatic ESLint fixes to **all** files in the repository, run the following script: + +```shell +yarn eslint-fix +``` + +_If manual changes are required, a list of changes will be sent to the console._ + +**Caution:** Limit use to global rule updates. Otherwise, the changes can lead to huge Merge Requests. + ### Disabling ESLint in new files Do not disable ESLint when creating new files. Existing files may have existing rules @@ -56,13 +94,15 @@ When declaring multiple globals, always use one `/* global [name] */` line per v ## Formatting with Prettier -Our code is automatically formatted with [Prettier](https://prettier.io) to follow our style guides. Prettier is taking care of formatting `.js`, `.vue`, and `.scss` files based on the standard prettier rules. You can find all settings for Prettier in `.prettierrc`. +> Support for `.graphql` [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/227280) in GitLab 13.2. + +Our code is automatically formatted with [Prettier](https://prettier.io) to follow our style guides. Prettier is taking care of formatting `.js`, `.vue`, `.graphql`, and `.scss` files based on the standard prettier rules. You can find all settings for Prettier in `.prettierrc`. ### Editor The easiest way to include prettier in your workflow is by setting up your preferred editor (all major editors are supported) accordingly. We suggest setting up prettier to run automatically when each file is saved. Find [here](https://prettier.io/docs/en/editors.html) the best way to set it up in your preferred editor. -Please take care that you only let Prettier format the same file types as the global Yarn script does (`.js`, `.vue`, and `.scss`). In VSCode by example you can easily exclude file formats in your settings file: +Please take care that you only let Prettier format the same file types as the global Yarn script does (`.js`, `.vue`, `.graphql`, and `.scss`). In VSCode by example you can easily exclude file formats in your settings file: ```json "prettier.disableLanguages": [ @@ -131,6 +171,9 @@ To select Prettier as a formatter, add the following properties to your User or }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[graphql]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` @@ -150,5 +193,8 @@ To automatically format your files with Prettier, add the following properties t "[vue]": { "editor.formatOnSave": true }, + "[graphql]": { + "editor.formatOnSave": true + }, } ``` |