最近、umijsを使用してreactプロジェクトをビルドしましたが、eslintの設定がうまくいかないことがわかりました 関連情報をチェックし、ソースコードを分析した後、以下は落とし穴の記録です：
I. .eslintrc.jsファイルをIDE(私はwebstormを使っています)で開くと、eslintの設定エラーが表示されます。
最初、私は把握することができませんでした、私は、設定ファイルを通じて、ソースコードのアドレスを拡張し、その中の問題を見つけるために、どのエラーの原因がわからないし、その後、インターネット上で解決策を見つけました：
それは、プロジェクトのtsconfig.jsonファイルに "include "設定項目を追加することです。これで問題は解決です。
II. prettierプロジェクト設定が機能しない
まず、新しく作成されたプロジェクトによって生成された .prettierrc.js 設定ファイルの内容を見てみましょう：
ほんの数行の単純なコードで、私は混乱しました。そして、fabric.prettierが何なのかを調べるためにプロジェクトのnode_modulesセクションに行き、最終的に以下のコードを見つけました。
"use strict";
/** @format */
module.exports = {
singleQuote: true,
trailingComma: 'all',
printWidth: 100,
proseWrap: 'never',
endOfLine: 'lf',
overrides: [
{
files: '.prettierrc',
options: {
parser: 'json',
},
},
{
files: 'document.ejs',
options: {
parser: 'html',
},
},
],
};
singleQuote:trueは二重引用符の代わりに一重引用符を使うという意味ですが、私のプロジェクトでは二重引用符を使ってもエラーになりませんでした！
そして、prettierはeslintで動作し、prettierのエラーアラートはeslintによって促され、eslint-plugin-prettierプラグインが必要であることを思い出しました。
.eslintrc.jsの設定ファイルを見てみると、このプラグインは使われておらず、package.jsonファイルを見てみると、このライブラリへの依存関係はありませんでした。
umijs/fabricがすでに継承されているのかと思いました。
それからeslintの設定ソースを見ましたが、やはりeslint-plugin-prettierプラグインはありませんでした！
umijs/fabricはprettier、eslint、stylelintを含むプロファイルの集合体です。
あなたが持っていないので、手動で追加してみます。それで
-eslint-plugin-prettierの依存関係の追加: -eslint-plugin-prettierの依存関係の追加。
yarn add eslint-plugin-prettier --dev
次に、.eslintrc.jsファイルを以下のように修正します。
案の定、この設定の後、IDEにエラーメッセージが表示されました。
あとは、あなたやあなたのチームの使い方に合わせてルールを設定するだけです。
III. git フックが動作しない
プロジェクトのpackage.jsonには、次のようなコードがあります。
gitフックの設定について書かれているので、試してみました。
git add .
git commit -m "..."
奇跡的なシーンが起こりました！
を設定します。{js,jsx,ts,tsx}はnpm run lint-staged:jsを実行します。
lint-staged:jsの定義から始めましょう：
そしてコンソールでコマンドを実行しましたが、何も見つかりませんでした！
迷った挙句、lint-staged:jsと同じようなlint:jsコマンドを見つけました。
npm run lint:js
コマンドは成功し、コンソールには次のようなエラーが表示されました。
そこで、package.jsonのlint-stagedコンフィギュレーションを以下のように変更しました。
それからコードを再送信すると、コンソールの出力は次のようになります：
ご覧の通り、コード送信は見事にブロックされました！！！！
この記事の詳細は次回に。
