LoginSignup
9

More than 5 years have passed since last update.

AngularプロジェクトにPrettier導入

Posted at

コードフォーマットは個人の好みが出るし、「ここは改行すべきか」など考えるより、コードフォーマッターに全て任せてしまった方が圧倒的に楽です。
Angularプロジェクトに今人気のPrettierを導入し、CIでフォーマットチェックするようにしました。

Prettier | Opinionated Code Formatter

インストール

$ yarn add prettier -D

フォーマットルール

プロジェクトのルートディレクトリに .prettierrc というコンフィグファイルを作り、フォーマットルールを記載します。

Prettierにはデフォルトのフォーマットルールがあるので、上書きしたいルールだけを書けば良いです。

僕は全てデフォルトのルールを使っていますが、どんなルールが使われているのか誰でもぱっと見で分かるように、あえてデフォルトのルールも記載しています。

.prettierrc
{
  "printWidth": 80,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true
}

VSCodeの設定

VSCodeにPrettierのExtensionをインストールし、ユーザー設定に以下の1行を追加します。これで、ファイルを保存するたびに自動的にファイルをフォーマットしてくれます。

"editor.formatOnSave": true

prettier.gif

特定の言語だけ設定したい場合は、以下のように書きます。

"[typescript]": {
    "editor.formatOnSave": true
},
"[javascript]": {
    "editor.formatOnSave": true
},
"[scss]": {
    "editor.formatOnSave": true
}

ちなみに、プロジェクトのルートディレクトリに .vscode/settings.json を作ってVSCodeの設定を書いておけばプロジェクトメンバーで設定を共有できますが、editor.formatOnSave はユーザーごとに設定しないと効きませんでした。

VSCode以外のエディタを使ってる方はこちら
-> Editor Integration | Prettier

TSLintのフォーマットルールを削除

ng new でAngularプロジェクトを作成すると、デフォルトでTSLintがついてきます。
TSLintにもコードフォーマットの機能がありますが、フォーマットに関してはPrettierの方が優れているので、Prettierと併用する場合はTSLintのフォーマット機能は使わない方が良いです。
Prettierはコードフォーマット、TSLintはそれ以外のクオリティチェックというように役割を分けましょう。

ということで、TSLintのコンフィグからフォーマットルールを削除します。

tslint.json
{
  "rulesDirectory": ["node_modules/codelyzer"],
  "rules": {
    "callable-types": true,
    "class-name": true,
--  "comment-format": [true, "check-space"],
--  "curly": true,
--  "eofline": true,
    "forin": true,
    "import-blacklist": [true],
--  "import-spacing": true,
--  "indent": [true, "spaces"],
    "interface-over-type-literal": true,
    "label-position": true,
--  "max-line-length": [true, 140],
    "member-access": false,
    "member-ordering": [
      true,
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-variable": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [true, "ignore-params"],
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
--  "no-trailing-whitespace": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
--  "one-line": [
--    true,
--    "check-open-brace",
--    "check-catch",
--    "check-else",
--    "check-whitespace"
--  ],
    "prefer-const": true,
--  "quotemark": [true, "single"],
    "radix": true,
--  "semicolon": ["always"],
    "triple-equals": [true, "allow-null-check"],
--  "typedef-whitespace": [
--    true,
--    {
--      "call-signature": "nospace",
--      "index-signature": "nospace",
--      "parameter": "nospace",
--      "property-declaration": "nospace",
--      "variable-declaration": "nospace"
--    }
--  ],
    "typeof-compare": true,
    "unified-signatures": true,
    "variable-name": false,
--  "whitespace": [
--    true,
--    "check-branch",
--    "check-decl",
--    "check-operator",
--    "check-separator",
--    "check-type"
--  ],
    "directive-selector": [true, "attribute", "", "camelCase"],
    "component-selector": [true, "element", "", "kebab-case"],
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true,
    "no-access-missing-member": true,
    "templates-use-public": true,
    "invoke-injectable": true
  }
}

CIでフォーマットチェック

せっかくプロジェクトでコードフォーマットを統一できるようになったので、CIでフォーマットをチェックするようにしたいですよね。
やり方は簡単で、以下のようなnpm scriptを用意して、CIで npm run format:check を実行してやるだけです。

package.json
"scripts": {
  "format:check": "prettier --config ./.prettierrc --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\""
}

CircleCIで実行した場合、コードフォーマットのチェックに引っかかったらこんな感じでFailします。
image.png

そのうちAngularが公式にPrettierを採用してほしい。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9