VSCodeでprettierを使えるようにする

VSCodeでprettierを使えるようにする

npm i -D prettier

.prettierignore

node_modules/
.next/
.nuxt/
.astro/
build/
dist/
out/
public/
package-lock.json
yarn.lock
pnpm-lock.yaml
next.config.js

.prettierrc

{
    "trailingComma": "all",
    "tabWidth": 2,
    "useTabs": false,
    "semi": false,
    "singleQuote": true,
    "jsxSingleQuote": false,
    "arrowParens": "always",
    "printWidth": 80,
    "bracketSpacing": true,
    "overrides": [
        {
            "files": "*.html",
            "options": {
                "printWidth": 360
            }
        },
        {
            "files": [
                "*.css",
                "*.scss"
            ],
            "options": {
                "singleQuote": false
            }
        }
    ]
}

.vscode/setting.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  }
}