Eslint && Prettier

1. prettier & eslint 플러그인 설치와 세팅

prettier, eslint, eslint-config-prettier 설치

$ npm install --save-dev eslint prettier eslint-config-prettier

세팅

.prettierrc

{
  "semi": false,
  "singleQuote": true
}

.eslintrc.js

module.export = {}

.vscode > settings.json
프로젝트에만 해당 룰을 적용하기 위해서는 .vscode폴더와 폴더 내부에 setting.json파일을 만들어 세팅을 해주면 됩니다.

{
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

2. 에어앤비 플러그인 설정

자주 사용되는 에어앤비 플러그인을 통해 코드를 보다 쉽게 세팅할 수 있습니다.

$ npm install --save-dev eslint-config-airbnb-base eslint-plugin-import

.eslintrc.js

module.export = {
  extends: ['airbnb-base', 'prettier'],
}

• eslint와 prettier이 충돌하는 문제는 eslint-config-prettier 설치 후 extends설정에 추가해 해결할 수 있습니다.
• 또한 prettier이 잘 동작하기 위해서는 prettier설정이 airbnb-base보다 뒤에 와야합니다.

3. 룰 추가 설정

만약, 특정 룰에서만 해당하는 eslint설정을 끄고 싶은 경우 아래와 같이 주석을 통해 적용할 수 있습니다.

/* eslint-disable-next-line */
console.log('Hello, world!')

하지만 위와 같이 모든 설정을 꺼버리기 보다는 아래와 같이 특정 설정을 명시해 꺼주는 것이 더 좋습니다.

/* eslint-disable-next-line no-console */
console.log('Hello, world!')

4. 노드 전용 플러그인

$ npm install --save-dev eslint-plugin-node

.eslintrc.js

module.exports = {
  extends: ['airbnb-base', 'plugin:node/recommended', 'prettier'],
}

5. 정리하며

이렇게 룰을 적용하면, 코드를 짜는 중간중간 바로 피드백을 주기 때문에 올바른 코드를 짜는 습관을 가질 수 있으며 여러사람이 코드를 작성할 때 모두가 같은 코드를 보면서 적용을 하기 때문에 보다 효율적인 협업이 가능합니다.