웹개발

eslint

jjnll 2023. 9. 26. 14:39
# 해당 노드가 설치된 부분을 루트로 지정할 때
"root": true

### 하위 노드모듈 내 eslint를 root: false로 두는 경우 각 폴더마다 다른 규칙을 적용시킴

혼자 만들기는 하지만 큰 틀이 정해져있으면 좋을 것 같아서 린팅 툴을 설치했다.

 

# VSC 커맨드에서 설치
npm install eslint --save-dev

# .eslintrc.json 생성
eslint --init
# > 이후 원하는 기능에 맞게 선택 엔터엔터

# Package.json에 아래 한 줄 추가
"scripts": {
  // …
  "lint": "eslint src/js"
  // …
}

# 아래 용어로 실행
npm run-script lint

### 이러면 해당경로의 모든 파일을 테스트함.
### 겉폴더 노드모듈에 있는 경우 안폴더 노드에는 먹히지 않음

처음 실행시 index.js에서 인덴트를 없앤 상황에 뜬 에러.

두번째 실행시 인덴트 복구하고 실행해서 에러없이 바로 경로가 뜸.

에러가 없으면 하늘색 원이 나오고 아니면 빨간 원 및 빨간 엑스가 같이 뜸.

package.json > scripts > lint에서 수정하고자 하는 파일들 경로를 향하게 할 수 있다.

 

 

 

굳이 실행하지 않아도 알기 위해선 익스텐션을 추가하면 된다.

EXTENTIONS: MARKETPLACE에서 ESLint 설치 후 Enable(Workspace) 클릭하고 리로드 하면 된다.

 

 

 

하면 인덴트 1회 추가했을 때 에러라인이 뜬다.

 

 

----------

*

# 1. terminal__install extend
npm i eslint-config-airbnb

# 2. /.eslintrc.json__add a line
"extends": ["airbnb"],

# 3. terminal__run
npm run-script lint

# ERR__not fit of airbnb extends rule
Expected linebreaks to be 'LF' but found 'CRLF'
> 리눅스기반 줄바꿈을 윈도우기반 줄바꿈으로 사용한 경우 나는 에러

보니까 prettier와 같이 사용하던데 구분이 좀 필요해보인다.

어떤 규칙을 eslints에 두고 어떤 것을 prettier에 둘지 나누어야 하고,

현재는 정말 기본적인 쿼테이션과 탭간격만 두었는데

앞으로 펑션형태나 언어 종류별 플러그인, 루트경로, 파싱 등 추가해야 한다.

728x90