ESLint, Prettier 적용 (IntelliJ, WebStorm)
ESLint, Prettier ESLint: 코드 사용방식들을 일관성있게 고쳐주는 역할(function vs arrow function, for vs forEach vs map) Prettier: 코드 스타일을 통일성있게 고쳐주는 역할(들여쓰기, 공백...) ESLint, Prettier을 적용해야 코드의 공통화, 편리성에 대한 이점을 잘 설득하게 되어 팀원들이 모두 잘 사용해볼 수 있는 메뉴얼입니다. IntelliJ, WebStorm, Android Studio 등 JetBrains의 IDE를 사용하며 ESLint, Prettier를 처음 적용하는 분들에게도 도움이 되었으면 좋겠습니다. :) 큰 틀은 다음과 같습니다. ESLint, Prettier에 관련된 Package 설치 => ESLint, Pre..
React + TypeScript + Babel + ESLint & Prettier With Webpack 세팅 (CRA X) CRA(Create-React-App)을 사용하여 쉽게 개발을 진행하였지만 생각보다 사용하지 않고 알지도 못하는 library 등이 너무 많아 Boilerplate로 만들게 되었습니다. Github Repository https://github.com/GeonWooPaeng/React-TypeScript-Boilerplate What is inside? Webpack Babel React TypeScript ESLint & Prettier 📍 React & TypeScript 설정 1. package.json 생성 npm init -y 2. React 설치 node-modules..
Prettier & ESLint 기본 설정(MAC)
VSCode Prettier & ESLint Setting 와 진짜 드디어 MAC을 구매하게 되었습니다. 그래서 기본 Setting만 해도 하 세월이 걸리는 것 같아서 다음 번에는 보다 빨리하기 위해 오늘의 실패를 토대로 잘 작성을 해보려고 합니다. 우선 기본적인 node, npx를 설치 완료 했다는 가정하에 진행을 하도록 하겠습니다. :) 아.. 시작전에 앞서 간단 명령어 tip을 써볼려고 합니다. 이것으로 인해 필요 없는 것을 확실하게 없앨 수 있게 되었습니다. ㅎㅎㅎㅎ > npm list npm에 설치 되어 있는 것들을 볼 수 있습니다. > npm list //workspace의 list > npm list -g //global의 list> npm uninstall [list에서 본 이름] npm에..
JS 예쁘게 만들기(ESlint, Prettier)
ESlint ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project. eslint.org 소스코드를 분석해서 문법 에러, 버그를 찾고 보고해주는 도구 ES6, React를 완벽하게 지원합니다. 초기구성 필요 / 조금 느리다 Prettier Prettier · Opinionated Code Formatter Opinionated Code Formatte..