[Nest.js] eslintrc, prettierrc 들여쓰기 4칸으로 설정하기, 괄호 내부 띄어쓰기 허용하기

Nest.js 프레임워크를 설치하면 자동으로 eslintrc, prettierrc 파일이 따라온다.

 

eslint와 prettier은 코드 컨벤션을 유지하기 위해 코드를 포맷팅해주고,

설정된 코드 컨벤션에 위반되는 코드가 존재하면 빨간줄을 그어 경고를 한다.

 

 

1. 들여쓰기 4칸으로 설정

나는 평소에 vscode에서 들여쓰기를 할 때 4칸을 띄우는 세팅을 이용하는데

eslint와 prettier의 기본 세팅은 2칸을 띄우는 걸 적용하여 4칸을 띄우면 빨간줄을 띄운다.

 

4칸을 띄우는 걸 기본 세팅으로 바꾸려면 .prettierrc 파일에 "tabWidth" : 4 를 추가하면 된다.

{
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "all"
}

 

여기서 탭 정렬을 몇칸으로 설정할 건지는 하단의 링크를 보고 따라하면 된다.

https://dubaiyu.tistory.com/180

Visual Studio 탭정렬 tab

 

 

 

2. 괄호 내부 띄어쓰기

eslint, prettier 괄호 내부 띄어쓰기 허용

초기 세팅에서는 괄호 안에 그냥 띄어쓰기를 쓰면 위와 같이 빨간줄을 그어서 신경이 쓰인다.

 

괄호 내부 띄어쓰기를 허용하려면

"prettier/prettier": ["error", { "endOfLine": "off" }] 

위 코드를 .eslintrc.js에 추가해주면 된다.

 

 

.eslintrc.js

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", { "endOfLine": "off" }],
        "@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",
    },
};