웹마스터 팁

[Source] : https://github.com/prettier/plugin-php

 

일단 Prettier가 뭔지 먼저 설명드리면,

내가 작성한 코드를, 흔히 쓰이는 포맷 또는 미리 설정한 일정한 기준에 따라 자동으로 변환시켜주는 포매터입니다.

에디터의 확장도구를 통한다면 저장 (ctrl + s) 할 때마다 적용시킬 수 있습니다.

자바스크립트에서는 거의 필수적으로 쓰는 툴인데, PHP는 플러그인으로 따로 추가되었었네요. 

 

제가 사용하는 에디터가 VSCODE 기 때문에 VSCODE 기준으로 적용 방법 알려드릴게요.

(위에 링크로 들어가보시면 ATOM이나 SUBLIME같은 에디터에 적용하는 방법도 안내되어 있습니다.)

 

1. 확장도구 prettier를 설치합니다.

 

2. 추가 플러그인을 설치해야합니다.

VSCODE에서는 플러그인을 공식지원하지 않기 때문에, 수동으로 설치해야됩니다.

사전에 nodejs 와 npm 이 깔려있어야 합니다. (개발자분들에게 전하는 팁이므로 자세한 설명은 생략합니다)

터미널을 여셔서

cd ~/.vscode-insiders/extensions/esbenp.prettier-vscode-1.9.0/

치신 후, (안되시면 vscode-insiders 를 vscode 로 바꿔보세요)

npm install @prettier/plugin-php

 를 치면 자동으로 설치가 됩니다. vscode 는 재시작해주세요 (ctrl + alt + r)

 

3. vscode 설정에 다음을 추가합니다. (vscode 내에서 ctrl + , )

{
  "[php]": {
    "editor.formatOnSave": true
  },
  "prettier.printWidth": 100, // 한 행 당 최대 글자 수
  "prettier.singleQuote": true, // 작은 따옴표 ('') 사용 여부, false 시 큰 따옴표 ("")
  "prettier.useTabs": false, // 여백을 tab으로 쓸지 여부, false 시 space 사용
  "prettier.tabWidth": 4, // 여백 칸수 (스페이스 n번만큼의 크기)
  
}

 

4. 작업하던 파일에서 저장해봅시다. (ctrl + s)

제목 글쓴이 날짜
ZB게시판에 구글광고 달수 없나요? [2] 손주사랑 2019.11.23
날씨배너 600종류 입니다.(지역별75종X색상별8종) file 푸른커튼 2008.01.30
대부분 쉬운설치로 인해 홈페이지 빈 페이지가 뜨는 에러는.. CJM 2019.10.24
코드 이미지 생성해주는 사이트 file reactux 2019.10.06
xe 기본회원가입품 연락처항목 공백&숫자 유효성검사 질문입니다. 해운거사2 2019.08.25
[주옥시리즈] 내글 모니터링, 작성글 앞으로 뺴기 [6] socialskyo 2013.10.18
회원가입품 연락처항목 공백잇을시 질문입니다. 해운거사2 2019.08.16
관리자 아이디/비번을 잃어버렸을때, 관리자페이지 접속을 못할 때 TIP file 플레이웹 2019.08.13
VSCODE에서 PRETTIER-PHP 사용하기 (중급자용) reactux 2019.07.29
게시판 글 엑셀로 출력하기(확장변수 포함) [14] 한이73 2014.07.17
관리자페이지의 회원목록에서 타회원들의 비밀번호 찾기 질문/답변 수정 가능하도록 하려면.. sejin7940 2019.07.03
XE 코어의 메일전송을 우리알림 모듈로 대체하는 방법 [30] file GG 2014.11.24
XE 1.5.1로 사이트 꾸미기 Part 2 [11] file 황비 2011.12.06
스케치북5 게시판 사용자정의에 색상 적용하기 file 아데나 2019.05.31
로그인 실패시 실패내역 쪽지와 메일 발송 되는걸 발송 안 되게 하려면.. sejin7940 2019.05.21
스크랩버튼 외부로 빼내기 [3] RainDrop+ 2011.01.04
1.11.3 업로드 패치 이후 업로드 오류 관련 우소푸 2019.04.21
게시판 목록에서 바로 첨부파일 다운로드하기 [6] file 요다빈치 2012.03.13
XE이전 작업순서 elancer 2019.03.28
무료이미지 다운 받을 수 있는 곳 elancer 2019.03.19