[vue.js+prettier]prettier적용

VS Code에서 Vue.js 프로젝트에 Prettier를 설정하려면 다음 단계를 따라하세요:

### 1. Prettier 설치
먼저, Prettier를 프로젝트에 설치해야 합니다.

터미널에서 다음 명령어를 실행하여 Prettier를 설치합니다:

```bash
npm install --save-dev prettier
```

또는 yarn을 사용하는 경우:

```bash
yarn add --dev prettier
```

### 2. Prettier 설정 파일 생성
프로젝트 루트 디렉토리에 `.prettierrc` 파일을 생성하고, Prettier의 설정을 정의합니다. 예를 들어, 다음과 같이 설정할 수 있습니다:

```json
{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "printWidth": 80
}
```

 

참고 : https://alswo471.tistory.com/entry/Vuejs-%EA%B0%80%EC%9E%A5-%EB%A7%8E%EC%9D%B4-%EC%82%AC%EC%9A%A9%EB%90%98%EB%8A%94-Prettier-%EC%84%A4%EC%A0%95

### 3. .prettierignore 파일 생성 (선택 사항)
`.prettierignore` 파일을 프로젝트 루트에 생성하여, Prettier의 포맷팅에서 제외할 파일이나 디렉토리를 지정할 수 있습니다. 예를 들어:

```
node_modules/
dist/
```

### 4. VS Code에서 Prettier 확장 설치
VS Code에서 Prettier 확장을 설치합니다.

1. VS Code의 사이드바에서 `Extensions` 아이콘을 클릭합니다.
2. `Prettier - Code formatter`를 검색하여 설치합니다.

### 5. VS Code 설정에서 Prettier를 기본 포맷터로 설정
Prettier를 VS Code에서 기본 포맷터로 사용하려면 다음 단계를 따릅니다:

1. VS Code의 사이드바에서 `Settings` (톱니바퀴 아이콘)를 클릭한 후 `Settings`를 선택합니다.
2. 검색창에 "default formatter"를 입력한 후, `Editor: Default Formatter`를 `Prettier`로 설정합니다.

3. "format on save" 옵션을 활성화하여 파일을 저장할 때 자동으로 Prettier가 포맷팅을 수행하도록 합니다. `Editor: Format On Save` 옵션을 켜면 됩니다.

### 6. Prettier와 ESLint 통합 (선택 사항)
Vue.js 프로젝트에서 ESLint를 사용하고 있다면, Prettier와의 통합을 설정할 수 있습니다.

1. `eslint-config-prettier` 및 `eslint-plugin-prettier`를 설치합니다:

```bash
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
```

2. `.eslintrc.js` 파일을 열고, 다음과 같이 설정을 추가합니다:

```javascript
module.exports = {
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'prettier'
  ],
  plugins: [
    'prettier'
  ],
  rules: {
    'prettier/prettier': ['error', {
      singleQuote: true,
      semi: true
    }]
  }
}
```

이 설정은 Prettier가 ESLint와 충돌하지 않도록 하며, ESLint 규칙에 Prettier를 포함시킵니다.

### 7. Prettier 테스트
설정이 완료되었으면, 코드 파일을 열고 저장하여 Prettier가 제대로 작동하는지 확인하세요. 코드가 자동으로 포맷팅되면 설정이 성공한 것입니다.

이렇게 하면 Vue.js 프로젝트에서 Prettier를 효과적으로 사용할 수 있습니다.

---

VS Code에서 Prettier 확장을 설치하면 기본적으로 코드 포맷팅 기능을 사용할 수 있지만, 프로젝트 단위로 Prettier를 설정하고 사용하기 위해서는 프로젝트 내에 Prettier를 설치하는 것이 좋습니다. 그 이유는 다음과 같습니다:

### 1. 프로젝트마다 다른 설정 적용 가능
프로젝트 내에 Prettier를 설치하면 프로젝트마다 각기 다른 Prettier 설정을 사용할 수 있습니다. 예를 들어, 한 프로젝트에서는 탭 대신 스페이스를 사용하고, 다른 프로젝트에서는 탭을 사용할 수 있습니다. 이렇게 프로젝트에 따라 다른 규칙을 적용할 수 있습니다.

### 2. 버전 관리
프로젝트에 Prettier를 설치하면 특정 버전의 Prettier를 사용할 수 있습니다. 이렇게 하면 다른 팀원들과 동일한 버전의 Prettier를 사용하게 되어 코드 스타일의 일관성을 유지할 수 있습니다. VS Code 확장에 의존하면, 팀원들이 서로 다른 버전의 Prettier를 사용하게 될 수 있습니다.

### 3. CI/CD 환경에서 사용
프로젝트에 Prettier를 설치하면 CI/CD 파이프라인에서 Prettier를 사용하여 자동으로 코드 포맷팅을 검토하거나 수정할 수 있습니다. 이는 코드베이스 전체에서 일관성을 유지하는 데 유용합니다.

따라서, VS Code에서 Prettier 확장을 설치하는 것은 개발 환경에서 Prettier를 쉽게 사용할 수 있게 해주지만, 프로젝트 단위로 Prettier를 설치하는 것이 더 나은 방법입니다. 이를 통해 위에 언급한 장점들을 활용할 수 있습니다.