실제로 ESLint + Prettier를 사용하는 방법

이 기사에서는 프로젝트에서 ESLint 및 Prettier를 사용하여 우수한 Linting 솔루션을 설정하는 방법을 배웁니다.

문제

Prettier를 ESLint 규칙으로 사용하면 다음과 같은 단점이 있습니다.

• You end up with many red squiggly lines in your editor, which gets annoying. Prettier is supposed to make you forget about formatting — and not be in your face about it!

https://stackoverflow.com/questions/63419399/red-squiggly-lines-in-vs-code

• They are slower than running Prettier directly.

• They're yet one layer of indirection where things may break.

https://prettier.io/docs/en/integrating-with-linters.html#notes

프리티어가 당신의 스타일링을 책임집니다.

그럼 어떻게 사용해야 할까요?

ESLint 설정

먼저 ESLint를 설치합니다.

npm install eslint --save-dev

그런 다음 구성 스크립트를 실행합니다.

npm init @eslint/config

이제 구성해 보겠습니다.

How would you like to use ESLint?
> To check syntax and find problems

What type of modules does your project use?
> Choose what is best for you (i.e. `esm`)

Which framework does your project use?
> Choose your framework (i.e. `react`)

Does your project use TypeScript?
> If it does not, you probably should.

Where does your code run?
> Choose `Browser` if you are using Client-Side, `Node` for Server-Side, or both if you are using something like Next.js or Remix

What format do you want your config file to be in?
> Choose what is best for you. I prefer JSON as it gives you IntelliSense.

Would you like to install them now?
> Yes

Which package manager do you want to use?
> Choose your package manager (i.e. `yarn`)

프리티어 설정하기

먼저 Prettier를 설치합니다.

npm install --save-dev --save-exact prettier

그런 다음 Prettier 구성 파일을 만듭니다.

echo {}> .prettierrc.json

available options here.을 사용하여 원하는 대로 구성할 수 있습니다.

Prettier와 ESLint 통합

Prettier를 ESLint와 통합하려면 eslint-config-prettier 종속성을 설치해야 합니다.

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

그런 다음 "prettier" 파일에 .eslintrc.*를 추가해야 합니다.

{
  "extends": [
    "eslint:recommended",
+   "prettier"
  ]
}

편집기 통합

VSCode 통합에 대해서만 다루겠지만 두 도구의 편집기 통합에 대해 자세히 알아볼 수 있습니다.

ESLint integrations

Prettier Editor integration

비주얼 스튜디오 코드 확장

ESLint

Prettier - Code formatter

ESLint와 반응 통합

ESLint 구성 스크립트를 따르고 프레임워크로 React를 선택한 경우 이미 설정되어 있습니다.

그러나 new JSX transform from React 17 을 사용하는 경우 다음이 매우 유용합니다.

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
+   "plugin:react/jsx-runtime",
    "prettier"
  ]
}

있으면 좋은 ESLint 플러그인

eslint-plugin-react-hooks

설치,

npm install eslint-plugin-react-hooks --save-dev

구성,

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
+   "plugin:react-hooks/recommended"
    "prettier"
  ]
}

eslint-plugin-jsx-a11y

설치,

npm install eslint-plugin-jsx-a11y --save-dev

구성,

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
+   "plugin:jsx-a11y/recommended"
    "prettier"
  ]
}

결론

그리고 거기 당신은 그것을 가지고 있습니다. 우수하고 깨끗한 ESLint + Prettier 통합!

표지 이미지: [James Harrison]( https://unsplash.com/photos/vpOeXr5wmR4 )