프로젝트 패턴 및 도구 - 더 예쁘다

마지막으로 구성할 도구는 Prettier입니다.

Prettier는 전체 팀에 대해 동일한 표준으로 코드 형식을 만드는 또 다른 도구입니다. 코드를 나머지 코드와 동일하게 만듭니다. Prettier를 사용하여 팀은 공백, 세미콜론, 쉼표 등에 대한 모든 불일치를 건너뛸 수도 있고 그렇지 않을 수도 있습니다. Prettier가 코드 형식을 구성으로 다시 지정하기 때문입니다.

구성을 시작하기 전에 VSCode에서 Prettier - Code Formatter를 제거해야 구성이 호환되지 않을 수 있습니다.

구성 시작

이러한 모든 구성은 NodeJS, ReactJS 및 React Native에서 동일합니다.

아래 명령을 실행하여 Prettier 패키지 설치를 시작합니다.

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

코드 형식을 지정하고 Prettier를 ESLint와 통합하기 위해 세 가지 종속성이 추가됩니다.

그 설치 후에 우리는 "extens"에 아래 줄을 추가하는 .eslintrc.json 파일을 변경해야 합니다:

"prettier/@typescript-eslint",
"plugin:prettier/recommended"

"플러그인"옵션에 "더 예쁜"구성을 추가해야 합니다.

"plugins": [
        "@typescript-eslint",
        "prettier"
    ]

"규칙"의 경우 ESLint가 Prettier가 수정을 이끌 수 없는 모든 오류를 표시할 수 있도록 한 줄을 추가하겠습니다.

"rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ],
        "prettier/prettier": "error"

따라서 최종 파일은 다음과 같아야 합니다.

{
    "env": {
        "es2020": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ],
        "prettier/prettier": "error"
    },
    "settings": {
        "import/resolver": {
          "typescript": {}
        }
      }
}

이러한 모든 구성 후에 ESLint와 Prettier 간에 충돌이 발생할 가능성이 있습니다.

이 충돌을 정렬하기 위해 프로젝트 루트에 "prettier.config.js"라는 파일을 만들고 아래 줄을 추가합니다.

module.export = {
    singleQuote: true,
    trailingComma: 'all',
    arrowParens: 'avoid',
}

결론

수동으로 코드 형식을 지정하여 귀찮게 하지 마십시오. 더 많은 코드를 작성하는 데 시간이 더 많이 걸리고 팀원들과 다를 수 있다는 것을 알고 있습니다.

놀라운 최신 도구를 활용하고 프로젝트에 EditorConfig, ESLint 및 Prettier를 설정하세요!

그게 다야, 여러분!

읽어주셔서 감사합니다. 도움이 되셨길 바랍니다. 질문과 제안을 댓글로 남겨주세요.
안녕 👋! 에 - - Facebook -