All Articles

πŸš€ λ¦¬μ•‘νŠΈμ—μ„œ ESlint + Prettier + Airbnb Style ν•œλ°©μ— μ…‹νŒ…ν•˜κΈ°

Design by @imrahelk


μ•ˆλ…•ν•˜μ„Έμš”. μ•ˆν”Όκ³€μž…λ‹ˆλ‹€.

ν˜‘μ—…μœΌλ‘œ κ°œλ°œν• λ•ŒλŠ” μ½”λ”© μŠ€νƒ€μΌκ³Ό μ½”λ“œ 가독성이 맀우 μ€‘μš”ν•©λ‹ˆλ‹€. 이걸 쒀더 νŽΈν•˜κ²Œ ν•  수 μžˆλŠ” 도ꡬ가 μžˆμ–΄μ„œ μ†Œκ°œν•©λ‹ˆλ‹€. ESLintλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 문법을 κ²€μ‚¬ν•΄μ€λ‹ˆλ‹€. 그리고 PrettierλŠ” μž‘μ„±λœ μ½”λ“œλ₯Ό κ·œμΉ™μ— 따라 이쁘게 μ •λ¦¬ν•΄μ€λ‹ˆλ‹€.

μ œκ°€ 주둜 μ‚¬μš©ν•˜λŠ” VSCode 에디터λ₯Ό κΈ°μ€€μœΌλ‘œ μ„€λͺ…ν•©λ‹ˆλ‹€. λΉ„μŠ·ν•œ λ‹€λ₯Έ 에디터도 μ„€μ • 방식이 λΉ„μŠ·ν•  것이라고 μƒκ°ν•©λ‹ˆλ‹€.


VSCodeλ₯Ό μ‹€ν–‰ν•˜κ³  ESLint와 Prettier μ΅μŠ€ν…μ…˜μ„ μ„€μΉ˜ν•©λ‹ˆλ‹€.


ESLint μ„€μΉ˜ν•˜κΈ°

μ„€μΉ˜λ§ν¬: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Prettier μ„€μΉ˜ν•˜κΈ°

μ„€μΉ˜λ§ν¬: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode



ν”„λ‘œμ νŠΈμ— μ μš©ν•˜κΈ°

λ³΅μž‘ν•œ 섀정은 가라~! 이게 λ°”λ‘œ λ¦¬μ•‘νŠΈμ˜ 맀λ ₯μž…λ‹ˆλ‹€. γ…‹ ESLint와 Prettier의 λ³΅μž‘ν•œ 섀정을 ν•œλ°©μ— ν•  수 μžˆλŠ” 멋진 μ‰˜ μŠ€ν¬λ¦½νŠΈκ°€ μžˆμŠ΅λ‹ˆλ‹€. κ°œλ°œμžλŠ” Paulo Ramosμž…λ‹ˆλ‹€.

좜처: https://github.com/paulolramos/eslint-prettier-airbnb-react


ν”„λ‘œμ νŠΈ 루트 λ””λ ‰ν† λ¦¬μ—μ„œ λ‹€μŒ λͺ…령을 μˆ˜ν–‰ν•©λ‹ˆλ‹€.

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/paulolramos/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

μŠ€ν¬λ¦½νŠΈκ°€ bash μ‰˜μž…λ‹ˆλ‹€. κ·Έλž˜μ„œ μœˆλ„μš°μ—μ„œ μ„€μ •ν•˜κΈ° μœ„ν•΄μ„œλŠ” Ubuntu Appκ°€ ν•„μš”ν•  것이라고 μƒκ°λ©λ‹ˆλ‹€.


μœ„ λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•˜λ©΄ μ•„λž˜μ™€ 같은 화면이 좜λ ₯λ©λ‹ˆλ‹€.

μ €λŠ” νŒ¨ν‚€μ§€ λ§€λ‹ˆμ €λ₯Ό yarn을 μ„ νƒν•˜μ˜€μŠ΅λ‹ˆλ‹€. 그리고 μ„€μ • 파일 νƒ€μž…μ€ .json. ν•œ 라인의 κΈΈμ΄λŠ” 80. ν›„ν–‰ 콀마 μŠ€νƒ€μΌμ€ allλ₯Ό μ„ νƒν•˜μ˜€μŠ΅λ‹ˆλ‹€. 본인의 μ½”λ”© μŠ€νƒ€μΌμ— 맞게 μ„ νƒν•˜μ‹œλ©΄ λ©λ‹ˆλ‹€. Trailing CommaλŠ” 이해λ₯Ό 돕기 μœ„ν•΄ 잘 μ„€λͺ…λ˜μ–΄ μžˆλŠ” λΈ”λ‘œκ·Έλ₯Ό μ†Œκ°œν•©λ‹ˆλ‹€: https://heygyun.tistory.com/49


μ„€μΉ˜κ°€ μ™„λ£Œλ˜λ©΄ .eslintrc.json 와 .prettierrc.json 파일이 μƒμ„±λ©λ‹ˆλ‹€. 그리고 .prettierrc.json νŒŒμΌμ„ 열어보면 λ‹€μŒ λ‚΄μš©μ΄ μž…λ ₯λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "all"
}


