🔷

Installation of Prettier to Vue3

2023/03/20に公開

Problem

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

My environment

Solution for me

  1. Installing packages following Prettier ESLint README (vue-eslint-parser is not required for me).
    Screen Shot 2021-11-05 at 23.39.30.png
  2. configuration of vscode settings following below picture.
    Screen Shot 2021-11-05 at 23.43.06.png
    Screen Shot 2021-11-05 at 23.43.53.png

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内で適用されているかどうか

Screen Shot 2022-05-03 at 18.44.25.png
Screen Shot 2022-05-03 at 18.44.56.png
Screen Shot 2022-05-03 at 18.45.14.png

[221120 updated]

...

"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",
  },

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

Discussion