react

vscode 라이브러리

deadeye 2023. 3. 24. 09:47

Prettier

// .prettierrc 생성

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}
  • trailingComma: "none", "es5", "all" 으로 설정을 할 수 있는데, 객체 또는 배열이 여러줄로 구성되어 있으면 다음과 같이 맨 마지막 줄에 쉼표를 붙여줍니다.
  • tabWidth: 들여쓰기의 크기를 정합니다. 저는 보통 2칸 쓰는데 회사 정한거에 따르거나 선호하는 걸로 ㄲ
  • semi: 세미콜론 (;) 을 쓸지 말지 정합니다. 저는 개인적으로 사용하는것을 선호합니다. 사용하고 싶다면 true 로 설정하세요.
  • singleQuote: 문자열을 입력 할 때 " 를 쓸지 ' 를 쓸지 정합니다. 저는 ' 를 사용하는것을 선호합니다. 만약에 " 만 쓰고 싶다면 false 로 설정하세요.

Prettier 자동 설정 해주는 게있는데 mac은 cmd shift p , window는 ctrl shift p를 누른후 open (USER) settings(JSON)을 클릭하고

해당 파일에 다음과 같이 추가한다.

 

{
  ...
  "editor.formatOnSave": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

그러고 저장해보면 아까 수정한대로 바뀐당

** vue있는이유는 전에 vue를 해서 그럼 ㅇㅅㅇ

 

ESLint

Snippet

 

이외에도 많지만 차근차근 적는걸로!!!