3줄요약:
아주 예전에 처음으로 eslint를 쓸때 발생한 문제로 모듈을 제대로 처음 써봤을때 겪은 일
ESLINT PRETTIER 설치했지만 작동 불가능
설치코드를 보니 알아챗던게, eslint와 prettier의 paser문제였고, 환경 세팅할때 여러 라이브러리의 작동 흐름과, 원리 파악을 먼저해야겠다고 깨달음.
받은 설치 명령어
npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install -D prettier eslint-plugin-prettier eslint-config-prettier
내가 해본 설치 명령어
npm install eslint --save --include=dev
eslint설치했는대 작동안함
npm install eslint --save --include=dev를 사용해서 설치를 했고
파일도 확인했고 설정도했지만 작동이안됨.
이런 몇가지 이슈 때문인대 npm fund를 확인하니 post css가 문제인것으로 보임
postcss가 뭐하는놈???
검색해보니 과거만들어진 css를 현대적으로 해석하기위한 전처리기라고함.
node js를 설치할때 같이 설치된다고한다.
node js 현재버전
노드 js를 확인하니 최신버전임을 확인.
포스트css 업데이트
. 이상없음 첫번째는 안됐고
두번째는 이상없이 되었다.
명령어
npm install eslint --save --include=dev
로 재설치
작동안함.
src에 설치해서 그런것일까?
설치는 netflix2에 되어있고
src내에는 설치가 되어있지않음
pakage.json에 구문이 없어서 추가
scripts에 "lint": "eslint --ext .js --ignore-path .gitignore ."추가 후 껏다켜봄
여전히 사용불가능.
그냥 확장프로그램 검색 후 설치해봄.
더 해봣는대 안되서 제혁님 도움을받음. 아래의 방법은 제혁님이 docs를 참고하고 몇가지 블로그를 참고해서 방법을 작성 하셨음.
이전에 몇번 설치할때 명령어와 설정을 같이받는걸 해보았는대 그것고 매우 유사함.
https://typescript-eslint.io/docs/linting/
https://prettier.io/docs/en/integrating-with-linters.html
두가지 공식 문서.
왜 작동을 안하냐 하면. eslint와 prettier 둘다 ts 코드를 paring 동작을 가장 먼저 수행한 후 코드를 수정 해줌
근대 양쪽 다 동시에 작동하거나 서로의 규칙때문에 작동하지 않거나 설정을 초기설정으로만 맞추어 주어서 양쪽 다 작동을 하지 않음.
npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install -D prettier eslint-plugin-prettier eslint-config-prettier두가지 설치코드가 있는대 각각 적힌대로 eslint, prettier 설치 command임.
npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
해석하면
npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
install devDependancy에추가 [ 설치한다] [이하 문장에따라 ]
'@typescript-eslint/parser' eslint의 파서가 typescript 코드 또한 인식해 parsing 하도록 한다.
여기서 파싱을 설정하지않으면 ts코드를 eslint가 읽지못한다.
@typescript-eslint/eslint-plugin : eslint를 local 폴더의 설정 파일에 따라 동작하도록 설정 , @는 기본 설치모듈이 아니라 특정 설정을 추가한 모듈이라는것
여기까지가 eslint를 설치하는 작업이고
npm install -D prettier eslint-plugin-prettier eslint-config-prettier
프리티어 설치 코드.
eslint가 코드를 수정하는 규칙과 prettier가 코드를 수정하는 규칙이 양쪽 다 코드를 변경할 때 서로의 규칙을 알고 오류가 발생하는 일이 없도록 해줌.
eslint와 prettier 양쪽 다 parser를 가지고 있는대 이 두 parser가 동시에 작동되면서 충돌하는 일을 방지해주기 위해 설정하는것.
두개의 언어를 설치하고
eslint를 확장프로그램에서 global 설정으로 설치해줌
그 다음 톱니 바퀴 클릭후 확장 설정을 들어가 주면 몇가지 설정이 뜨는대
사진과 같이 설정을 기입하고, 체크박스를 입력해주면 eslint 완성
다음으로 최상위 폴더에 .prettierrc 파일 생성 [json파일이지만 확장자를 넣든말든 상관없음 ] 후
아래 그림의 코드를 입력한다.
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"endOfLine": "auto"
} 
eslint가 적용되기 전 문서
eslint가 해결할수있는건 해결
