VSCodeで保存時に整形するprettierの設定を変更したい

Question

前提・実現したいこと

vscodeで保存時に整形するprettierとeslintの設定を変更したい
具体的にはセミコロンを常に入れたい

発生している問題・エラーメッセージ

prettierとeslintをインストール済み
どちらの拡張機能もインストール済み
settings.jsonで"editor.formatOnSave":trueと"editor.codeActionsOnSave:{"source.fixAll.eslint":true}としている

ファイル保存時に文末にセミコロンが自動で入らないのでこれを修正したいと考え、
ルート直下に.prettierrc.jsonを作成し、"semi":trueとした
しかしこの設定が反映されず、保存時には自動でセミコロンを入れてくれない
npm run formatしたときはセミコロンを入れてくれる

ファイル保存時に走るprettierが.prettierrc.jsonで書かれた設定を反映していないと思われる
原因を知りたいです
以下にpackage.json、.eslintrc.json、.prettierrc.jsonの内容を書きます

自分ではかなり調べたつもりなのですが、全く解決法が分からず、とても困っています
どうにかして解決したいのでお力お借りしたいです

該当のソースコード

package.json

{
  "name": "learn-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "prettier --check \"./**/*.{tsx,ts}\" && eslint --ext .js,.ts,.tsx,jsx ./",
    "format": "prettier --write \"./**/*.{tsx,ts}\" && eslint --fix --ext .js,.ts,.tsx,.jsx ./"
  },
  "dependencies": {
    "next": "^9.5.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "styled-jsx": "^3.3.0"
  },
  "devDependencies": {
    "@types/node": "^14.11.5",
    "@types/react": "^16.9.51",
    "@typescript-eslint/eslint-plugin": "^4.4.0",
    "@typescript-eslint/parser": "^4.4.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-react": "^7.21.3",
    "prettier": "^2.1.2",
    "typescript": "^4.0.3"
  }
}

.eslintrc.json

{
    "root": true,
    "env": {
        "node": true,
        "browser": true,
        "es6": true
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:import/warnings",
        "plugin:import/typescript",
        "prettier",
        "prettier/@typescript-eslint"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        "semi": [
            "error",
            "always"
        ],
        "import/order": [
            "warn",
            {
                "alphabetize": {
                    "order": "asc"
                },
                "newlines-between": "always"
            }
        ]
    }
}

.prettierrc.json

{
    "tabWidth": 5,
    "bracketSpacing": true,
    "semi": true,
    "singleQuote": true
}

試したこと

.prettierrc.jsonにセミコロン以外の設定も試しに書いてみましたが、どれも反映されませんでした

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

ここにより詳細な情報を記載してください。

Answer 1

僕もこんな感じの現象になったことありましたが，
WorkSpaceの.vscode/settings.jsonに

{
  "prettier.configPath": "<相対パスで良かったはず，，，>"
}

みたいな感じで明示的に指定してあげると治りました．

Comments

[praemf]

なるほど設定ファイルしていすればいいんですねやってみます
これって別のプロジェクトの場合は切り替える必要ありますか？

[kmdkuk]

僕は，いろんなプロジェクトでprettierを使っている環境にいないので，prettierを使っている各ワークスペースの.vscode/settings.jsonに書いていますね．