Prettier & ESLint 기본 설정(MAC)

VSCode Prettier & ESLint Setting

와 진짜 드디어 MAC을 구매하게 되었습니다.
그래서 기본 Setting만 해도 하 세월이 걸리는 것 같아서 다음 번에는 보다 빨리하기 위해 오늘의 실패를 토대로 잘 작성을 해보려고 합니다.

우선 기본적인 node, npx를 설치 완료 했다는 가정하에 진행을 하도록 하겠습니다. :)

아.. 시작전에 앞서 간단 명령어 tip을 써볼려고 합니다. 이것으로 인해 필요 없는 것을 확실하게 없앨 수 있게 되었습니다. ㅎㅎㅎㅎ

> npm list

npm에 설치 되어 있는 것들을 볼 수 있습니다.

> npm list //workspace의 list
> npm list -g //global의 list

> npm uninstall [list에서 본 이름]

npm에 설치 되어 있는 것을 지울 수 있습니다.

처음에는 전체에 VSCode에 Prettier & ESLint를 설정을 해놓고 특정 폴더에 .prettierrc.js, .eslint.js를 수정하는 방식으로 생각했는데.. 굉장히 잘못된 생각이었습니다. 이로인해 Prettier & ESLint는 많은 차이점이 있고 사용하는 것 또한 다르다는 것을 알게 되었습니다.

간단히 설명을 하자면

Prettier: formatter
ESLint: linter + formatter

formatter: Style 교정
linter: 오류를 잡는 것

Prettier은 팀원간 코드 규칙을 맞추기 위해 사용하고
ESLint는 잘못 입력한 문법을 자동으로 수정하기 위해 사용합니다.(JavaScript)
위의 링크를 보면 잘 알 수 있습니다.

1. npm init

node_modules와 package.json을 생성하여 보다 쉽게 수정할 수 있게 해줍니다.

2. npm install -D eslint

workspace에 ESLint를 설치 해줍니다.
-D: 개발 단계에서만 필요한 devDependencies 목록에 추가될 것(정보)

추가로 위의 npm list등을 이용하여 확인하면 좋습니다. ㅎㅎ

3. npx eslint --init

이것이 정말 좋은 것인데 한번에 ESLint 기본 Setting을 다 해준다고 생각을 하면 됩니다.

원하는 방향에 맞춰서 설정을 하시면 됩니다.
이 후에 .eslintrc.js라는 파일이 생성되어 있는데

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
  },
};

와 같이 생겼을 것 입니다. 여기서 원하는 규칙을 찾아서 rules에 추가를 해주시면 됩니다.

4. VSCode Prettier & ESLint 설치

다음과 같이 요 2개 설치하면 됩니다.

이제 부터 아주 쪼금 어려워 지긴하는데 사실 알면 엄청 쉽습니다.

5. VSCode 설정

처음 shift + command + P를 같이 누른 후에 setting을 찾습니다.

여기서 format부분에서 그림과 같은 부분을 선택하여 줍니다.

그리고 다시 shift + command + P 를 같이 누른 후에 format을 쳐서 Prettier을 적용시켜 줍니다.
이렇게 글로만 봐서는 저도 잘 모르겠습니다.... 그래서 영상을 넣어봤습니다.

드디어 이젠 command + s를 눌러서 저장을 해보시면 아주 잘 작동이 되는 것을 볼 수 있습니다.

추가로 html에도 Prettier을 적용하고 싶으면 해당 코드를 추가해 주면 됩니다.

"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

마치며

하나의 방법을 세우고 계속 고쳐나가는 식으로 하려고 합니다. 원래 방법을 세우지 않고 그냥 그때 그때 찾아서 할려고 했는데 너무 힘들다는 것을 느껴서 다른 분에게 도움도 되고 저의 방법도 세우고 1석 2조라는 좋은 장점이 생겼습니다.

REF

https://stackshare.io/stackups/eslint-vs-prettier#:~:text=Developers%20describe%20ESLint%20as%20%22The,is%20an%20opinionated%20code%20formatter%22.
https://c17an.netlify.app/blog/node.js/npm-install-%EC%A0%95%EB%A6%AC/article/