• ESLint
  • Yarnスクリプト
  • 新規ファイルでの ESLint の無効化
  • 単一の違反に対するESLintの無効化
  • no-undef 規則とグローバルの宣言
  • を使用する関数は非推奨です。import/no-deprecated
  • vue/multi-word-component-names は私のファイルでは無効です
  • GraphQLスキーマとオペレーションの検証
• Prettierによるフォーマット
  • エディタ
  • Yarnスクリプト
  • VSコードの設定
    • デフォルトフォーマッタとしてPrettierを選択
    • 保存時のフォーマット

ツール

ESLint

フロントエンドのコード標準をカプセル化し、実施するためにESLintを使用しています。私たちの設定はgitlab-eslint-config プロジェクトにあります。

Yarnスクリプト

このセクションでは、ESLintを使用してファイルを検証し、自動修正を適用するために利用可能なヤーンスクリプトについて説明します。

すべてのステージファイル（git diff ）をESLintでチェックするには、次のスクリプトを実行します：

yarn run lint:eslint:staged

見つかった問題の一覧がコンソールに記録されます。

すべてのステージファイル（git diff に基づく）に ESLint の自動修正を適用するには、以下のスクリプトを実行してください：

yarn run lint:eslint:staged:fix

手動での変更が必要な場合は、変更点のリストがコンソールに送信されます。

リポジトリ内の特定のファイルをESLINTでチェックするには、以下のスクリプトを実行してください（$PATH_TO_FILEを置き換えてください）：

yarn run lint:eslint $PATH_TO_FILE

リポジトリ内のすべてのファイルをESLintでチェックするには、以下のスクリプトを実行してください：

yarn run lint:eslint:all

見つかった問題の一覧がコンソールに記録されます。

リポジトリ内のすべてのファイルに ESLint の自動修正を適用するには、以下のスクリプトを実行してください：

yarn run lint:eslint:all:fix

手動での変更が必要な場合は、変更点のリストがコンソールに送信されます。

新規ファイルでの ESLint の無効化

新しいファイルを作成する際にはESLintを無効にしないでください。既存のファイルはレガシーとの互換性のために既存のルールが無効になっているかもしれませんが、リファクタリング中です。

特定のESLintルールを無効にしないでください。技術的負債の発生を避けるため、以下のルールは既存のコードモジュールを起動/開始する場合にのみ無効にしてください。

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

これらのルールは行単位で無効にしてください。これにより、将来のリファクタリングが容易になります。例えば、eslint-disable-next-line やeslint-disable-line を使用してください。

単一の違反に対するESLintの無効化

一つの違反に対してルールを無効にする必要がある場合は、必要最小限のコードに対して無効にしてください：

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

import Foo from 'foo';

new Foo();

// better
import Foo from 'foo';

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

no-undef 規則とグローバルの宣言

no-undef ルールは決して無効にしないでください。代わりに、/* global Foo */ を使用してグローバルを宣言します。

複数のグローバルを宣言する場合は、変数ごとに必ず/* global [name] */ を 1 行使用します。

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

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

を使用する関数は非推奨です。import/no-deprecated

@gitlab/eslint-plugin Node モジュールにはeslint-plugin-import パッケージが含まれています。

@deprecated タグを持つ JSDoc ブロックを使って関数を非推奨にするためにimport/no-deprecated ルールを使うことができます：

/**
 * Convert search query into an object
 *
 * @param {String} query from "document.location.search"
 * @param {Object} options
 * @param {Boolean} options.gatherArrays - gather array values into an Array
 * @returns {Object}
 *
 * ex: "?one=1&two=2" into {one: 1, two: 2}
 * @deprecated Please use `queryToObject` instead. See https://gitlab.com/gitlab-org/gitlab/-/issues/283982 for more information
 */
export function queryToObject(query, options = {}) {
  ...
}

強く推奨します：

• この関数を使おうとしている開発者のために、代替パスを入れてください。
• マイグレーションプロセスを追跡するイシューへのリンクを提供してください。

この後に$ yarn eslint を実行すると、非推奨の使用法のリストが得られます：

$ yarn eslint

./app/assets/javascripts/issuable_form.js
   9:10  error  Deprecated: Please use `queryToObject` instead. See https://gitlab.com/gitlab-org/gitlab/-/issues/283982 for more information  import/no-deprecated
  33:23  error  Deprecated: Please use `queryToObject` instead. See https://gitlab.com/gitlab-org/gitlab/-/issues/283982 for more information  import/no-deprecated
...

非推奨の用法を削除する労力を追跡できるように、イシューを作成するための作業リストを作成するために、このルールの無効なケースを検索してください：

$ grep "eslint-disable.*import/no-deprecated" -r .

./app/assets/javascripts/issuable_form.js:import { queryToObject, objectToQuery } from './lib/utils/url_utility'; // eslint-disable-line import/no-deprecate
./app/assets/javascripts/issuable_form.js:  // eslint-disable-next-line import/no-deprecated

vue/multi-word-component-names は私のファイルでは無効です

単一名のコンポーネントは、Vueのスタイルガイドでは推奨されていません。

他の HTML コンポーネントと混同される可能性があるためです：コンポーネントに名前を付けると、<table> HTML .NET Frameworkのレンダリングが停止 <table>します。

これを解決するには、.vue ファイルとその参照の名前を、少なくとも2つの単語を使用するように変更する必要があります：

• user/table.vue をuser/users_table.vue にリネームし、UsersTable としてインポートし、<users-table />とともに使用することができます。

GraphQLスキーマとオペレーションの検証

私たちは@graphql-eslint/eslint-plugin を使用して GraphQL スキーマとオペレーションを lint しています。このプラグインが正しく機能するにはスキーマ全体が必要です。そのため、ローカルでESLintを実行する際には、スキーマの最新のダンプを生成することをお勧めします。これは./scripts/dump_graphql_schema スクリプトを実行することで可能です。

Prettierによるフォーマット

GitLab 13.2で導入された .graphql 。

私たちのコードはPrettierによってスタイルガイドに沿って自動的にフォーマットされます。Prettierは.js,.vue,.graphql,.scss ファイルを標準のPrettierルールに基づいてフォーマットします。Prettierのすべての設定は.prettierrcにあります。

エディタ

ワークフローにPrettierを組み込むには、お好みのエディタ（主要なエディタはすべてサポートされています）を適宜設定することをお勧めします。各ファイルの保存時にPrettierが実行されるように設定することをお勧めします。お好みのエディタでPrettierを使用する手順については、Prettierのドキュメントをご覧ください。

Prettierには、グローバルなYarnスクリプト（.js、.vue、.graphql、.scss）と同じファイル形式しかフォーマットさせないように注意してください。例えば、Visual Studio Codeの設定ファイルでファイル形式を除外することができます：

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

Yarnスクリプト

グローバルな書式設定を行うために、以下のyarnスクリプトが利用できます：

yarn run lint:prettier:staged:fix

すべてのステージファイル (git diffに基づく) を Prettier で更新し、必要な変更を保存します。

yarn run lint:prettier:staged

すべてのステージファイル (git diffに基づく) を Prettier でチェックし、手動更新が必要なファイルをコンソールにログ出力します。

yarn run lint:prettier

すべてのファイルを Prettier でチェックし、手動更新が必要なファイルをコンソールに記録します。

yarn run lint:prettier:fix

リポジトリ内のすべてのファイルをPrettierで整形します。

VSコードの設定

デフォルトフォーマッタとしてPrettierを選択

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"
  }
}

保存時のフォーマット

Prettierでファイルを自動的にフォーマットするには、以下のプロパティをユーザーまたはワークスペース設定に追加します：

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