-
eslintProject using node.js/Cloning Youtube 2020. 8. 20. 10:45
소개
eslint는 JS 코드를 clean하게 만들어준다. 기본적인 syntax error는 VSC가 알려줄 것이다. 하지만 문법적인 오류는 아니지만 개발자도 인간이고 자기만의 잘못된 습관이 있다. 더더욱 초보 개발자는 더 심하다. 이러한 습관 때문에 코드가 더러워질 수가 있다. 이러한 문제점을 찾고 고칠 수 있도록 알려주는 툴이 eslint다.
설치 및 설정
#npm install eslint eslint-config-prettier eslint-plugin-prettier prettier -D
VSC의 Extension에서도 eslint를 설치해준다.
VSC의 settings.json에서 밑에 코드를 추가해준다.
.eslintrc.js파일을 만들고 다음과 같이 코드를 추가해준다.
module.exports = { env: { browser: true, es6: true, node: true, }, extends: ["eslint:recommended", "plugin:prettier/recommended"], parserOptions: { ecmaVersion: 2018, sourceType: "module", }, rules: { "no-console": "off", }, };
마지막으로 다음 패키지를 설치해준다. prettier도 코드를 예쁘게 만들어주는 extension이다. 그러다 보니 prettier와 eslint와 충돌하게 될 때가 있다. 이것을 해결하기 위해 다음과 같은 패키지를 설치해주는 것이다. prettier를 포함한 VSC의 유용한 extension은 밑에 링크를 달아두겠다.
// JS 문제 감지 모듈 npm install eslint -D // 코드 정리 모듈 npm install prettier -D // prettier를 eslint 규칙으로 실행 시켜 주는 모듈 npm install eslint-plugin-prettier -D // prettier와 eslint의 충돌점을 보완해주는 모듈 npm install eslint-config-prettier -D
참고 자료
소스 코드
https://github.com/zpskek/wetube-v3/commit/8db162ec4a8eca49e975a7d1c8e9e044871cc023
'Project using node.js > Cloning Youtube' 카테고리의 다른 글
Node.js의 Router (0) 2020.08.21 다양한 middlewares (0) 2020.08.20 nodemon (0) 2020.08.20 babel (0) 2020.08.20 gitignore (0) 2020.08.19