[유튜브 클론코딩] 3.11 Installing ESLint

3.11 Installing ESLint

ESLint의 필요성?

 

일단 지금 search를 해보면 videos가 정의되어있지 않다고 뜬다.

 

 

export const search = (req, res) => {

    const {query: { term: searchingBy }} = req; // const searchingBy = req.query.term 과 같은 코드

    res.render("search", {pageTitle: "Search", searchingBy, videos}); // searchingBy = searchingBy 인 경우 하나로 줄여쓸 수 있음

};

↑ videoController.js

여기 나는 videos라는 variable 이름을 가지고 있지만 videos는 variable로나 global로 존재하지 않는다.

직접 실행해보기 전까지는 이게 잘못된 것을 알 수가 없다.

이런 것은 비쥬얼 스튜디오 코드에서 Linter라는 도구를 통해 무엇이 틀렸는지, 어떤 코드가 좋고 어떤 코드가 구린지 알 수 있다. Linter를 설치한다.

 

 

ESLinter 설치하기

vscode의 extension에서 prettier 설치하고 설정에서 format on save 체크하기

 

1. 아래 순서대로 eslint와 prettier플러그인 및 설정, prettier를 설치해주세요.

npm install eslint -D

npm install eslint-plugin-prettier -D

npm install eslint-config-prettier -D

npm install prettier -D

 

2. npx eslint --init

 

3. 이제 질문이 계속 나오는데 아래 순서대로 선택해주세요.

- To check syntax, find problems, and enforce code style

- JavaScript modules (import/export)

- None of these

- No

- Node

- Use a popular

- Airbnb

- Javascript

- Yes

 

4. 확장프로그램 검색으로 ESlint extension을 설치해주세요.

 

5. VScode에서 윈도우는 Ctrl +, 맥은 Cmd +, 입력해주세요.

 

6. 검색창에 actionon을 입력해준 뒤

Eslint > Code Actions On Save 가 all로 되어있는지 확인해주세요.

 

7. 그리고 바로 위에 Edit in setting.json을 클릭해 들어가주세요.

editor.formatOnSave 가 ture로 되있는지 확인해주시고

editor.codeActionsOnSave는 null로 되어있을텐데

{ "source.fixAll":tre, "source.fixAll.eslint": false} 로 수정해주고 저장해주세요.

 

8. 왼쪽사이드보시면 .eslintrc.js가 생성되어있을거에요.

들어가셔서

env: {

browser: true,

es2021: true,

node: true,

},

extends: [

'airbnb-base', "plugin:prettier/recommended"

],

parserOptions: {

ecmaVersion: 12,

sourceType: 'module',

},

rules: {

"prettier/prettier": "off",

"no-console":"off",

"spaced-comment":"off",

"no-else-return":"off"

},

};

이렇게 수정해주고 저장해주세요.

 

9. VScode의 오른쪽 하단에 빨간 금지아이콘과 함께 ESlint라고 있을거에요.

눌러서 allow everywhere 으로 설정해주세요.

그러면 이제 ESlint가 작동하기 시작해요.

 

(설치 방법 출처: 노마드코더 해당 강의 bami님의 덧글 )