pretty는 .tsx 파일을 포맷하지 않습니다.

pretty는 .tsx 파일을 포맷하지 않습니다.

오랫동안 비주얼 스튜디오 코드 에디터에서 예쁜이 확장자를 사용했는데, 최근에는 타입스크립트로 리액트하고 있습니다.따라서 .tsx 파일을 포맷하기 위해 pretty를 설정해야 합니다.

다음 항목을 사용하여 설정 편집settings.jsonVSCode의

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

iNeelPatel의 답변에 따라 VSCode JSON 설정에 다음 두 줄을 추가해야 했습니다.

"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }

이미 제안된 것을 대체하는 간단한 UI:

1. vscoode 설정에서 "기본 포맷"을 검색합니다.
2. "텍스트 편집기"를 누른 후 기본 포맷터를 "프리티어 - 코드 포맷터"로 설정합니다.
3. 즐거운 시간 되세요.

업데이트 2023

작성하다.vscode폴더는 프로젝트의 루트에 있습니다.에서.vscode폴더, 생성settings.json파일에 다음 섹션을 입력합니다.

{
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

추가되는 것을 잊지 마세요..vscode에서.gitignore파일.

이것은 완벽한 해결책을 줄 것이다.

"방금 저도 같은 일이 있었어요.설정에서 디폴트 포메터로 더 예쁘게 설정했더니 다시 작동하기 시작했어요.디폴트 포메터는 null이었습니다.

https://github.com/microsoft/vscode/issues/108447#issuecomment-706642248

사용방법

내가 이걸 설정하는 방법은 eslint의.eslintrc.json파일입니다. 우선,"extends"어레이, 추가했습니다.

"plugin:@typescript-eslint/recommended"

그리고.

"prettier/@typescript-eslint"

그럼, 난 준비했어"parser"로."prettier/@typescript-eslint"

마지막으로, 인"plugins"추가한 어레이"@typescript-eslint".

NPM 패키지를 몇 개 가져와야 합니다(와 함께 설치).-D옵션:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser

---

참고로 제 전체는.eslintrc.json파일:

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./src/tsconfig.json",
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "jest"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

이게 도움이 됐으면 좋겠다.

"[javascriptreact,typescript,typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

제 쪽에서는 설정 파일에 두 줄을 추가하는 것만으로는 동작하지 않지만,Typescript > Format: Enable옵션이 동작했습니다.

다른 사람에게 도움이 될 수 있습니다. 위의 모든 것이 여전히 효과가 없다면 VSCode를 재시작하거나 명령 팔레트에서 재시작할 수 있습니다.⌘CMD + ⇧Shift + P를 기동해, 「Restart ESLint Server」를 기동합니다.이렇게 하면 :)

언급URL : https://stackoverflow.com/questions/61731587/prettier-doesnt-format-tsx-file