11일차 study(ESLint , Prettier)

ESLint 란?

ES 와 Lint 를 합친것이다.

ES = Ecma Script

Lint : 에러가 있는 코드에 표시를 달아놓는 것을 의미

 

ESlint를 사용하는 법은 두가지가 있다

첫째  vscode 에서 다운 받기

 

vscode 마켓플레이스에 ESLint 를 검새 후

다운 받는다 . vscode를 껏다 킨 후 에러를 만들고 작동시키면

어디서 에러가 났는지 안내문이 나온다.

 

a 를 상수로 만들고 밑에 a 값을 또 지정해주는 

에러를 만들어 이런식으로 나오는 것을 확인 할수있다.

 

두번째 방법  npm install 로 라이브러리 다운 받기

node.js 를 다운 받은 상태에서 

 

$  npm install eslint --save -dev 

ESLint 환경 설정 파일이 생성되어 않았으므로 초기화 해야한다.

 

$ npx eslint --init

 

ESLint 설정

.eslintrc.js 라는 파일이 생성 되었을 것이다. 

 

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        "node": true,
        "mocha": true,
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"],
        "no-unused-vars": ["off"]
    }
};

내용을 채워 넣어주고 

 

// terminal
npx eslint 파일명.js
npx eslint 파일명.js --fix // 자동으로 코드를 교정합니다.

// 또는 package.json
"scripts": {
    "lint": "eslint 폴더명/**/파일명.js",
}

 

이렇게 작동 시킬 수 있다.

 

 

prettier 사용하기

vscode Extention 에서 prettier 을 검색 후 설치

설치가 됬다면 맥기준( command + , ) 누르면 아래와 같은 창이 나온다.

 

페이지 모양을 클릭하면 설정 파일이 나온다.

내용 추가 하기

{
  "singleQuote": true,     // 따옴표 고정
  "semi": true,            // 코드 끝에 ; 설정
  "useTabs": false,        // Tap 사용여부
  "tabWidth": 2,           // Tap 크기
  "trailingComma": "all",  // 객체 끝 부분에도 Comma 추가
  "printWidth": 100        // 줄 당 max length
}