혼자 관리하는 블로그 프로젝트지만 코드 통일성이 필요해보여서 몇가지 ESLint 규칙과 pretiier를 적용했습니다.
그리고 staged된 커밋과 push전에 검사하도록 husky를 사용해서 자동화 했고 git 컨벤션도 .gitmessage로 추가했습니다.
사이드 프로젝트에서 그냥 airbnb 규칙에 예외를 추가해서 진행했다면 요번에는
StandardJS Style Guide (Korean)
대표적인 3가지 규칙들을 살펴보면서 하나씩 추가했습니다.
(하나하나 적용하기엔 너무 많아서 TS 작업하면서 규칙 하나를 적용 후 예외처리 하는 방식으로 바꿀 예정입니다.)
적용한 규칙들
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"globals": {
"__PATH_PREFIX__": true
},
"parser": "@babel/eslint-parser",
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
// "plugin:@typescript-eslint/eslint-recommended",
// "plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"ecmaVersion": 2021,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": ["react", "react-hooks", "prettier", "import"],
"rules": {
"react/prop-types": "off",
"react/no-unescaped-entities": "off",
"react/no-unknown-property": ["error", { "ignore": ["css"] }],
"indent": ["error", 2],
"quotes": ["error", "single", { "allowTemplateLiterals": true }],
"semi": ["error", "always"],
"eqeqeq": ["error", "always"],
"curly": ["error", "all"],
"no-unused-vars": [
"error",
{ "vars": "all", "args": "after-used", "ignoreRestSiblings": false }
],
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
"no-var": ["error"],
"import/order": [
"error",
{
"groups": [
"type",
"builtin",
"external",
"internal",
"parent",
"sibling",
"index",
"unknown"
],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"no-console": ["warn", { "allow": ["warn", "error", "info"] }],
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
},
"settings": {
"react": {
"version": "detect"
}
}
}TS를 아직 적용하지 않았기 때문에 TS규칙은 주석 처리를 해놓은 상태입니다.
고민했던 부분
1. 전역변수 설정
개츠비 개발 시 __PATH_PREFIX__ 라는 전역변수를 Link 컴포넌트를 이용할 때 사용하는데 ESLint에 등록해주지 않으면 오류가 나서 알려주도록 설정했습니다.
"globals": {
"__PATH_PREFIX__": true
},2. 세미콜론
airbnb, google 에선 semi를 꼭 붙여야 한다고 하고 standard에선 안 붙여도 된다고 나와있습니다.
standard 문서엔 자바스크립트가 ASI라는 특징으로 엔진이 소스를 파싱할 때 자동으로 삽입해주는 것과 코드 가독성 향상 등의 이유를 들고있고
airbnb와 google 에선 IIFE(즉시실행함수)같은 상황에서 세미콜론을 생략했을 때 문제가 생길 수 있다는 예를 들어서 설명하고 있습니다.
var a = b
(function() {...}())이런 경우에서 자바스크립트는 아래와 같이 해석해서 오류가 발생할 수 있다고 합니다.
var a = b(function() {...}())그래서 주관적인 결론으론 semi를 붙이는 게 맞다고 생각했고 해당 규칙을 따르게 설정했습니다.
마치며
시작은 import 순서를 일관성 있게 하기 위해 규칙을 추가하려고 했지만, 대표적인 규칙들이 어떻게 어떤 이유로 설정하고 있는지 찾아보고 적용해서 ESLint, Prettier에 대해 더 자세히 이해하게 됐습니다.
husky의 pre-commit, pre-push만 사용했는데 master 브랜치에 push를 직접 하지 못하게 하는 등 다른 기능도 찾아보는 시간을 가져볼 생각입니다.