코드 정렬...

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

공통 컴포넌트 분리 (based on Vue.js 3 spec)

24.08.22 16:31 작성

환경설정..확장팩은 잘 설치 해서 사용하고 있는데요...

코딩님..강의를 보다보면...

함수를 정의한후... 바로 ... 아규먼트들이 바로 개행이 되는 데..

[before]

<button type="button" class = "블라블라" @Click="함수" >
하시면 바로

[After]

<button

type="button"

class- "btn button ..블래블라"

@Click = "함수"

로 개행되는것을 볼수 있는데요...

설치된 확장팩 중에 따로 설치 or 설정을 해야 하는지...

제가 단축키를 못찾고 있는지..

(일반적인 소스(format) 정렬.. .. 기능 말고요...)

쾌변 부탁드려요..코딩님.. ^^;;

주야장천.. 함수정의하고 아큐먼트..엔터질 ..지겼습니다요..

vue.js

답변 4

bluescreen

질문자

2024. 08. 25. 17:58

아~~ 강의 교안 받아서 안에 있는 source 내용을 복사 사용을 하고 있었거든요...

교안 사이트에 있는 내용 카피에서 진행 하겠습니다.

bluescreen

질문자

2024. 08. 25. 14:02

Prettier, ESLint ... 알려주시는 데로 했다고 생걱 했는데..

누락이 된거 같네요..

확인 해 보겠습니다..... 아 놔....

감사합니다.. ^^

짐코딩

지식공유자

2024. 08. 25. 10:53

https://www.inflearn.com/course/lecture?courseSlug=vue-%EC%99%84%EB%B2%BD-%EC%8B%A4%EC%A0%84&unitId=115346&tab=curriculum

해당 회차를 보면 Prettier, ESLint 설정을 하는 것을 확인할 수 있어요~!

인프런 AI 인턴

2024. 08. 24. 16:35

안녕하세요, 인프런 AI 인턴입니다.

코딩님의 문제는 주로 코드 포매팅과 관련이 있는 것 같습니다. 강의에서 보신 것처럼 태그들이 자동으로 개행되어 정렬되는 기능은 IDE나 코드 에디터에서 제공하는 코드 포매팅 기능을 통해 이루어집니다. Vue.js 개발에 널리 사용되는 Visual Studio Code (VS Code)를 예로 들면, 여러 가지 확장 팩을 통해 이러한 코드 포매팅 기능을 사용할 수 있습니다.

Prettier: 가장 널리 사용되는 코드 포맷터 중 하나로, settings.json 파일에 적절한 설정을 추가하여 사용할 수 있습니다. 예를 들어, Vue 파일 내에서 HTML을 포맷팅하기 위한 설정을 추가할 수 있습니다.
Vetur: Vue.js 개발을 위해 만들어진 VS Code 전용 확장 팩으로, Vue 프로젝트에 최적화된 Syntex-Highlighting, Snippets, Emmet 등의 기능을 제공합니다. 이 확장 팩 또한 포맷팅 기능을 가지고 있습니다.

사용하고 계신 코드 에디터의 설정이나 확장 팩 관리 섹션에서 해당 기능을 찾아보시고, 필요한 확장 팩을 설치하거나 기존에 설치된 확장 팩의 설정을 조정해 보시기 바랍니다. 대부분의 경우, 확장 팩의 설명란에 구체적인 설정 방법이나 단축키가 명시되어 있으니 참고하시면 도움이 될 것입니다.

VS Code나 다른 에디터를 사용하실 경우, 해당 에디터의 공식 문서나 커뮤니티에서도 유용한 정보를 얻을 수 있습니다.

답변이 도움이 되었기를 바랍니다. 추가적인 질문이 있으시면 언제든지 문의해 주세요!

인프런 커뮤니티 질문&답변

코드 정렬...