Closed chinsun9 closed 3 years ago
chinsun9
commented
3 years ago Posted on: 2021-06-05T07:47:59Z
안녕하세요! 글 감사히 보고 갑니다. 혹시 eslint와 prettier가 충돌이 나서 prettier를 꺼놓은 상태에서도 scss나 css에서 order가 되나요? 저는 prettiter 켜놓으면 order가 되긴 하는데 기존 다른 파일에서 eslint와 충돌이 나서 고민입니다!
chinsun9
commented
3 years ago Posted on: 2021-06-05T09:41:30Z
댓글 감사합니다! 오오! 저도 eslint + prettier 조합을 사용하는데, 세팅만큼 골치 아픈 게 없죠..
eslint를 쓰실 때, prettier는 꺼두셔야 합니다.
그런데 css와 같이 특정 언어에만 활성화시킬 수 있는 옵션이 있어요!
방법 (prettier을 css파일만 포맷팅하게 세팅)
`F1 > Open Workspace Settings (JSON)`으로 워크스페이스 세팅 파일을 켜주세요 (이거는 전역 설정이 아니라 현재 프로젝트에만 적용되는 세팅이에요!)
```jsonc .vscode\settings.json { // 이 설정은 저장할 때 자동으로 eslint가 검사해서 포맷팅하도록 합니다 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 이 설정은 prettier 비활성화합니다, 여기까지 하면 eslint와 prettier 충돌을 해결할 수 있습니다 // 아마 전역 세팅에서 defaultFormatter가 prettier로 설정되어 있을 거예요 // 정확히는 defaultFormatter인 prettier을 비활성화하는 옵션입니다 "editor.formatOnSave": false, // css 파일만 prettier로 인한 포맷팅 허용 "[css]": { "editor.formatOnSave": true }, "[scss]": { "editor.formatOnSave": true } } ```
여기까지 하시면 말씀하신 문제는 해결이 되실 거예요!
그리고 하나 더 팁을 드리자면, eslint와 prettier을 연동? 해서 함께 쓸 수 있는 방법이 있습니다
eslint-plugin-prettier eslint-config-prettier 에 대해 알아보시면 eslint에서 prettier을 플러그인 해서 함께 쓸 수 있어요!
그러면 eslint config 파일에서 prettier config에 해당하는 내용을 설정할 수 있습니다~
css 선언 순서 정렬하기 prettier-plugin-style-order
https://chinsun9.github.io/2021/01/05/css-%EC%84%A0%EC%96%B8-%EC%88%9C%EC%84%9C-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0-prettier-plugin-style-order/