VSCode 에서 Eslint, Prettier 사용해보기

ESLint & Prettier 이란?

Eslint 는 코드 퀄리티를 보장하도록 도와주고 , Prettier 는 코드 스타일을 깔끔하게 통일되도록 도와준다.

ESLint

• 함수를 정의할 때 예를 들어 일반 function 키워드 함수를 쓸지, arrow function 를 쓸지 배열의 반복문 돌릴때 for 문 쓸지, forEach , map 등 내장함수 사용할지 등의 방식을 일관성 있는 방식으로 구현할수 있도록 잡아주는 것

Prettier

• 줄 바꿈 , 공백 , 들여쓰기 등 텍스트를 일관성 있게 작성되도록 도와주는것

EsLint, Prettier 설치

1. 두개의 Extention 을 vscode 에서 설치해준다

2. npm 으로 Eslint, Prettier의 Package 를 설치

npm install -D eslint
// Prettier 은 직접설치 OR Extention 만으로 하는법 2가지가 있다
npm install -D prettier

3. VS code Setting -> javascript Format 세팅

• 직접 설정하여 사용할때 설정

4. Format on Save 선택

• Format on save 를 설정시 파일 저장시 자동으로 Prettier 의 설정값에 맞춰 자동으로 코드 스타일이 적용된다

4-1.Eslint 와 Prettier 충돌방지를 위한 확장 패키지 설치

eslint-config-prettier는 Eslint 규칙에서 Pretter 규칙과 충돌을 막아줌

npm i -D eslint-config-prettier

npm i -D eslint-plugin-prettier

5. 규칙설정

• ESLint , Prettier 의 규칙을 설정하기위해서는 각각 .Eslintrc, .Prettier의 Package.json 파일을 만들어서 규칙을 직접 정하여 사용할 수 있다.

공식문서의 Example 을 우선 찾아보면

// ...eslintrc.json

"env" {
      "browser": true,
      "es2017" : true,
      "node" : true
	 },
eslintConfig": {
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:prettier/recommended"
    ],
    "overrides: [
    ],
    "rules": {
      "object-curly-newline": 0,
    },
    "env": {
      "browser": true
    },
},

env: "browser": true 는 document, window 등의 브라우저 내장 객체 조회시 사용

exteds : eslint 에 추가할 규칙, 플러그인

overrides : 무시할 규칙

rules : 원하는 규칙

// ..prettierrc.json

{
  "printWidth": 80,			      // 한 줄의 라인 수
  "tabWidth": 2,			      // tab의 너비
  "useTabs": false,			      // tab 사용 여부
  "semi": true,				      // ; 사용 여부
  "singleQuote": true,		      // 'string' 사용 여부
  "quoteProps": "consistent",	  // 객체 property의 따옴표 여부
  "trailingComma": "es5",		  // 끝에 , 사용 여부
  "bracketSpacing": true,		  // Object literal에 띄어쓰기 사용 여부 (ex: { foo: bar })
  "arrowParens": "always",		  // 함수에서 인자에 괄호 사용 여부 (ex: (x) => y)
  "endOfLine": "lf"			      // 라인 엔딩 지정
  "jsxBracketSameLine": false,    // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
}

6. 적용 확인

• 규칙에 어긋나게 코드 작성시 에러가 자동으로 뜬다

파일 저장 후 에러가 Prettier 규칙에 맞게 고쳐진다면 적용이 되고있다는것이다!