문제

vue로 tsx파일을 생성해서 코딩하고 있는데, prettier가 동작하지 않음을 발견했다.
한번 익숙해진 이후로 prettier를 포기못하기에,, tsx에서도 동작하게 하는 방법을 찾아보았다.

해결

vscode의 세팅 파일 settings.json에서 아래와 같은 설정을 추가해주면 간단하게 해결된다.

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

추가로,,,

나는 아래와 같이 eslint를 설정해 두었다.

// .eslintrc.js
module.exports = {
  env: {
    node: true,
  },
  extends: [
    'eslint:recommended',
    '@vue/typescript/recommended',
    'plugin:vue/vue3-recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },

  rules: {
    semi: ['error', 'never'],
  },
}