리액트 개발 시 사용하면 편리한 도구

Prettier

: 자동으로 코드의 스타일을 관리해주는 도구

→ 문자열을 사용할 때, ‘와 “ 중 무엇을 사용할지, 세미콜론(;)을 코드 뒤에 붙일지 말지, 들여쓰기 정도 등을 관리

• 코드 스타일을 마음대로 쉽게 커스터마이징 가능

[사용법]

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

• trailingComma: “none”, “es5”, “all”으로 설정 가능, 객체 또는 배열이 여러 줄로 구성되어 있으면 맨 마지막 줄에 쉼표 붙여줌
  • “none”: 쉼표 붙이지 않음
  • “es5”: 객체, 배열 사용하게 될 때 쉼표 붙임
  • “all”: 함수 사용할 때, 인자를 전달 할 때 쉼표 붙임
• tabWidth: 들여쓰기 크기 정함(2칸 선호)
• semi: 세미콜론 쓸지 말지 정함(사용하는 거 선호)
• singleQuote: 문자열 입력할 때 “를 쓸지 ‘를 쓸지 정함(’를 선호) → “ 사용하고 싶으면 false로 설정

ESLint

: 자바스크립트의 문법을 확인해주는 도구

ESLint의 다양한 규칙

→ 까다로운 규칙들이 많음

• eslint-config-airbnb
  • eslint-config-prettier를 적용해야 Prettier에서 관리하는 스타일이 ESLint에서 비활성화됨
• eslint-config-google
• eslint-config-standard

Snippet

: 자주 사용되는 코드에 대하여 단축어를 만들어서 코드를 빠르게 생성해내는 것 → 도구라기보단, 에디터마다 내장되어있는 기능

https://snippet-generator.app

snippet generator