vscode prettier 설정하기

prettier는 여러 사람이 함께 코드를 작성할 때, 코드의 띄어쓰기, 개행 또 뭐,...  컨벤션이나 format을 자동으로 맞추기 위해서 사용하는 에디터 확장 플러그인입니다.

 

이번에는 ESLint와 Prettier를 함께 사용하기 위한 설정도 포함되어 있으니 쭉 따라가시면, ESLint+Prettier설정을 모두 마치실 수 있을 겁니다.

일단, VSCode에 eslint에 대한 아무런 설치나 설정이 안되어 있다면, 다음 링크를 참고하시고, 글을 읽으시길 바랍니다.

ESLint 설정하기

 

VSCode에서 prettier plugin을 설치해야 합니다.

설치가 끝난 후에는 약간의 설정을 해주어야 합니다.

 

이제, ESLint와 함께 사용하기 위해서 vue-cli로 생성한 프로젝트 폴더에서 .eslintrc.js폴더에 다음 설정 코드를 추가해 줍니다.

module.exports = {
  ...
  rules : {
   "prettier/prettier": [
     'error',
      {
		singleQuote: true, //"가 아닌, '
		semi: true, // ;가 무조건 포함되어 있어야 함.
		useTabs: true,  //tab을 사용
		tabWidth: 2,  // tab 간격은 2
        
        ...
      }
    ]
    ...
  },
  ...
}

다음 코드를 입력하고 저장해서, npm run serve 명령어를 실행하고, App.vue를 열어보면 아래처럼, 코드에 온갖 빨간줄이 쳐쳐 있는 것을 확인할 수 있습니다. 이 빨간줄은 prettier설정에 맞게 작성되지 않아서 발생한 줄입니다.

 

이를 없애기 위한 설정은 저장으로 바로 prettier형식에 맞게 자동으로 코드를 변환하는 설정을 하겠습니다.

1. 맥 기준으로 command + , 를 누릅니다.

2. eslint를 검색합니다.

3. 빨간색으로 표시한 버튼을 클릭합니다.

4. settings.json 파일이 열릴겁니다. 거기에 아래 코드를 추가하고 저장합니다.

{
  //...
  
  "editor.codeActionsOnSave": {
  },
  "eslint.workingDirectories" : [
  	{"mode": "auto"}
  ],
  "eslint.validate": [
    {
    	"language": "vue",
        "autoFix": true
    },
    {
    	"language": "Javascript",
        "autoFix": true
    },
    //...
  ]
  //...
}

5. app.vue를 다시 저장해봅니다.

저장을 해보니, 아래 그림처럼 빨간 줄이 모두 사라지고 prettier룰에 맞게 코드 형식이 자동으로 정렬된 것을 확인할 수 있었습니다.

 

 

도움이 되셨다면, 댓글 부탁드립니다.