# vscode와 터미널에서 rubocop, eslint 등 설정 방법求助

**URL:** <https://meta.discourse.org/t/help-configuring-rubocop-eslint-and-so-on-in-vscode-and-the-command-line/277070>\
**Category:** Marketplace\
**Created:** [8월 29, 2023, 4:08오후 UTC](https://meta.discourse.org/t/help-configuring-rubocop-eslint-and-so-on-in-vscode-and-the-command-line/277070 "2023-08-29T16:08:24Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)\
**Post date:** [8월 29, 2023, 4:42오후 UTC](https://meta.discourse.org/t/help-configuring-rubocop-eslint-and-so-on-in-vscode-and-the-command-line/277070/3 "2023-08-29T16:42:45Z")

</div>

제가 하는 일은 [GitHub - discourse/discourse-plugin-skeleton: Template for Discourse plugins · GitHub](https://github.com/discourse/discourse-plugin-skeleton) 과 [GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub](https://github.com/discourse/discourse-theme-skeleton) 의 워크플로를 그대로 복사하는 것입니다. (스트라이프 플러그인에 의존하는 제 대시보드 플러그인에 맞게 플러그인 쪽을 약간 수정해야 합니다.) 이 정도면 린팅을 수행하는 데 충분하다고 믿고 있습니다.

하지만 제가 원하는 것은 커밋하기 전에 VS Code가 린팅을 수행하는 것입니다. 예전에는 잘 작동했는데, 지금은 멈춰 버렸습니다. 20년 전 제가 Emacs를 알았던 것처럼 VS Code에 대해 잘 아는 누군가가 "Ctrl-P를 누르고, 포맷팅 도구를 설치하는 작업을 하고, 설정 파일을 수정해서 제대로 작동하게 하세요"라고 알려주면, 다시 Ctrl-S를 눌러 handlebars, javascript, 기타 파일들을 예쁘게 포맷팅하고, 정의했지만 사용하지 않은 귀찮은 변수들을 모두 찾아낼 수 있을 텐데 싶습니다.

### 조금 더 가까워지다

그래서 저는 이렇게 했습니다:

```plaintext
      npm install --global yarn
      yarn add prettier

```

이제 `discourse-prettier`가 있습니다:

```bash
#!/usr/bin/env bash
if [-n "$(find assets -type f \( -name "*.scss" -or -name "*.js" -or -name "*.es6" -or -name "*.hbs" \) 2>/dev/null)"]; then
  yarn prettier --write "assets/**/*.{scss,js,es6,hbs}"
fi
if [-n "$(find admin/assets -type f \( -name "*.scss" -or -name "*.js" -or -name "*.es6" -or -name "*.hbs" \) 2>/dev/null)"]; then
  yarn prettier --write "admin/assets/**/*.{scss,js,es6,hbs}"
fi
if [0 -lt $(find test -type f \( -name "*.js" -or -name "*.es6" \) 2> /dev/null | wc -l)]; then
  yarn prettier --write "test/**/*.{js,es6}"
fi

if [-n "$(find assets -type f \( -name "*.scss" -or -name "*.js" -or -name "*.es6" -or -name "*.hbs" \) 2>/dev/null)"]; then
  yarn prettier --list-different "assets/**/*.{scss,js,es6,hbs}"
fi
if [-n "$(find admin/assets -type f \( -name "*.scss" -or -name "*.js" -or -name "*.es6" -or -name "*.hbs" \) 2>/dev/null)"]; then
  yarn prettier --list-different "admin/assets/**/*.{scss,js,es6,hbs}"
fi
if [0 -lt $(find test -type f \( -name "*.js" -or -name "*.es6" \) 2> /dev/null | wc -l)]; then
  yarn prettier --list-different "test/**/*.{js,es6}"
fi

```

이것으로 제 문제의 일부는 해결되었습니다. 이제 최소한 커맨드 라인에서 `prettier`를 실행할 수 있게 되었습니다. 하지만 여전히 VS Code가 이 지저분한 일을 대신해 주기를 바라며 도움을 주고 싶습니다. 저장이 될 때 eslint(또는 rubocop 등)가 실행되어 문제를 수정하거나, 수정할 수 없음을 알려주면 좋겠습니다. 에디터가 제 코드를 _작성_해 주어야 한다고 생각할 만큼 나이는 들지 않았지만, 포맷팅은 해 주어야 한다고 생각할 만큼도 나이는 들지 않았습니다.

예전에는 누군가가 사용하는 VS Code 플러그인을 추천하는 토픽이 있었는데, 그 덕분에 도움이 되었지만 지금은 찾을 수 없습니다.

---

_[View the full topic](https://meta.discourse.org/t/help-configuring-rubocop-eslint-and-so-on-in-vscode-and-the-command-line/277070)._