코드 포맷은 개인의 취향이 나오고, 「여기는 개행해야 할까」등 생각하는 것보다, 코드 포매터에 모두 맡겨 버리는 것이 압도적으로 편합니다.
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을 설치하고 사용자 설정에 다음 줄을 추가합니다. 이제 파일을 저장할 때마다 자동으로 파일을 포맷합니다.

"editor.formatOnSave": true

특정 언어만 설정하려면 다음과 같이 작성합니다.

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

덧붙여서 프로젝트의 루트 디렉토리에 .vscode/settings.json 를 만들어 VSCode의 설정을 써 두면 프로젝트 멤버로 설정을 공유할 수 있습니다만, editor.formatOnSave (은)는 유저마다 설정하지 않으면 효과가 없었습니다.

VSCode 이외의 에디터를 사용하는 분은 이쪽
-> 에디터 통합 | 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합니다.


그 중 Angular가 공식적으로 Prettier를 채용해 주었으면 한다.

참고

Setting up Prettier in an Angular CLI Project