[Nest.JS] ESLint, Prettier 줄바꿈 설정하기

그동안 Nest에 있는 기본 ESLint설정과 Prettier설정으로 프로젝트를 진행해왔다.
하지만 TypeScript의 Input, Output을 적용하면서 코드가 길어졌고
디폴트 줄바꿈 기준이 80글자였는데,
코드를 작성할 수록 너무 잦은 줄바꿈으로 가독성이 너무 떨어졌다.

더 나은 가독성을 위해 Nest 프로젝트에 적용하는 줄바꿈 기준 80에서 120으로 변환 해보자

적용해준 파일은 아래의 두개 파일이다.

.eslintrc.js
.prettierrc

---

기존 코드

import {
  ConflictException,
  Injectable,
  NotFoundException,
} from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { CreateUserInput } from './dto/createUserInput';
import { UpdateUserInput } from './dto/updateUserInput';
import { User } from './entities/user.entity';
import * as bcrypt from 'bcrypt';

@Injectable()
export class UsersService {
  constructor(
    @InjectRepository(User)
    private readonly usersRepository: Repository<User>,
  ) {}
  async create({
    createUserInput,
  }: {
    createUserInput: CreateUserInput;
  }): Promise<User> {
    const { email, name, password } = createUserInput;
    const points = 500;
    // 비밀번호 해싱하기
    const hashedPassword = await bcrypt.hash(
      password,
      Number(process.env.BCRYPT_SALT),
    );
    // email 존재하는지 확인하기
    const isValidEmail = await this.usersRepository.findOne({
      where: { email: email },
    });
    if (isValidEmail) throw new ConflictException('email이 존재합니다.');

    return await this.usersRepository.save({
      email,
      name,
      password: hashedPassword,
      points,
    });
  }
}

---

설정 변경하기

ESLint

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    'prettier/prettier': ['error', { printWidth: 120 }], // 줄바꿈 120 적용을 위해 해당 부분 추가
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

Prettier

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120  // 줄바꿈 120 적용을 위해 해당 부분 추가
}

---

적용 후 코드

import { ConflictException, Injectable, NotFoundException } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { CreateUserInput } from './dto/createUserInput';
import { UpdateUserInput } from './dto/updateUserInput';
import { User } from './entities/user.entity';
import * as bcrypt from 'bcrypt';

@Injectable()
export class UsersService {
  constructor(
    @InjectRepository(User)
    private readonly usersRepository: Repository<User>,
  ) {}
  async create({ createUserInput }: { createUserInput: CreateUserInput }): Promise<User> {
    const { email, name, password } = createUserInput;
    const points = 500;
    // 비밀번호 해싱하기
    const hashedPassword = await bcrypt.hash(password, Number(process.env.BCRYPT_SALT));
    // email 존재하는지 확인하기
    const isValidEmail = await this.usersRepository.findOne({
      where: { email: email },
    });
    if (isValidEmail) throw new ConflictException('email이 존재합니다.');

    return await this.usersRepository.save({
      email,
      name,
      password: hashedPassword,
      points,
    });
  }

기존의 코드는 줄바꿈이 너무 잦아 가독성이 좋지 않았다.
적용 후에는 흐름을 끊지 않아 한눈에 코드를 보기 쉬워진것 같다.