μž…λ ₯λ˜μ–΄ μžˆλŠ” λ‚΄μš©μ€ μ‰˜ μŠ€ν¬λ¦½νŠΈμ—μ„œ μš°λ¦¬κ°€ μ„ νƒν•œ μ˜΅μ…˜μž…λ‹ˆλ‹€.

  • printWidthλŠ” ν•œ 라인의 길이λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€. 가독성을 μœ„ν•œ ꢌμž₯ κΈΈμ΄λŠ” 80μžμž…λ‹ˆλ‹€.
  • singleQuoteλŠ” λ¬Έμžμ—΄μ— ' λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.
  • trailingCommaλŠ” λ°°μ—΄ 후행에 μ‰Όν‘œκ°€ μΆ”κ°€λ©λ‹ˆλ‹€.


μ €λŠ” λ‹€μŒ μ˜΅μ…˜μ„ μΆ”κ°€ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  • useTabsκ°€ false이면 듀여쓰기에 νƒ­ λŒ€μ‹ μ— 슀페이슀λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.
  • tabWidth λŠ” λ“€μ—¬μ“°κΈ° 슀페이슀 곡백 κ°―μˆ˜μž…λ‹ˆλ‹€.
  • semiλŠ” μ½”λ“œ 끝에 μ„Έλ―Έμ½œλ‘ ;을 μ‚¬μš©ν•©λ‹ˆλ‹€.


Prettierμ—λŠ” 더 λ§Žμ€ μ˜΅μ…˜μ΄ μžˆμŠ΅λ‹ˆλ‹€. 더 μžμ„Έν•œ λ‚΄μš©μ€ Prettier 곡식 λ¬Έμ„œ λ₯Ό μ°Έκ³ ν•˜μ„Έμš”.


이제 F1λ₯Ό λˆ„λ₯΄κ³  Format Documentsλ₯Ό μ„ νƒν•˜λ©΄ μ½”λ“œκ°€ κΉ”λ”ν•΄μ§‘λ‹ˆλ‹€. λ‹¨μΆ•ν‚€λŠ” Shift + Option/Alt + F μž…λ‹ˆλ‹€.



파일 μ €μž₯μ‹œ μžλ™ 적용되게 ν•˜κΈ°

μ½”λ“œ 정리λ₯Ό μžλ™μœΌλ‘œ ν•΄λ†“μœΌλ©΄ 맀우 νŽΈλ¦¬ν•©λ‹ˆλ‹€. μ•„λž˜ μ„€μ • 과정을 톡해 파일 μ €μž₯ν•  λ•Œ μ½”λ“œκ°€ μžλ™μœΌλ‘œ μ •λ¦¬λ˜κ²Œ ν•΄λ³΄μ„Έμš”.

Settingsμ—μ„œ JavaScript Formatλ₯Ό κ²€μƒ‰ν•©λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈ κΈ°λ³Έ 포맷터 κΈ°λŠ₯을 λΉ„ν™œμ„±ν™”ν•©λ‹ˆλ‹€. μš°λ¦¬λŠ” Prettierλ₯Ό μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€.

Settingsμ—μ„œ Format On Save을 κ²€μƒ‰ν•©λ‹ˆλ‹€. Editor: Format On Saveλ₯Ό ν™œμ„±ν™”ν•©λ‹ˆλ‹€. 그럼 μ €μž₯ν• λ•Œ μ½”λ“œλ₯Ό μžλ™ ν¬λ©§νŒ… ν•΄μ€λ‹ˆλ‹€.

Settingsμ—μ„œ Auto Fix On Save을 κ²€μƒ‰ν•©λ‹ˆλ‹€. Eslint: Auto Fix on Saveλ₯Ό ν™œμ„±ν™” ν•©λ‹ˆλ‹€.

settings.jsonμ—μ„œ 보면 λ‹€μŒ μ½”λ“œκ°€ μΆ”κ°€λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

{
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": true,
    "javascript.format.enable": false
}    

μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ³  νŒŒμΌμ„ μ €μž₯ν•΄λ³΄μ„Έμš”. 그러면 μ•„λž˜μ™€ 같이 μ½”λ“œκ°€ κΉ”λ”ν•˜κ²Œ μžλ™μœΌλ‘œ μ •λ¦¬λ©λ‹ˆλ‹€.


ν•΄ν”Ό μ½”λ”©ν•˜μ„Έμš”~!


![](https://steemitimages.com/400x0/https://cdn.steemitimages.com/DQmQmWhMN6zNrLmKJRKhvSScEgWZmpb8zCeE2Gray1krbv6/BC054B6E-6F73-46D0-88E4-C88EB8167037.jpeg)
Published 15 May 2019

μ•ˆν”Όκ³€μ˜ λΈ”λ‘œκ·Έμž…λ‹ˆλ‹€.