Tooling

原文：https://docs.gitlab.com/ee/development/fe_guide/tooling.html

• ESLint
  • Yarn Script
  • Disabling ESLint in new files
  • Disabling ESLint for a single violation
  • The no-undef rule and declaring globals
• Formatting with Prettier
  • Editor
  • Yarn Script
    • Scripts during Conversion period
  • VSCode Settings
    • Select Prettier as default formatter
    • Format on Save

Tooling

ESLint

我们使用 ESLint 封装和执行前端代码标准. 我们的配置可以在gitlab-eslint-config项目中找到.

Yarn Script

本节介绍可用于验证的脚本，并使用 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

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

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

• no-new
• class-method-use-this

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

Disabling ESLint for a single violation

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

// 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

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

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

// bad
/* globals Flash, Cookies, jQuery */
// good
/* global Flash */
/* global Cookies */
/* global jQuery */

Formatting with Prettier

对 GitLab 13.2 中引入的.graphql支持.

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

Editor

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

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

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

Yarn Script

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

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

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

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

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

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

VSCode Settings

Select Prettier as default formatter

要将” 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

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

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