Setting up Prettier and VS Code

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 

Prettier - Code formatter - Visual Studio Marketplace

 

Settings - default formatter 검색 - esbenp.prettier-vscode

format on save - tick the box

 

prettier을 쓰는 이유?

코드를 이쁘장하게 정리해줌

e.g. blank line 정리, 자동으로 quote 통일 (single or double)

 

변경 1) single quote로 통일

어떻게 해야함? configure file 만들기!

 

https://prettier.io/docs/en/options.html#quotes

Prettier · Opinionated Code Formatter

// .prettierrc file created
{
  "singleQuote": true,
}

singleQuote를 true 값으로 적용하면 코드에 double quote 있어도 save하면 자동으로 single quote로 바뀜

 

변경 2) single parameter에 적용되는 parentheses 괄호 제거

const calcAge = (birthYear) => 2037 - birthYear;

birthYear에 괄호 없이 표시하고 싶다?

{
  "arrowParens": "avoid"
}

https://prettier.io/docs/en/options.html#arrow-function-parentheses

Prettier · Opinionated Code Formatter

 

Create New Global Snippets files

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

script.js -> cl 쓰고 엔터치면 자동으로 console.log(); 입력됨

no need to manually type console.log

 

settings.json

색깔 지정해주면 BUG, FIXME 형광펜 칠한거 같이 색칠 표시돼서 코드에서 눈에 잘 들어옴 :)

        "todohighlight.isEnable": true,
        "todohighlight.isCaseSensitive": true,
        "todohighlight.keywords": [
            {
                "text": "VIDEO",
                "color": "#333",
                "backgroundColor": "#3498db",
            },
            {
                "text": "FIXME",
                "color": "#333",
                "backgroundColor": "#e67e22",
            },
            {
                "text": "LEC",
                "color": "#333",
                "backgroundColor": "#f1c40f",
            },
            {
                "text": "BUG",
                "color": "#333",
                "backgroundColor": "#e74c3c",
            },
            {
                "text": "TODO",
                "color": "#333",
                "backgroundColor": "#2ecc71",
            }
        ]