Vue.js는 많은 개발자들이 선호하는 프런트엔드 프레임워크 중 하나입니다. Vue 프로젝트에서 코드 스타일을 일관되게 유지하기 위해 Prettier를 적용하는 것은 매우 유용합니다.

이 블로그에서는 Vue 프로젝트에서 Prettier를 설정하고 적용하는 방법을 알아보겠습니다.

Prettier란 무엇인가요?

Prettier는 코드 포맷터로, 코드를 일관된 형식으로 자동으로 정리해 줍니다. 들여쓰기, 따옴표 스타일, 세미콜론 등을 일관된 형식으로 맞춰줌으로써 코드의 가독성을 높이고, 일관된 코드 스타일을 유지할 수 있게 도와줍니다. 이를 통해 개발자는 코드 스타일에 대해 걱정하지 않고 개발할 수 있게 됩니다.

Vue 프로젝트에 Prettier 설정하기

먼저, 프로젝트 루트 디렉토리에 .prettierrc 파일을 생성합니다. 이 파일에는 Prettier의 설정을 작성할 것입니다.

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "printWidth": 100
}

이제, Vue CLI를 이용하여 Vue 프로젝트를 생성하고 Prettier를 설치합니다.

vue create my-vue-app
cd my-vue-app
npm install --save-dev prettier

다음으로, Vue CLI에 Prettier를 적용하기 위해 .eslintrc.js 파일을 열고 다음과 같이 설정합니다.

module.exports = {
  // ...
  rules: {
    'prettier/prettier': 'error'
  },
  plugins: [
    // ...
    'prettier'
  ],
};

Vue 프로젝트에 Prettier 적용하기

Prettier를 적용하려면 package.json 파일의 scripts 부분에 다음과 같이 추가합니다.

"scripts": {
  "format": "prettier --write 'src/**/*.vue'"
}

이제, Prettier를 적용하고자 하는 Vue 파일들을 다음과 같이 수정합니다.

<template>
  <div>
    <h1>Hello, Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};
</script>

위 코드에 Prettier를 적용하려면 터미널에서 다음 명령어를 실행합니다.

npm run format

마치며

이제 Vue 프로젝트에 Prettier를 적용하는 방법을 알아보았습니다. Prettier를 사용하면 코드의 가독성을 높일 수 있고, 일관된 코드 스타일을 유지할 수 있게 됩니다.

Prettier를 사용하면 코드 포맷팅에 대한 고민을 덜 수 있고, 코드 작성에 집중할 수 있게 됩니다.

더 나은 코드 포맷팅 경험을 위해 Vue 프로젝트에 Prettier를 적용해 보세요!