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
이외에도 많지만 차근차근 적는걸로!!!