Prettier の設定をする

備忘録

Prettier とは

Prettier とはコードフォーマッタです。
ソースコードを整形してくれるやつです。

以下に対応しているらしい

JavaScript
JSX
Flow
TypeScript
JSON
HTML
Vue
Angular
Ember / Handlebars
CSS
Less
SCSS
styled-components 💅
styled-jsx
GraphQL
Markdown
YAML

インストールする

設定してみる

セミロコンつけてくださいてきなやつ
お好みでどうぞ

.prettierrc

{
  "semi": true,
  "arrowParens": "always",
  "bracketSpacing": true,
  "singleQuote": true,
  "endOfLine": "auto"
}

どうやって使うの？

コマンドを走らせる

"format": "prettier --write './src/**/*.ts'"
を追加する

package.json

{
  "name": "app_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npm run json2ts && tsc --build tsconfig.json",
    "main": "node dist/app.js",
    "dev": "nodemon --watch src --exec ts-node --compiler-options '{\"noUnusedLocals\": false}' src/app.ts",
    "format": "prettier --write './src/**/*.ts'"
  },

  省略

ディレクトリ保存時に適応させる

※他の設定も入ってます

settings.json

{
    "editor.tabCompletion": "on",
    "editor.tabSize": 2,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "[json]": {
      "editor.defaultFormatter": "vscode.json-language-features"
    },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true,
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "cSpell.enabledLanguageIds": [
      "html",
      "css",
      "ruby",
      "javascript",
      "typescript",
      "markdown"
    ],
}

.prettierrc に基づく

{
    "workbench.startupEditor": "none",
    "editor.tabSize": 2,
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.requireConfig": true,
    "prettier.configPath": "./.prettierrc",
}