4. [ 협업 ] Linting 세팅 - ESLint 세팅 공유

협업을 위해서는

 

팀 내에서 사용할 공동의 Linting Setting 으로 팀 내의 코딩 규칙을 일치시켜야한다.

 

1. npm install eslint --save-dev

 

- 개발 종속성 규칙을 잊지말자. 개발에만 사용되는 것이다.

 

2. eslint 설정

 

 - 루트디렉토리에 .eslintrc.확장자 를 통해 세팅파일을 만든다.

• eslint 설정은 커스터마이징 할 수 있는 부분이 많고, 언어별(js, ts 등), 환경별(web, node, react 등) 세팅을 해줘야 하는 부분이 많아서 다소 복잡합니다.
• 처음부터 모든 rule 하나하나 설정하는 것이 불필요하거나 불편하다고 판단되는 경우와 다른 사람들이 이미 정의해둔 config를 설치한 후 확장해서 사용할 수 있습니다.
• eslint에서 기본적으로 제공되지 않는 특정 환경을 위한 rule들을 추가하고 싶을 경우에는 plugin을 이용할 수 있습니다.

 

기본 세팅 및 설명

 

// .eslintrc.json

{
  "root": true,
  "env": {		// env 세팅
    "browser": true,	// 브라우저 환경 허용할거야
    "commonjs": true,	// commonjs 환경 허용할거야
    "es6": true,	// eslint 설정은, 기본적으로 es5 문법사용 => es6 환경 허용할거야
    "node": true	// 노드 환경 허용할거야
  },
  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],	// 확장
  "plugins": ["react", "@typescript-eslint"], 	// 플러그인
  "rules": {	// 세부 규칙
    "no-var": "error",	// var 금지
    "no-multiple-empty-lines": "error", // 여러 줄 공백 금지
    "@typescript-eslint/no-inferrable-types": "off",
    "prefer-const": "off",	// 
    "react/react-in-jsx-scope": "off",
    "eqeqeq": "error", // 일치 연산자 사용 필수,
    "no-console": ["error", { "allow": ["warn", "error", "info"] }], // console.log() 금지
    "no-unused-vars": "error" // 사용하지 않는 변수 금지
  },
  "overrides": [
    {
      "files": "**/*.+(ts|tsx)",
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "extends": ["plugin:@typescript-eslint/recommended"]
    },
    {
      "files": ["**/__tests__/**/*", "**/*.{spec,test}.*"]
    }
  ]
}

 

 

3. eslint 실행

 

npx eslint .

 

 

no-var error 규칙과, 사용하지 않은 변수생성에 warn 규칙이 적용되었다.

eslint 를 실행시켜 확인했다.

 

4. eslint 의 확장

 

어떤 세팅을 가지고, 그것을 가지고 와서 사용하고 싶다

한다면 extends 를 이용한다.

"root": true,
  "env": {		// env 세팅
		...
  },
  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],	// 확장

 

베이스 eslint 규칙으로

 

.eslintrc.base.js 를 만들었다면

 

.eslintrc.base.json 에 있는 no-var 규칙이 그대로 적용되는 것을 알 수 있다.

 

 

 

5. eslint 설정 파일 만드는 도우미

 

npm init @eslint/config

도우미를 불러오면 이것저것 물어보고 기본 세팅을 해준다.

 

 

6. eslint 의 자동화

 

1. 기존에 있던 파일중 변화되지 않은 파일에는 적용시키지 않기 위해 캐시파일을 남긴다.

 

npx eslint --cache .

// eslint 를 캐시파일을 남긴다 ( --cache )모든파일에 대해 ( . )

* ESLint 의 캐시파일은 루트폴더에 들어가기 때문에 반드시 .gitignore 세팅에 넣어두도록 하자.

 

2. package.json 에 자동적으로 ESLint 가 실행되도록 명령어 넣기