602.md

# Tooling

> 原文：[https://docs.gitlab.com/ee/development/fe_guide/tooling.html](https://docs.gitlab.com/ee/development/fe_guide/tooling.html)

*   [ESLint](#eslint)
    *   [Yarn Script](#yarn-script)
    *   [Disabling ESLint in new files](#disabling-eslint-in-new-files)
    *   [Disabling ESLint for a single violation](#disabling-eslint-for-a-single-violation)
    *   [The `no-undef` rule and declaring globals](#the-no-undef-rule-and-declaring-globals)
*   [Formatting with Prettier](#formatting-with-prettier)
    *   [Editor](#editor)
    *   [Yarn Script](#yarn-script-1)
        *   [Scripts during Conversion period](#scripts-during-conversion-period)
    *   [VSCode Settings](#vscode-settings)
        *   [Select Prettier as default formatter](#select-prettier-as-default-formatter)
        *   [Format on Save](#format-on-save)

# Tooling[](#tooling "Permalink")

## ESLint[](#eslint "Permalink")

我们使用 ESLint 封装和执行前端代码标准. 我们的配置可以在[`gitlab-eslint-config`](https://gitlab.com/gitlab-org/gitlab-eslint-config)项目中找到.

### Yarn Script[](#yarn-script "Permalink")

本节介绍可用于验证的脚本，并使用 ESLint 将自动修复应用于文件.

要使用 ESLint 检查所有当前暂存的文件（基于`git diff` ），请运行以下脚本：

```
yarn eslint-staged 
```

*找到的问题列表将记录到控制台.*

要将自动 ESLint 修复应用于所有当前暂存的文件（基于`git diff` ），请运行以下脚本：

```
yarn eslint-staged-fix 
```

*If manual changes are required, a list of changes will be sent to the console.*

要使用 ESLint 检查存储库中的**所有**文件，请运行以下脚本：

```
yarn eslint 
```

*找到的问题列表将记录到控制台.*

要将自动 ESLint 修复应用于存储库中的**所有**文件，请运行以下脚本：

```
yarn eslint-fix 
```

*如果需要手动更改，则会将更改列表发送到控制台.*

**警告：**限制使用全局规则更新. 否则，更改可能导致巨大的合并请求.

### Disabling ESLint in new files[](#disabling-eslint-in-new-files "Permalink")

创建新文件时，请不要禁用 ESLint. 由于遗留兼容性的原因，现有文件可能已禁用现有规则，但是它们正在重构中.

不要禁用特定的 ESLint 规则. 为避免引入技术债务，只有在调用/实例化现有代码模块时，才可以禁用以下规则.

*   [`no-new`](https://eslint.org/docs/rules/no-new)
*   [`class-method-use-this`](https://eslint.org/docs/rules/class-methods-use-this)

**注意：**逐行禁用这些规则. 这使得将来更容易重构. 例如，使用`eslint-disable-next-line`或`eslint-disable-line` .

### Disabling ESLint for a single violation[](#disabling-eslint-for-a-single-violation "Permalink")

如果确实需要为单个违规禁用规则，请以所需的最少代码量禁用它：

```
// bad
/* eslint-disable no-new */

import Foo from 'foo';

new Foo();

// better
import Foo from 'foo';

// eslint-disable-next-line no-new
new Foo(); 
```

### The `no-undef` rule and declaring globals[](#the-no-undef-rule-and-declaring-globals "Permalink")

**切勿**禁用`no-undef`规则. 用`/* global Foo */`代替声明 globals.

声明多个全局变量时，请始终为每个变量使用一个`/* global [name] */`行.

```
// bad
/* globals Flash, Cookies, jQuery */

// good
/* global Flash */
/* global Cookies */
/* global jQuery */ 
```

## Formatting with Prettier[](#formatting-with-prettier "Permalink")

对 GitLab 13.2 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/227280)的`.graphql`支持.

我们的代码会自动使用[Prettier](https://prettier.io)格式化，以遵循我们的样式指南. 漂亮正在格式化的护理`.js` ， `.vue` ， `.graphql`和`.scss`基于标准的漂亮规则文件. 您可以在`.prettierrc`找到`.prettierrc`所有设置.

### Editor[](#editor "Permalink")

在工作流程中包括更漂亮的最简单方法是相应地设置您的首选编辑器（支持所有主要编辑器）. 我们建议将漂亮的文件设置为在保存每个文件时自动运行. [在此处](https://prettier.io/docs/en/editors.html)找到[在](https://prettier.io/docs/en/editors.html)首选编辑器中进行设置的最佳方法.

请小心，你只能让更漂亮的格式相同的文件类型，全球纱线脚本执行（ `.js` ， `.vue` ， `.graphql`和`.scss` ）. 以 VSCode 为例，您可以轻松地在设置文件中排除文件格式：

```
 "prettier.disableLanguages":  [  "json",  "markdown"  ] 
```

### Yarn Script[](#yarn-script-1 "Permalink")

以下纱线脚本可用于进行全局格式化：

```
yarn prettier-staged-save 
```

使用 Prettier 更新所有当前暂存的文件（基于`git diff` ）并保存所需的更改.

```
yarn prettier-staged 
```

使用 Prettier 检查所有当前暂存的文件（基于`git diff` ），并记录哪些文件需要手动更新到控制台.

```
yarn prettier-all 
```

使用 Prettier 检查所有文件，并记录哪些文件需要手动更新到控制台.

```
yarn prettier-all-save 
```

使用 Prettier 格式化存储库中的所有文件. （这仅应用于测试全局规则更新，否则您将获得巨大的 MR）.

这些 Yarn 脚本的来源可以在`/scripts/frontend/prettier.js`找到.

#### Scripts during Conversion period[](#scripts-during-conversion-period "Permalink")

```
node ./scripts/frontend/prettier.js check-all ./vendor/ 
```

这将遍历特定文件夹中的所有文件并进行检查.

```
node ./scripts/frontend/prettier.js save-all ./vendor/ 
```

这将遍历特定文件夹中的所有文件并将其保存.

### VSCode Settings[](#vscode-settings "Permalink")

#### Select Prettier as default formatter[](#select-prettier-as-default-formatter "Permalink")

要将" Prettier"选择为格式器，请在"用户或工作区设置"中添加以下属性：

```
{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[graphql]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
} 
```

#### Format on Save[](#format-on-save "Permalink")

要使用 Prettier 自动设置文件格式，请在"用户或工作区设置"中添加以下属性：

```
{
  "[html]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.formatOnSave": true
  },
  "[graphql]": {
    "editor.formatOnSave": true
  },
} 
```