Prettier 세팅하기 + VS code 스니펫 설정하기

Prettier

Prettier는 VS code 에서 사용자가 사전에 지정한 방식으로 코드를 정렬해주는 익스텐션이다. Prettier이 링크를 참조하면 설정할 수 있는 옵션과 그에 대한 설명이 있다.

루트 폴더에 .prettierrc 파일을 생성하여 추가

파일 생성 후 원하는 옵션을 설정할 수 있다.

{
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": false,
"printWidth": 160,
"tabWidth": 2,
"semi": true,
"arrowParens": "avoid",
"endOfLine": "lf"
}

Settings.json에 바로 추가하기

VS code 에서 f1키를 누르고 Settings.json 에 들어가 아래와 같이 코드를 추가한다.

"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"prettier.bracketSpacing": false,
"prettier.printWidth": 160,
"prettier.tabWidth": 2,
"prettier.semi": true,
"prettier.arrowParens": "avoid",
"prettier.endOfLine": "lf"

Default formatter 설정하기

File > Preferences > Settings 경로로 들어가, Default formatter를 검색한다.

Default Formatter를 Prettier 로 변경해준 뒤 사용하면 된다.

+

VS code 스니펫 설정하기

console.log와 같이 자주 쓸 일이 있는 코드는 스니펫을 설정할 수 있다.

File > Preferences > Configure User Snippets

그 다음 'New Global Snipets file을 클릭해 새 파일을 만들어준다. 파일 이름은 상관없다.

파일이 생성되면 주석의 내용 중 //Example 부분이 있는데, 주석처리를 해제하고 아래 예시처럼 수정하여 스니펫을 만들 수 있다.

"Print to console": {
    "scope": "javascript,typescript",
    "prefix": "cl",
    "body": ["console.log();"],
    "description": "Log output to console"
  }

prefix 부분에 스니펫 키워드를 입력하고, body 부분에 내용을 입력해준다.

이렇게 설정하면 코드 에디터 내에서 cl 만 입력하여 console.log();를 불러올 수 있다.

 

+ Prettier 외에도 indent-rainbow, WakaTime, Live Server, Live Share, Material Icon Theme, Code runner 등을 사용하고 있다.