ツール

ESLint

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

糸文字

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

現在ステージされている全てのファイル（git diff)をESLintでチェックするには、以下のスクリプトを実行してください： 

yarn eslint-staged

見つかった問題のリストはコンソールに記録されます。

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

yarn eslint-staged-fix

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

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

yarn eslint

見つかった問題のリストはコンソールに記録されます。

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

yarn eslint-fix

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

注意:使用はグローバルルールの更新に限定してください。 そうしないと、変更が膨大なマージリクエストにつながる可能性があります。

新しいファイルでのESLintの無効化

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

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

注:これらのルールを行単位で無効にします。 これにより、将来的なリファクタリングが容易になります。 例:eslint-disable-next-line またはeslint-disable-lineを使用します。

一つの違反に対してESLintを無効にします

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

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

Prettierを使った書式設定

Prettierは、標準的なPrettierルールに基づいて、.js、.vue、.scss ファイルの書式設定を行います。Prettierのすべての設定は、.prettierrcにあります。

編集者

prettierをワークフローに組み込む最も簡単な方法は、お好みのエディタ（主要なエディタはすべてサポートされています）を適宜設定することです。 各ファイルの保存時に自動的にprettierが実行されるように設定することをお勧めします。 お好みのエディタで設定する最適な方法はこちらをご覧ください。

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

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

糸文字

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

yarn prettier-staged-save

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

yarn prettier-staged

現在ステージされているすべてのファイル (git diffに基づく) を Prettier でチェックし、手動更新が必要なファイルをコンソールに記録します。 

yarn prettier-all

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

yarn prettier-all-save

リポジトリ内のすべてのファイルをPrettierで整形します。 (これはグローバルルールの更新をテストするためにのみ使用すべきです。そうしないと、巨大なMRになってしまいます)。

これらのYarnスクリプトのソースは/scripts/frontend/prettier.jsにあります。

変換期間中のスクリプト 

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

特定のフォルダ内のすべてのファイルをチェックします。 

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

これは、特定のフォルダ内のすべてのファイルを調べて保存します。

VSCodeの設定

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

フォーマッタとして Prettier を選択するには、[ユーザ設定] または [ワークスペース設定] に以下のプロパティを追加します： 

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

保存時のフォーマット

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

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