💻 개발환경 세팅하기 - eslint, prettier

eslint는 코드를 실행하지 않아도 정적 분석을 통해 문법적 에러를 찾아주는 역할을 합니다.
prettier는 일관성있는 코드를 작석할 수 있게 포멧화 시켜주는 역할을 합니다.

📌 eslint & prettier

터미널에 npm i -D eslint 를 입력해 설치해줍니다.

prettier 사이트에 접속해 Docs - install 페이지에서 설치 명령어를 가져와 입력해줍니다. 다음으로 npm i -D eslint-config-prettier eslint-plugin-prettier 두가지 패키지를 설치해 줍니다.

eslint config prettier는 prettier와 겹쳐서 충돌이 나는 포멧을 비활성화 해주는 역할을 합니다.

eslint plugin prettier는 eslint에 prettier 포멧 기능을 추가해주는 역할을 해주는 패키지입니다.

eslint 설정 파일을 초기화 해주기 위해 다음 명령어를 입력해 줍니다. npx eslint --init 다음 설정값은 순서대로 선택해주면 됩니다.

• To check syntax and find problems
• JavaScript modules
• None of these
• No
• Browser
• JSON

선택을 마치면 eslintrc.json 파일이 생성됩니다. 해당 파일의 extends 부분에 아까 설치했던 패키지를 설정해주고, rules 부분에도 아래의 값을 입력해줍니다.

"extends": ["eslint:recommended", "plugin:prettier/recommend"],
  
"rules": {
  "prettier/prettier": "error"
}

eslint는 여러개의 스타일이 있는데, eslint airbnb 또는 eslint google 등을 검색해서 원하는 스타일을 설치하고 extends에서 첫번째 값을 지우고 설치하신 스타일을 아래와 같이 추가해주시면 됩니다.

"extends": ["eslint-config-airbnb", "plugin:prettier/recommend"],

eslint 를 적용하고 싶지 않은 파일들이 있다면 .eslintignore 파일을 생성한 뒤 해당 파일들을 적어주면 됩니다.

/node_modules
/dist
webpack.config.js

다음으로는 prettier를 설정해주는 .prettierrc.json 파일을 생성해줍니다. prettier 사이트의 Playground 페이지에서 메뉴에서 여러가지 prettier 룰들을 설정하고 하단에 json 값을 복사하여 가져와줍니다.

Docs - Configuring Prettier - Options에서 여러가지 룰들의 내용을 확인할 수 있습니다.

마찬가지로 프리티어가 설정되지 않길 원하는 파일들을 설정해 줄 .prettierignore 파일을 생성하고, 파일안에 내용을 입력해 줍니다.

/node_modules
/dist
webpack.config.js

마지막으로 VScode 확장자에서 eslint와 Prettier - Code formatter를 설치해줍니다. VScode에서 Open Workspace settings 검색후 settings.json 파일을 열어준 뒤 파일을 저장할 때도 eslint 포멧대로 저장될 수 있도록 아래와 같이 설정값을 작성해 줍니다.

{
  "eslint.trace.server": "off",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

참고 사이트

• https://prettier.io/
• https://eslint.org/docs/latest/rules/