Installation of Prettier to Vue3

Problem

Somehow, auto fix by Prettier on vscode is not working.

My environment

• Editor
  • vscode
• Plugin
  • Prettier ESLint
• Framework
  • Vue.js v.3

Solution for me

1. Installing packages following Prettier ESLint README (vue-eslint-parser is not required for me).
   
2. configuration of vscode settings following below picture.
   
   

Conclusion

Installing packages and configuration of vscode settings are needed.

Check List

1. Format On Saveにチェックが入っているかどうか
2. Default Formatterにチェックが入っているかどうか
3. PrettierがVS Codeにinstallされているかどうか
4. eslintの設定ができているかどうか
5. eslintの設定がproject内で適用されているかどうか

[221120 updated]

package.json

...

"eslintConfig": {
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier/@typescript-eslint",
      "plugin:prettier/recommended"
    ],
    "rules": {
      "prettier/prettier": "warn"
    }
  }

...

"devDependencies": {
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
  },

...

.prettierrc

{
  "prettier/prettier": "warn",
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true,
  "no-unused-vars": false
}