[NestJS] eslint를 작성해보자.

eslint 수정을 결심하게 된 계기

기존의 eslint는 프론트 중심적으로 작성되어있거나, git diff 리딩에 불편하게 되어있어요.

 

개요

• tab indent를 4로 변경했어요.
  javascript는 tab indent를 2로 권장하지만, 백엔드에서는 early return 패턴을 사용하기 때문에 tab depth가 깊어질 일이 없어요.
  코드 가독성은 향상시키고 node.js 특유의 코드 편집기 우측이 텅텅 비어있는 것을 해결했어요.
• array, object 구조를 설정했어요.
  백엔드는 array, object가 길어질 경우가 많은데, 이런 경우 예외처리가 되어있지 않아요.
  eslint 기능을 사용하여 제약을 걸어 해결했어요.
• 그 외도 코드리딩을 고려해서 작성했어요.
  git diff를 읽을 때 온점이나 쉼표 혹은 괄호들을 eslint가 제약이 없어서 불필요한 diff가 생겨요.
  강제로 
• prettier를 삭제했어요.
  하는 역할도 비슷하고 굳이 둘을 함께 사용했을 때의 이점이 없어서 prettier를 삭제하고,
  eslint만을 사용해서 모든 코딩 컨벤션을 맞췄어요.

 

필수

npm install --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint

 

ESLint Gist

	module.exports = {
	parser: "@typescript-eslint/parser",
	parserOptions: {
	project: "tsconfig.json",
	tsconfigRootDir: __dirname,
	sourceType: "module"
	},
	plugins: ["@typescript-eslint/eslint-plugin"],
	extends: [
	"plugin:@typescript-eslint/recommended"
	],
	root: true,
	env: {
	node: true,
	jest: true
	},
	ignorePatterns: [".eslintrc.js"],
	rules: {
	"no-console": "error",
	"indent": ["error", "tab"], // 탭으로 분리(ide에서 4로 설정할 것), 데코레이터 이후의 노드는 무시
	"semi": ["error", "always"], // 세미콜론 사용
	"array-element-newline": ["error", {
	"ArrayExpression": { "multiline": true, "minItems": 3 }, // 배열의 요소가 3개 이상일 경우, 각각 한줄씩
	}],
	"quotes": [2, "single", { "avoidEscape": false }], // ', `만 허용
	"eqeqeq": [2, "allow-null"], // == 금지
	"padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "return" }], // return 앞에는 빈줄 강제
	"no-empty": ["error", { "allowEmptyCatch": false }], // 빈 catch 금지
	"eol-last": 2, // 파일 끝에 개행문자가 없을 경우 경고
	"camelcase": ["error", { "properties": "never" }], // 카멜케이스 강제
	"space-in-parens": [2, "never"],// 괄호`()` 안에 공백을 추가하지 않습니다.
	"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }], // 빈줄 최대 1개
	"space-before-blocks": [2, "always"], // 블록 앞에 공백을 강제
	"brace-style": [2, "1tbs", { "allowSingleLine": true }], // 중괄호 스타일
	"@typescript-eslint/explicit-function-return-type": 2, // 명시적 함수 반환 타입 허용
	"@typescript-eslint/explicit-module-boundary-types": 0, // 명시적 모듈 바운더리 타입 허용
	"@typescript-eslint/no-explicit-any": 0, // any 허용
	"function-paren-newline": ["error", "consistent"], // 함수의 인자가 여러줄일 경우, 첫번째 인자는 첫줄에, 나머지는 각각 한줄씩
	"object-property-newline": ["error", { "allowAllPropertiesOnSameLine": false }], // 객체의 프로퍼티가 여러줄일 경우, 첫번째 프로퍼티는 첫줄에, 나머지는 각각 한줄씩
	"object-curly-newline": ["error", {
	"ObjectExpression": { "multiline": true, "minProperties": 3 },
	"ObjectPattern": { "multiline": true },
	"ImportDeclaration": { "multiline": true, "minProperties": 3 },
	"ExportDeclaration": { "multiline": true, "minProperties": 3 }
	}],
	"object-curly-spacing": ["error", "always"],
	"function-call-argument-newline": ["error", "never"], // 함수 인자에 줖바꿈 금지
	"comma-dangle": ["error", "always"], // 마지막 콤마 강제, git diff 가독성 향상
	"max-len": [2, 200, 4, { "ignoreUrls": true }] // 한줄의 최대 길이
	}
	};

view raw .eslintrc.js hosted with ❤ by GitHub

 

적용 예시

적용 방법

자동 적용하지 마시고, .eslintrc.js로 변경하세요.
아직 webstorm은 .eslintrc.js를 자동으로 못찾아줍니다.

1. eslint 기본 설정을 적용
2. prettier 적용
3. nest.js에서의 lint 설정과 맞지 않기 때문에 한번 더 실행 시 eslint 적용

총 3회를 수행하기 때문에 린트 적용이 느려집니다.

 

또한, linting 파일도 .ts만 수행하도록 변경하세요.