ESLint Prettier (2) 썸네일형 리스트형 Prettier와 ESlint 함께 사용하기 prettier와 ESlint는 코드를 깔끔하게 해주는 툴이다. 둘이 비슷한 역할을 해서 개발을 처음 접했을 때 구분하기 쉽지 않았다. prettier는 저장할 때 설정에 따라서 자동으로 코드의 형태를 바꿔준다. (VSCode의 설정 중 format on save가 체크 됐을 때) 예를 들어 세미 콜론을 채워준다든지 특정 길이 이상일 때 줄바꿈을 해준다든지 등의 설정을 할 수 있다. ESlint는 설정에 따라서 스타일에 맞지 않을 경우 밑줄을 그어준다. 예를 들어 let 키워드로 변수를 선언하고 한 번도 변수를 바꿔주지 않을 경우 const를 사용하라고 줄을 쳐준다. 1. 먼저 둘을 VSCode에서 사용하려면 프로젝트 폴더에서 다음 명령어를 입력해 설치한다. npm i -D prettier eslint .. ESLint 설치와 기본 사용 방법 - Linting Tool 1. 터미널에서 프로젝트 폴더로 들어간다. 2. 다음을 입력해서 ESLint를 설치한다. npm install eslint --save-dev 3. 다음을 입력해서 configuration 파일을 설정한다. npx eslint --init 4. 다음을 입력해서 ESlint로 폴더나 파일을 검사할 수 있다. npx eslint 파일.js 5. .eslintrc 파일 설정에 따라서 통과 여부가 달라진다. { "extends": "eslint:recommended", "rules": { "semi": ["error", "always"], "quotes": ["error", "double"] } } rules의 키에 뭐가 오느냐에 따라 에러로 표시되는 코드가 달라진다. error는 semi 조건에 해당하는 코드.. 이전 1 다음
