Web

[vscode] 저장시 자동정렬 설정, prettier플러그인

jinsiri 2020. 7. 11. 11:50

1. vscode 작성중 자동 저장이 되게 하려면 prettier라는 플러그인을 설치해야 한다.

2. 플러그인 설치 후 해당프로젝트에 .prettierrc이라는 파일을 만들어 준다.

3. 파일안에 아래와 같은 내용을 채워준다.

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

4. ctrl + , 단축키로 설정에 들어간다.

화면에서 오른쪽 상단 두번째 아이콘을 클릭한다.(삼각형 옆 아이콘)

5. 코드를 붙여놓는다.

여기서 editor.으로 된것과 prettier.으로 된것을 참고하면 될것같다.

{
    "git.autofetch": true,
    "explorer.confirmDelete": false,
    "editor.formatOnSave": true,
    "prettier.javascriptEnable": ["javascript", "javascriptreact"],
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "window.zoomLevel": 1,
    "prettier.tabWidth": 4,
    "prettier.endOfLine": "auto"
}

 

난 .prettierrc파일을 만들지 않고 내내 설정부분만 고치니 적용이 안됬었다 ㅠㅠ

.prettierrc파일만드니 바로 적용이 되었다.

 

이상 코드 저장시 자동 줄정렬 설정 설명을 마치겠다.

 

도움이 되었다면 블로그 애드센스 광고라도 한번 클릭... 해달라ㅋㅋ

반응형