Tooling

• ESLint
  • Disabling ESLint in new files
  • The no-undef rule and declaring globals
• • Editor
  • • Scripts during Conversion period
  • • Select Prettier as default formatter

Tooling

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

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

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

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

要将自动 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

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

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

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

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

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

Formatting with Prettier

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

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

请小心，你只能让更漂亮的格式相同的文件类型，全球纱线脚本执行（ .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 检查所有文件，并记录哪些文件需要手动更新到控制台.

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

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

Select Prettier as default formatter

{
  },
  "[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