Lint

Lint란 코드의 가이드라인을 이야기를 한다. 각자 다양한 방식으로 코드를 설계를 한다. ‘‘을 쓰는 사람과 ““를 쓰는 사람이 다르고, { key : value }, {key:value} 등 다양한 형태로 코딩을 하는데, 이것을 통일화시키고 도와주는 가이드라인을 라고 한다. JS에는 다양한 Lint들이 있는데, ESLint, JSLint, JSHint, JSCS 등이 있지만 ESLint를 가장 많이 사용한다. ESLint는 EcmaScript와 Lint의 합성어이다.

// 1. lint start
$eslint init
// 2. set lint setting
$vi .eslintrc
// 3. enable lint

• lint를 사용하기 위해서 eslint init명령어를 통해 lint를 실행시키고, .eslintrc파일을 루트 디렉토리에 작성해서 어떤 에러들을 검사할지 정한다. 또한 추가로 npm 패키지 설치를 통해 Google-style이나 airbnb-style로 개발을 할 수 있다.

~/Desktop/todo/jaeyeon/ npm info "eslint-config-google@latest" peerDependencies
{ eslint: '>=5.16.0' }
 ~/Desktop/todo/jaeyeon/ npm info "eslint-config-airbnb@latest" peerDependencies

{ eslint: '^4.19.1 || ^5.3.0',
  'eslint-plugin-import': '^2.14.0',
  'eslint-plugin-jsx-a11y': '^6.1.1',
  'eslint-plugin-react': '^7.11.0' }

• npm info명령어를 통해 eslint-config-google이나 eslint-config-airbnb 모듈을 사용하기 위해 사전에 어떤 패키지들이 필요한지 미리 알 수 있다. 필자의 경우 google스타일을 적용할 예정이라 eslint-config-google만 적용을 했다.

// .eslintrc

{
  "extends": "eslint-config-google",
  "rules": {
    "indent": [
      "error",
      2
    ],
    "semi": [
      "error",
      "always"
    ],
    "new-cap": "off"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "mocha": true
  }
}

• eslint 설정파일을 들어가면 위와같이 설정을 할 수 있다.
• extends 옵션을 통해 앞서 설치한 eslint-config-google을 적용하고, 다양한 rules들을 정의할 수 있다.
• env는 사용자가 lint를 어디까지 적용할지를 설정하고, 여기서는 사용하지 않았지만 plugin이나 globals를 통해 전역 변수들을 관리할 수 있다.

const router = express.Router();
// ESLint: A function with a name starting with an uppercase letter should only be used as a constructor. (new-cap)

let User = mongoose.model('user', userSchema);
// ESLint: 'User' is assigned a value but never used. (no-unused-vars
// ESLint: 'User' is never reassigned. Use 'const' instead. (prefer-const)

• lint를 적용을 하면 규칙에 어긋난 코드들에 대해서 위와 같은 메세지들이 발생한다. 설정파일 rules에 new-cap와 같이 특정 lint규칙을 off를 통해 사용을 안할 수도있다.

배운점

lint를 적용해서 협업할때 코딩컨벤션을 통일시킬 수 있어서 좋았다. 처음에는 webstorm이나 vscode의 설정을 통해 indent를 몇칸으로 할지 어떤 기준들을 가지고 규칙을 정할지 나만의 설정을 했었는데, .eslintrc파일처럼 표준화된 규칙들을 정함으로서 해당 파일을 쓰는 사람에게 동일한 코드규칙을 적용함으로서 표준화가 되어서 좋았다.