inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 끝장내기 - 실무에 필요한 모든 것

editor.formatOnSave: false/true 관련

729

WS IM

작성한 질문수 9

1

안녕하세요

개인적으로 진행하는 프로젝트에서는 editor.formatOnSave: true로 해야지 저장시 코드 포맷이 설정되는데

강의에서는 false로 해야지 저장시 코드 포맷이 설정되네요. 이 차이를 알 수 있을까요?

개인 프로젝트할 때와 강의에서 진행하는 프로젝트를 할 때마다 editor.formatOnSave 설정을 false/true 바꿔줘야 하니 조금 번거로운 느낌이 듭니다.

{
  "workbench.editorAssociations": [
    {
      "viewType": "jupyter.notebook.ipynb",
      "filenamePattern": "*.ipynb"
    }
  ],
  //   "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
  "terminal.integrated.shellArgs.windows": ["--login"],
  "workbench.colorTheme": "Night Owl",
  "[yaml]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.autoIndent": "advanced"
  },
  "[javascript]": {
    "editor.tabSize": 2,
  },
  "[html]": {
    "editor.tabSize": 2
  },
  "prettier.printWidth": 200,
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.formatOnPaste": true,
  // "editor.formatOnSave": true,  이 부분이 "true"로 되어 있어야 개인 프로젝트에서는 저장시 포맷팅 설정이 되고,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "C_Cpp.updateChannel": "Insiders",

  
  // don't format on save
  "editor.formatOnSave": false, // 이 부분이 "false"로 되어 있어야 강의에서 진행하는 프로젝트에서 저장시 포맷팅 설정이 됩니다.
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "eslint.validate": ["vue", "javascript", "javascriptreact", "typescript", "typescriptreact"],
  "eslint.alwaysShowStatus": true
}

vuex vuejs javascript

답변 1

1

캡틴판교

안녕하세요 ws im님, 좋은 질문 주셨네요 :) formatOnSave 속성은 VSCode의 포매터 플러그인(prettier, beautify 등)을 활용해서 코드를 정리하도록 설정해 줍니다. 강의에서는 ESLint 플러그인에 Prettier 옵션들을 추가하여 정리하기 때문에 formatOnSave를 꺼주셔야 합니다.

개인 프로젝트에 ESLint를 사용하지 않고 계신다면 타이핑 속도 향상과 반복적인 키 입력을 줄이기 위해 ESLint 라이브러리를 추가하는 것을 추천드립니다. ESLint 환경 구성이 번거로우시면 VSCode의 포매터 플러그인에서 해당 작업 영역에서 비활성화 등을 활용해 보세요 :)

0

WS IM

저 지금까지 완전히 잘못 알고 있었던 것 같습니다. 지금껏 ESLint 플러그인이 코드를 자동으로 수정해주는 줄 알았는데 제 개인 프로젝트에서는 설치해뒀던 vscode의 prettier 플러그인이 그 역할을 하고 있었던 거군요! 지금까지 해왔던 프로젝트에서 항상 ESLint + Prettier 플러그인을 기본으로 설치하고 시작해서 ESLint 플러그인의 역할 자체가 코드포맷팅을 수정해주는 것으로 오해하고 있었습니다.

제가 이해한 게 맞을지 다시 한 번 확인 질문 드리고 싶습니다. 지금까지 제 개인 프로젝트에서 자동 수정이 됐던 것은 vscode에서 설치했던 prettier의 formatOnSave 설정을 true로 해줬기 때문이고, 강의에서 formatOnSave를 false로 했을 때 코드포맷팅 자동 수정이 됐던 이유는 처음 vue프로젝트를 create할 때 ESLint + Prettier를 사용한다고 선택하면서 생긴 `.eslintrc.js` 파일에 있는 `rules`라는 객체의 `prettier/prettier` 키에 개인 코드포맷팅 설정을 담았기 때문이라고 이해하면 맞게 이해한 것일까요??

추가로 질문 드리고 싶은 것은 답변해주신 내용에 있습니다. ESLint를 사용함으로써 타이핑 속도 향상과 반복적인 키 입력을 줄이기 위해 ESLint 라이브러리를 추가하는 것을 추천한다고 해주셨는데, ESLint의 역할이 코드 자동 완성 같은 Snippet도 제공한다는 것인가요?

node 10버전 사용

0

86

1

강의에 대해 질문 드립니다.

0

76

1

vue CLI 대신 vite를 사용해도

1

164

2

질문삭제

0

171

2

강사님 코드로 진행할 경우 console.log( config); 도 안찍혔어요. instance 를 생성해서 공통으로 사용하셨는데 loginUser 에만 커스텀한 instance를 넣으니 콘솔에 컨피그 객체가 찍혀요

0

102

1

로그인 에러발생만하면 네트워크 커넥션 에러 발생 해결

0

128

1

rndrmagkqslek.

0

79

1

계속 따라하다가 안돼서 bash에 연결할떄 안되더라구요

0

110

1

axios 에러가 뜹니다.

1

249

2

vue3로 진행하시면서 router에서 '*' 적용이 안되시는 분들

2

322

1

vue 관련 다른 강의 출시예정이없으신지 궁금합니다!

1

158

1

AppHeader.vue에 vue 디폴트 만들에 Delete `␍` 오류나면

1

200

1

vue3로 따라오시다가 import axios 에러 뜨시는 분들

2

463

2

$router 를 이용한 메인 페이지로 이동

1

294

1

혹시 node.js 10.24 버전으로 해도 상관없나요?

2

475

2

에러 경로가 LoginForm.vue 43번째줄 말고 다른 경로로 출력됩니다.

1

303

2

pinia 사용할려고 하는데 에러가 나옵니다.

1

496

2

swagger ui의 post/posts에 글 기록하려고 하면 unauthorized 에러가 납니다..

1

1119

2

safari 개발자 도구에 대한 질문입니다

1

579

2

스웨거에 글 등록시 401 에러가 나와요 ㅠ

1

733

2

이 에러 때문에 진행이 안되네요 ㅠ

1

678

1

windows .nvmrc nvm use 실행 오류

1

1559

2

강사님 최신화가 필요해보입니다.

2

965

2

npm i 에러

1

621

1