[TIL] eslint과 prettier충돌 방지(성능비교)

클론 과제를 제작하는 중 eslint와 prettier이 충돌했습니다.

eslint와 prettier를 충돌이 날 경우 방지할 수 있는 방법에 대해 공부해 보았습니다.

Line 43:5:   Expected no linebreak before this expression
Missing semicolon

TL:DR

💡

eslint와 prettier 충돌이 발생했을 때 해결할 수 있는 방법은 크게 2가지입니다. 1. eslint-config-prettier로 prettier formatting과 관련된 lint 규칙들을 제거합니다. 2. eslint-plugin-prettier로 eslint 내에 prettier의 formatting규칙을 eslint 규칙안에 있게 합니다.

1. eslint-config-prettier

eslint-config-prettier는 eslint와 prettier가 충돌되는 규칙들을 off 하는 plugin입니다.

1. 설치

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

2. .eslintrc.js 설정

extends: ['prettier'],

2. eslint-plugin-prettier

eslint-plugin-prettier는 prettier를 eslint 규칙 내에서 작동하고 eslint에서 경고를 하고 알려줍니다.

1. 설치

npm install --save-dev eslint-plugin-prettier

💡

prettier와 eslint는 별도로 설치해주셔야 합니다.

2. .eslintrc.js 셋팅

"plugins": ["prettier"],
"rules": {
    "prettier/prettier": "error"
}

3. 둘을 같이 사용할 경우

둘을 같이 사용할 수 있습니다.

eslint와 prettier과 충돌되는 부분은 eslint-config-prettier로 off 해줍니다.

prettier 규칙이 eslint-plugin-prettier로 eslint에 추가가 됩니다.

둘 다 설치한 후 아래와 같이 .eslintrc.js에 설정을 해주면 됩니다.

extends: ["plugin:prettier/recommended"],

이 설정은 아래 설정과 같습니다.

.eslintrc.js

{
	extends: ['prettier'],
	plugins: ['prettier'],
	rules: {
	  'prettier/prettier': 'error',
	  'arrow-body-style': 'off',
	  'prefer-arrow-callback': 'off',
	},
}

💡

'arrow-body-style': 'off', 'prefer-arrow-callback': 'off'의 경우 eslint의 autofix로 인해 버그가 발생할 수 있기에 "plugin:prettier/recommended" 에 내재되어 있습니다. 자세한 내용은 링크를 참고하세요!

4. 성능 비교

eslint-plugin-prettier의 경우 eslint로 prettier 규칙을 검사합니다.

이는 prettier를 활용해 검사하는 것보다 느립니다.

실제로 eslint-config-prettier만 적용했을 때와 eslint-plugin-prettier를 적용했을 때의 성능 차이를 비교해보았습니다.

eslint에서는 TIMING 환경 변수를 활용해서 실행을 할 경우 각 lint 규칙별 성능을 비교할 수 있습니다. [링크]

TIMING=1 npx eslint ./src/**/*.{js,jsx}

1. eslint-config-prettier만 적용했을때

2. eslint-plugin-prettier와 eslint-config-prettier같이 적용했을 때

eslint-plugin-prettier와 eslint-config-prettier를 같이 적용하게 되면 prettier/prettier 규칙이 622ms로 eslint 성능이 약 2배 안 좋아진 것을 볼 수 있습니다.

결론

eslint-config-prettier과 eslint-plugin-prettier를 활용하면 충돌문제를 해결할 수 있습니다.

그렇지만 eslint-plugin-prettier를 사용할 경우 eslint의 prettier/prettier 규칙으로 인해 성능상 문제가 있을 수 있습니다.

references

사용 규칙

https://github.com/prettier/eslint-config-prettier

https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

퍼포먼스 확인

https://eslint.org/docs/latest/developer-guide/working-with-rules#per-rule-performance

https://duncanleung.com/profile-measure-find-remove-slow-eslint-rules/

Uploaded by N2T