eslint 설정과 prettierrc 설정 간단하게 몇 가지 끄적이기

안녕하세요 상훈입니다.

1.  .eslintrc.json
2.  .prettierrc

파일에 대해서 간단한 설정 몇 가지를 작성해보려고 합니다.

 

 

1.  .eslintrc.json

일단 사용환경이 React.js 라서 ecmaFeatures 와 같은 경우 jsx 문법을 사용하고 있습니다.

commonjs를 적용해 eslint를 설치하였습니다.

 

- 사용하지 않은 변수에 대한 알림 및 에러 처리

하단에 보시면 no-unused-vars: "warn" 이라는 항목이 있는데, 해당 항목을 error, warn, off 로 설정이 가능합니다.

warn으로 설정하여 에러는 안나지만, underline이 가도록 설정하였습니다.

이렇게 노란색의 underline이 출력됩니다.

 

2.  .prettierrc

1) singleQuote: 싱글 쿼터로할지 더블 쿼터로 할지 설정입니다.

Vue.js 에서는 싱글을 추천하고, React.js 에서는 더블을 권장하고 있습니다. 그래서 false로 무조건 더블 쿼터 처리를 하게하였습니다.

2) semi: 코드의 맨 뒤에 콜론을 자동으로 삽입하게 할지 말지 적용하면 됩니다.

3) tabWidth: 1번 tab을 눌렀을 때 띄워줄 space의 개수입니다. 저는 2개로 했습니다. (2개로 하는게 대세더군요)

결과

 

도움이 되셨길 바랍니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.