TypeScriptとPrettierの競合エラーについて

前提・実現したいこと

現在React+TypeScriptの環境に、PrettierとESLintを導入しているのですが、
PrettierとTypeScriptが競合エラーを起こし正常に動作しない状況となっています。

以下該当箇所

react
1const [result, setResult] = useState<any>({})
2↓自動補完後
3const [result, setResult] = useState < any > {}

このように、Prettierの自動補完によってスペースができ、処理自体が正常に動かなくなってしまいます。

こちらの解決方法をご存知の方いましたらご教授いただけますと幸いです。
初めての投稿のため至らない点多いとは思いますが、何卒よろしくお願いいたします。

該当のソースコード

.eslintrc.js

javascript
1module.exports = {
2  env: {
3    node: true,
4    es6: true,
5  },
6  extends: [
7    'standard',
8    'prettier/react',
9    'plugin:react/recommended',
10    'plugin:react-hooks/recommended',
11    'plugin:@typescript-eslint/eslint-recommended',
12    'plugin:@typescript-eslint/recommended',
13    'plugin:prettier/recommended',
14    'prettier/@typescript-eslint',
15  ],
16  plugins: ['react-hooks', 'react', '@typescript-eslint', 'prettier'],
17  parser: '@typescript-eslint/parser',
18  parserOptions: { ecmaVersion: 2018, sourceType: 'module' },
19  rules: {
20    'no-use-before-define': 'off',
21    'no-irregular-whitespace': 'off',
22    'react/prop-types': 'off',
23  },
24  settings: {
25    react: {
26      version: 'detect',
27    },
28  },
29  overrides: [
30    {
31      files: ['*.js'],
32      rules: {
33        '@typescript-eslint/no-var-requires': 'off',
34        '@typescript-eslint/explicit-function-return-type': 'off',
35      },
36    },
37  ],
38}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",                          
    "module": "commonjs",                    
    "jsx": "react",                           
    "strict": true,                         
    "moduleResolution": "node",           
    "esModuleInterop": true,               
    "skipLibCheck": true,                    
    "forceConsistentCasingInFileNames": true, 
  }
}

補足情報（FW/ツールのバージョンなど）

関連パッケージ

"@typescript-eslint/eslint-plugin": "^4.15.0",
"@typescript-eslint/parser": "^4.15.0",
"eslint": "^7.19.0",
"eslint-config-prettier": "^6.15.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.2.1",
"typescript": "^3.9.7",

hoshi-takanori

2021/02/15 10:44

extends に 'prettier/@typescript-eslint' が必要では。 https://qiita.com/yuma-ito-bd/items/cca7490fd7e300bbf169#prettier%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

mtyyy-8

2021/02/15 11:40

ご回答いただきありがとうございます。上記.eslintrc.jsに設定しております。

uraway_

2021/02/15 13:32

`.eslintrc.js`の中に、 ``` files: ['*.js'], ``` とあり気になったのですが、ファイルの拡張子は確実に`.tsx`でしょうか？パーサがJavaScriptだと誤認してフォーマットをかけているような動きに見えます

mtyyy-8

2021/02/15 23:32

ご回答いただきありがとうございます。 overridesの記述では、jsファイルのみlint設定を制限しています。（webpack.conig.js等でlintエラーが出てしまうため）

uraway_

2021/02/16 01:14

手元で環境を再現してみたのですが、問題は起きませんでした。エディタやIDEの設定が何か問題を起こしている可能性があります。一度、エディタから自動フォーマットする設定をオフにしたうえでeslintコマンドを実行した結果を貼ってもらえますか？また、どうしても解決できない場合はESLintとPrettierの統合をやめるのも一つの手です。現在はESLintとPrettierの統合は公式からは推奨されておらず、prettier --fixコマンドやエディタの拡張機能としてのPrettierを使うことが推奨されています。 https://prettier.io/docs/en/integrating-with-linters.html

mtyyy-8

2021/02/16 11:09

ご確認いただきありがとうございます。申し訳ありません...「.prettierrc.json」に記述していた"parser":"babel"が原因で不具合を起こしていたようです。こちら削除したところ正常に動作しました。 ESLintとPrettierの統合が非推薦とのことなので、再度lint環境を見直してみたいと思います。ご丁寧に回答下さりありがとうございました。