• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

editor.formatOnSave: false/true 관련

21.05.25 18:34 작성 조회수 485

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
}

답변 1

답변을 작성해보세요.

1

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

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

WS IM님의 프로필

WS IM

질문자

2021.05.25

저 지금까지 완전히 잘못 알고 있었던 것 같습니다. 지금껏 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도 제공한다는 것인가요?