Vue.js/Nuxt.js 프로젝트를 위한 JetBrains IDEs 환경 설정 메모

요즘, Vue.js, Nuxt.js를 접하게 되었습니다~ 이 기사에 신경 쓰이는 부분이 있거나 아시면 편할 것 같으면 꼭 댓글을 남겨주세요!지금까지 평론을 참고해 왔습니다.

전제 조건

Vue/Nuxt 프로젝트를 제작하고 실행할 때 브라우저에서 보이는 상태(이번에는 npx create-nuxt-app <project-name>로 프로젝트를 제작)

JetBrains사의 IDE를 사용하십시오(이번에는 IntelliJ IDEA Ultime Edition 2018.3.4를 통해 확인하였습니다. Ruby Mine과 PhpStorm도 가능할 것 같습니다. 해보신 분들은 알려주세요!)

Vue.js 플러그인 추가

이미지를 추가합니다.다음 섹션에 Pretter를 설치하므로 재부팅하지 않아도 됩니다.

Preettier를 사용하여 Vue 파일 성형

Priettier 성형 핫키 추가(Reformat with Preettier)
이것은 참고로 할 수 있다.
https://www.jetbrains.com/help/idea/prettier.html
간단하게 요약을 하자면...
Proettier 플러그인을 설치하고 다시 시작합니다. ※가능하면 File Watchers를 설치하십시오(후술).

Alt+F12에서 터미널을 열고 다음을 수행합니다.npm install --save-dev --save-exact prettier(yarn이 아닌 npm를 사용하는 경우)
드롭다운 메뉴에서 경로 선택(선택 후보에 자동으로 나타날 것)

성형 기능 추가 완료.이렇게 되면 블루 파일도 무섭지 않게 된다.

ESLight에서 코드 스타일 확인

이것은 참고로 할 수 있다.
https://www.jetbrains.com/help/webstorm/eslint.html
https://www.jetbrains.com/help/idea/eslint.html
간단하게 요약을 하자면...
여느 때와 마찬가지로 아직 설치하지 않았다면 지령을 해야 한다.npm install eslint --save-dev

Alt+Enter 를 사용하여 자동 수정 방법을 선택할 수 있습니다.

파일을 저장할 때 Pretier(2019/12/31 보완) 자동화

Command + S 또는 Ctrl + S에서 Preettier를 자동으로 실행합니다.VS코드는 이 방법을 자주 사용하기 때문에 JetBrains IDE도 같은 방법을 사용해 보세요!

File Watchers 설치

File Watchers 구성

아주 간단합니다.Preference>Tools&File Watchers 선택

클릭+버튼

Pretter 선택

File Type을 JavaScript에서 Vue(.vue)로 변경합니다.

OK 버튼을 사용한 후 설정을 적용하는 것을 잊지 마십시오.
그런 다음 저장된 단축키로 Pretter를 실행하여 파일을 포맷합니다.상술한 단축키보다 이것이 더 간단하다.

기호가 포함된 경로 해결

절차는 여기 참고해주세요.
https://qiita.com/sutoh/items/54e94df1c610c0f18c85
(나는 IDE가 머지않아 대응할 것이라고 생각한다.)

↓ 경로 해결 후 Command+클릭으로 파일로 이동 가능

script/style 들여쓰기 조정

↓ 조절되지 않은 경우 줄 바꿈 시 들여쓰기가 수행됩니다.

↓ 이렇게 설정한다.(프로젝트에 따라 프로필을 재사용할 때 프로필을 IDE 등급으로 변경하면 반복적으로 설정하는 번거로움을 줄일 수 있어 추천)

↓ 설정 후 들여쓰기가 감소됩니다.

HTML의 Inspections 비활성화

ESLight 검사와 충돌하려면 다음 확인란에서 확인란을 선택 취소합니다.
예를 들어 ESLit은 빈 탭<div/>처럼 쓰지 않으면 경고를 보내지만 기본 HTML인 inspections에서는 안 쓰면 경고<div></div>를 보내기 때문에 그 중 하나를 적용해야 한다.취향에 따라 몇 개의 체크 상자에서 선택하거나 남길 수 있습니다.

기타 노트

편집기의 오른쪽 단추 메뉴에서 각각 실행할 수도 있습니다.

세미콜론이 없을 때 경고(Inspections)를 비활성화합니다.