prettierの使い方とコーディングルールの登録

prettier

コードの整形ができるツール。ESLintと併用でき、ESLintよりも整形力にすぐれている。

install

npm i prettier
// ESLintと併用 + Googleのcoding rule
npm i prettier-eslint prettier-eslint-cli eslint-config-google

setting

登録したいルールを下記のように記述する。

// .prettierrc.js ( new file )

module.exports = {
  singleQuote: true,
  semi: false,
}

packageも書き加える。

// package.json

"scripts": {
  "format": "prettier --write 'src/**/*.{js,json,md,html,ts}'" // +
}

また、ESLintの設定もできる。

// eslintrc.json ( new file )

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "es5"
      }
    ]
  }
}

run

npm run format