eslint와 prettier

 

아우.. eslint와 prettier을 어떻게 빠르게 추가할까?에 대해서 고민을 한참하고 검색을 해봤다.

 

Step 1

우선 프로젝트의 폴더에 들어가서 터미널을 킨다(컨트롤+~)

 

npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier

엔터.

 

위에 내용은 -D같은경우, eslint, prettier 등등 4개의 각 node package module을 설치를 하고 package.json에 데브 디펜던시리스트를 넣어주겠다는 단어이다.  그리고 그 뒤에 4개의 모듈들은 우리가쓸 eslint와, prettier와, 서로 충돌하지 않게하는 모듈(config prettier)와, eslint를 실행할 때, prettier을 실행하는 모듈(eslint-plugin)이다.

 

Step 2

터미널에서 엔터를 누르면 주르르르륵 하고 뭐가 설치되는동안에는,  루트 폴더에

.eslintrc.js파일을 생성하고

module.exports = {
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  env: {
    browser: true,
    node: true,
  },
  parser: "babel-eslint",
  
};

를 붙여넣고 저장을 한다. eslintrc의 rc는 run command라고한다.

 

Step3

위의 두가지를 끝내고나면,

package.json에 가장 바깥 괄호{ } 사이에 콤마, 를 찍어주고

  "scripts": {
    "lint": "eslint ."
  }

를 붙여준다.

 

Step 4

그리고, 컨트롤+P를 누른뒤 settings.json을 누르고 클릭한뒤에, 마찬가지로 대괄호에 콤마를 찍은뒤

(해보니.. settings.json을 최근에 켰어야 열리는걸 보니..이건 관리-설정-설정관리로 들어가야한다)

  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

를 붙여넣기를 한다. 방금이 settings.json에 넣는 값들은, 비쥬얼 스튜디오에 한번만 적용하면된다. 

 

Step 5

만약에~~ 

다음과같이, 빨간줄이나온다면, 

 

우측하단의 CRLF를 누르고 LF로 설정을 바꿔주면 끝난다!

 

 

Step 5개로! 빠르게 설정하는 법이다. 미래의 내가 빠르게 복붙 복붙하기 좋게 마지막 메모로 마무리

 

//터미널
npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.js
module.exports = {
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  env: {
    browser: true,
    node: true,
  },
  parser: "babel-eslint",
};


package.json

  "scripts": {
    "lint": "eslint ."
  }


settings.json

  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },