prettier 설치

prettier 설치

npm install --save-dev prettier

을 입력하면, package.json에 devDependencies가 추가된다.

{
  "scripts": {
    "test": "echo \"Hello, world!\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^3.0.1"
  }
}

devDependencies는 의존성을 나열하는 것과 비슷하기에, 중요하다.
node_modules 폴더와 package-lock.json 파일도 작성되는데 현재 프로젝트에서 의존하는 것이라 생각하면 된다.
먼저 package-lock.json 파일은 다음과 같다.

{ 
  "name": "nodejs",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "devDependencies": {
        "prettier": "^3.0.1"
      }
    },
    "node_modules/prettier": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
      "integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
      "dev": true,
      "bin": {
        "prettier": "bin/prettier.cjs"
      },
      "engines": {
        "node": ">=14"
      },
      "funding": {
        "url": "https://github.com/prettier/prettier?sponsor=1"
      }
    }
  }
}

prettier 설정

prettier을 사용하기 위해서는 .prettierrc라는 파일이 필요하다.

{
  "semi" : false, // 세미콜론 여부
  "singleQuote": true // 문자열을 사용할 때, ''를 쓸것인지 여부
}

vscode에서 prettier를 사용하기 위해서는 . vscode라는 폴더를 만든 뒤, settings.json을 만든 뒤, 아래의 코드를 입력한다.

{
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

이렇게 하면, 저장될 때 자동으로 prettier가 작동되는 걸 알 수 있다.