ESLint設定

[takasaki376]

footer.tsxで、

<img src="/vercel.svg" alt="Vercel Logo" className="logo" />

　　↓

<Image src="/vercel.svg" alt="Vercel Logo" className="logo" />

と変更すると、commit時にエラーとなります。（未修正だと、ESLintのワーニング） 一旦プルリク投げます。

また、下記のワーニングは無視しています。（どうせ今から変わると想定）

./src/pages/index.tsx
61:11  Warning: 'data' is assigned a value but never used.  @typescript-eslint/no-unused-vars

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
clean-network	✅ Ready (Inspect)	Visit Preview	Jul 9, 2022 at 7:33AM (UTC)

[Mod12d]

このエラーでしょうか。 ✖ next lint --fix --file /src/components/footer.tsx: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/eslint-plugin'

[Mod12d]

これを参考にすると良さそうです https://robertcooper.me/post/using-eslint-and-prettier-in-a-typescript-project

[Mod12d]

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev した後に、commitするとImageコンポーネント使用しても commitが正常終了しました

[Mod12d]

ruleの方ですが、参考までにairbnbの設定を組み込むこともできそう https://stackoverflow.com/questions/52991850/what-does-extends-airbnb-actually-do-in-a-reacts-eslintrc-file

[Mod12d]

@takasaki376 yarn.lockがconflictしてますので こちらご参考まで https://qiita.com/teradonburi/items/4c2154d4311a74342392

[takasaki376]

@Mod12d ありがとうございます。（仕事中ですよね？） 帰宅してから確認します。

[takasaki376]

@Mod12d

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev した後に、commitするとImageコンポーネント使用しても commitが正常終了しました

こちらを実行しても変わりませんでした。 私の端末はインストール済でしたが、pullされた後にyarn installは実行されていましたか？

現在のエラー内容です。

> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
yarn run v1.22.18
warning ..\..\package.json: No license field
$ C:\Users\takas\react\clean_network\node_modules\.bin\lint-staged
◼ Preparing lint-staged...
◼ Preparing lint-staged...
◼ Running tasks for staged files...
◼ Preparing lint-staged...
◼ Running tasks for staged files...
◼ Applying modifications from tasks...
◼ Preparing lint-staged...
◼ Running tasks for staged files...
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
⠋ Preparing lint-staged...
◼ Running tasks for staged files...
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
⠙ Preparing lint-staged...
◼ Running tasks for staged files...
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
◼ Running tasks for staged files...
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
⠙ Running tasks for staged files...
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ◼ .lintstagedrc.js — 1 file
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ⠙ .lintstagedrc.js — 1 file
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ◼ **/*.{js,jsx,ts,tsx} — 1 file
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ⠙ **/*.{js,jsx,ts,tsx} — 1 file
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ◼ next lint --fix --file
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ◼ next lint --fix --file
      ◼ prettier --write
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ⠙ next lint --fix --file
      ◼ prettier --write
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ⠹ next lint --fix --file
      ◼ prettier --write
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ⠸ next lint --fix --file
      ◼ prettier --write
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file
      ◼ prettier --write
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
⠸ Applying modifications from tasks...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
◼ Reverting to original state because of errors...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
⠸ Reverting to original state because of errors...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
⠼ Reverting to original state because of errors...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
⠴ Reverting to original state because of errors...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
◼ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
⠴ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
⠦ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ .lintstagedrc.js — 1 file
    ❯ **/*.{js,jsx,ts,tsx} — 1 file
      ✖ next lint --fix --file  [FAILED]
      ◼ prettier --write
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...

✖ next lint --fix --file :
C:\Users\takas\react\clean_network\node_modules\next\dist\compiled\arg\index.js:1
(()=>{var e={816:e=>{const r=Symbol("arg flag");function arg(e,{argv:t,permissive:n=false,stopAtPositional:o=false}={}){if(!e){throw new Error("Argument specification object is required")}const i={_:[]};t=t||process.argv.slice(2);const a={};const s={};for(const t of Object.keys(e)){if(!t){throw new TypeError("Argument key cannot be an empty string")}if(t[0]!=="-"){throw new TypeError(`Argument key must start with '-' but found: '${t}'`)}if(t.length===1){throw new TypeError(`Argument key must have a name; singular '-' keys are not allowed: ${t}`)}if(typeof e[t]==="string"){a[t]=e[t];continue}let n=e[t];let o=false;if(Array.isArray(n)&&n.length===1&&typeof n[0]==="function"){const[e]=n;n=(r,t,n=[])=>{n.push(e(r,t,n[n.length-1]));return n};o=e===Boolean||e[r]===true}else if(typeof n==="function"){o=n===Boolean||n[r]===true}else{throw new TypeError(`Type missing or not a function or valid array type: ${t}`)}if(t[1]!=="-"&&t.length>2){throw new TypeError(`Short argument keys (with a single hyphen) must have only one character: ${t}`)}s[t]=[n,o]}for(let e=0,r=t.length;e<r;e++){const r=t[e];if(o&&i._.length>0){i._=i._.concat(t.slice(e));break}if(r==="--"){i._=i._.concat(t.slice(e+1));break}if(r.length>1&&r[0]==="-"){const o=r[1]==="-"||r.length===2?[r]:r.slice(1).split("").map((e=>`-${e}`));for(let r=0;r<o.length;r++){const l=o[r];const[f,u]=l[1]==="-"?l.split("=",2):[l,undefined];let c=f;while(c in a){c=a[c]}if(!(c in s)){if(n){i._.push(l);continue}else{const e=new Error(`Unknown or unexpected option: ${f}`);e.code="ARG_UNKNOWN_OPTION";throw e}}const[p,_]=s[c];if(!_&&r+1<o.length){throw new TypeError(`Option requires argument (but was followed by another short argument): ${f}`)}if(_){i[c]=p(true,c,i[c])}else if(u===undefined){if(t.length<e+2||t[e+1].length>1&&t[e+1][0]==="-"){const e=f===c?"":` (alias for ${c})`;throw new Error(`Option requires argument: ${f}${e}`)}i[c]=p(t[e+1],c,i[c]);++e}else{i[c]=p(u,c,i[c])}}}else{i._.push(r)}}return i}arg.flag=e=>{e[r]=true;return e};arg.COUNT=arg.flag(((e,r,t)=>(t||0)+1));e.exports=arg}};var r={};function __nccwpck_require__(t){var n=r[t];if(n!==undefined){return n.exports}var o=r[t]={exports:{}};var i=true;try{e[t](o,o.exports,__nccwpck_require__);i=false}finally{if(i)delete r[t]}return o.exports}if(typeof __nccwpck_require__!=="undefined")__nccwpck_require__.ab=__dirname+"/";var t=__nccwpck_require__(816);module.exports=t})();

Error: Option requires argument: --file
    at Object.arg [as default] (C:\Users\takas\react\clean_network\node_modules\next\dist\compiled\arg\index.js:1:1845)
    at nextLint (C:\Users\takas\react\clean_network\node_modules\next\dist\cli\next-lint.js:99:37)
    at C:\Users\takas\react\clean_network\node_modules\next\dist\bin\next:147:34
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky - pre-commit hook exited with code 1 (error)

[Mod12d]

@takasaki376 ~該当部分修正したコードを一旦pushしますね~

[Mod12d]

1. 検証のため、0c9c1efに強制一致(リモートブランチと一致)
2. yarn install
3. fotterをImageタグに変更
4. git add & commit
5. push(今しました）

[Mod12d]

直前のcommitとの差はyarn.lockのみみたいですね https://github.com/Mod12d/clean_network/pull/29/commits/0c9c1ef42ee2facf12e4c53596487a396ec8c26b

[takasaki376]

@Mod12d ありがとうございます。

developからもう一度やり直してみましたが、やっぱりcommit時にエラーです。（プルリクは投げてません。） https://github.com/Mod12d/clean_network/tree/feature/takasaki-%2315-2

1. @typescript-eslint/eslint-plugin、@typescript-eslint/parser
2. .eslintignore　ファイル追加
3. eslint設定
4. footerのImageタグ修正　　←やっぱりここでエラー

今後のために、ブランチfeature-takasaki-#15-2に切り替えて、Imageタグの修正してコミットまでしてもらえないでしょうか。（push不要です。） コミットできるなら、私の環境に原因があるということですね。

[Mod12d]

すみません、遅くなりました 可能なので、リモートの状態は正しいのかなと思います

terumi@teruminoAir clean_network % git switch  feature-takasaki-#15-2
Switched to branch 'feature-takasaki-#15-2'

terumi@teruminoAir clean_network % git reset --hard origin/feature/takasaki-#15-2
HEAD is now at 134c38c eslint設定

terumi@teruminoAir clean_network % git status                                    
On branch feature-takasaki-#15-2
You are in a sparse checkout with 100% of tracked files present.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   src/components/footer.tsx

no changes added to commit (use "git add" and/or "git commit -a")

terumi@teruminoAir clean_network % git add .

terumi@teruminoAir clean_network % git commit -m "test"                          
yarn run v1.22.18
$ /Users/terumi/tech/clean_network/node_modules/.bin/lint-staged
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
✨  Done in 4.76s.
[feature-takasaki-#15-2 790d639] test
 Committer: terumi <terumi@teruminoAir.AirPort>
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly. Run the
following command and follow the instructions in your editor to edit
your configuration file:

    git config --global --edit

After doing this, you may fix the identity used for this commit with:

    git commit --amend --reset-author

 1 file changed, 4 insertions(+), 1 deletion(-)

[takasaki376]

@Mod12d

可能なので、リモートの状態は正しいのかなと思います ありがとうございます。 端末にインストールしているNodeかyarn、gitのいずれかでしょうね。 gitだけ、バージョン番号の後ろにwindowsと出てきたのが気になりますが、それぞれどのバージョンを使っていますか。

> node -v
v16.13.0
> yarn -v
1.22.18
> git -v
git version 2.37.0.windows.1

このプルリクはマージしてしまって、あとはslackでのやり取りにしましょうか。