Flask와 Jinja2로 개발하기 - (2) Prettier와 Black 설정하기

Flask와 Jinja2로 개발을 시작하려고 보니 prettier와 Black을 설정하지 않아 코드가 일관된 형식으로 작성되지 않는 게 염려되어 먼저 환경 설정을 하고 시작하려고 합니다. 

사실 Black은 이번에 Python 개발을 하게 되면서 처음 알게 된건데, Python은 Black, autopep8, YAPF 등 별도의 포맷터를 사용한다고 하더라구요. 저는 이 중에서 가장 널리 쓰인다는 Black을 사용해보려고 합니다.

Prettier 설정하기

일단 먼저 prettier 부터 설정해보겠습니다. 

1. VS Code에 Prettier Extension이 설치 되어 있지 않다면 Prettier를 먼저 설치해주세요.

2. npm으로 prettier-plugin-jinja-template를 설치해줍니다. 만약에 npm을 처음 설치한다면 npm init으로 package.json을 먼저 생성한 후 설치하는 것을 권장합니다. 

npm install --save-dev prettier prettier-plugin-jinja-template

 

3. prettier-plugin-jinja-template 공식 문서(링크)에 나와있는대로 .prettierrc 파일을 설정하면 파일 저장시 auto fomatting이 제대로 되지 않는 문제가 있습니다.

예를 들면 .prettierrc 파일에서 

{
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "parser": "jinja-template"
      }
    }
  ]
}

 

parser의 "jinja-template" 부분이 문제가 되어 Prettier Output을 살펴보면 아래 이미지 처럼 Couldn't resolve parser "jinja-template". 오류가 발생하는 것을 볼 수 있습니다.

 

그래서 .prettierrc 파일은 이렇게 설정해주셔야 합니다. 참고로 tabWidth 등 설정은 제가 기존에 사용하던 설정을 그대로 들고왔습니다.

{
  "plugins": ["prettier-plugin-jinja-template"],
  "tabWidth": 2,
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true,
  "jsxBracketSameLine": false
}

 

4. VS code에서 settings.json에 아래 설정을 추가해줍니다. 만약에 이미 formatOnSave와 requireConfig가 true로 되어있다면 이 부분은 그냥 넘기시면 됩니다.

참고로 settings.json 는 workspace settings.json을 수정해줘야 합니다. workspace settings를 통해서 이 워크스페이스에서만 jinja-html과 관련된 설정을 할 것이기 때문입니다.
workspace settings를 찾는 방법은 'cmd + p'를 누르고 '> workspace settings'를 검색한 뒤, Preferences: Open Workspace Settings (JSON) 를 클릭하면 됩니다.
이 글에서 언급하는 settings.json은 모두 workspace settings 입니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[jinja-html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.pluginSearchDirs": ["./"],
  "editor.formatOnSave": true,
  "prettier.requireConfig": true
}

 

5. 4번까지 설정을 끝낸 상태에서 templates/index.html 파일을 클릭 후 하단에 파일 언어 모드를 확인하면 HTML로 되어있는데요. 이 부분이 jinja HTML로 표시가 되어있어야 제대로 동작을 하게 됩니다. 

 

jinja HTML로 표시해주기 위해서 VS Code에서 "Better Jinja" Extension을 설치해줍니다.

 

그리고 하단 HTML을 클릭하고 Jinja HTML을 선택해주면 됩니다.

근데 html으로 코드를 작성할 때마다 jinja HTML로 변경해줘야 하는 번거로움이 있습니다.

이 때는 settings.json에서 아래 코드를 설정해주면 .html 파일을 생성하면 자동으로 jinja HTML로 변경되는 것을 확인할 수 있습니다.

{
  "files.associations": {
    "*.html": "jinja-html"
  }
}

참고로 Material-Icon-Theme을 사용하면 jinja HTML로 설정된 파일은 아무런 파일 아이콘이 표시되지 않는 문제가 발생하는데, "vscode-icons" extension을 사용하면 해결됩니다.

 

6. 코드 작성 후 저장하면, 자동으로 prettier에 설정한 포맷이 적용되는 것을 확인할 수 있습니다.

Black 설정하기

Black 설치 방법 중에 pip install black 후 formatting provider 설정 방법이 있는데, 저는 formatting provider 설정을 할 수 없어서 아래와 같은 방법을 사용해서 설치했습니다. 

 

1. "Black Formatter" Extension을 설치해줍니다.

 

2. 그리고 마찬가지로  settings.json에 설정해줍니다.

{  
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true
  }
 }

 

3. .py 파일을 실행해보면 저장하면서 자동으로 포맷이 적용되는 것을 확인할 수 있습니다.

 

마무리

중간에 의도한대로 동작하지 않는 부분들 때문에 시간이 오래 걸리는 부분도 있었지만, Prettier와 Black 설정이 잘 마무리 되었습니다.

이제 본격적인 코드 작업을 시작해보겠습니다!

참고로 eslint는 추후에 자바스크립트 코드 작성을 시작할 때 작업할 예정입니다.

 

읽어주셔서 감사합니다! :)

댓글은 언제나 환영입니다 ☺️