ツール
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
},
}