React 프로젝트의 Eslint 및 Prettier 구성

웹 애플리케이션을 구축할 때 Linting 도구를 사용하면 웹 개발 프로세스에서 중요한 역할을 할 수 있습니다. 모든 개발자가 애플리케이션에서 linting 프로세스를 설치하고 구성하는 방법을 알아야 한다고 생각합니다. 그래서 오늘은 linting 구성에 대해 논의하고 최상의 코드 표준이 우리 프로젝트에 적용되도록 효율적으로 확인하겠습니다.

01단계: 개발 종속성으로 프로젝트에 패키지eslint를 설치합니다.

yarn add eslint --dev

02단계: Eslint를 초기화해야 합니다. .eslintrc.json 파일이 생성됩니다.

yarn run eslint --init

03단계: Eslint 규칙이 .eslintrc.json 파일에서 업데이트되었습니다.

"rules": {
  "react/react-in-jsx-scope": "off",
  "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
  "prettier/prettier": ["error", { "singleQuote": true }],
  "no-console": "warn"
}

04단계: 필수 플러그인을 설치해야 합니다.

yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev

05단계: .eslintrc.json 파일에서 확장 어레이 업데이트,

"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"];

06단계: 새.prettierrc 파일 생성, 다음 코드 붙여넣기,

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}

07단계: package.json 파일을 다음 코드로 업데이트합니다.

"lint": "eslint .",
"lint:fix": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"

스크립트yarn format를 실행하면 모든 JavaScript 파일의 코드 스타일 형식이 지정됩니다. ESLint 와 마찬가지로 Prettier 파일이 저장될 때 파일에서 실행되도록 하는 놀라운 코드 편집기 확장 기능이 있어 스크립트를 수동으로 실행할 필요 없이 즉석에서 형식을 지정할 수 있습니다!

참고: 이 프로세스에서는 yarn 패키지를 사용했습니다. npm에 익숙하다면 npm 패키지를 사용할 수 있습니다.

시간은 빠른 속도의 환경에서 모든 것이므로 개발자가 코드에서 오류를 찾는 것보다 더 효율적으로 새로운 기능을 개발하는 데 더 많은 시간을 할애할 수 있도록 도구를 잘 설정하는 것이 중요합니다.

고맙습니다 !