ESLint와 Prettier 설정

ESLint

ESLint는 문법 검사 도구이고, Prettier는 코드 스타일 자동 정리 도구입니다. ESLint는 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해줍니다.

Prettier

JSX를 작성할 때는 코드의 가독성을 위해 들여쓰기를 사용합니다. Prettier를 사용하여 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론(;)이 빠진 곳에는 세미콜론이 자동으로 추가되고, 기존에 사용하던 작은따옴표는 모두 큰따옴표로 바뀝니다.

자바스크립트에서는 문자열을 표현할 때 작은따옴표를 써도 되고 큰따옴표를 써도 됩니다. 세미콜론은 코드의 뒷부분에 무조건 있어야 하는 문자가 아닙니다. 이는 단순히 코딩 관습의 차이일뿐입니다.

$ yarn add --dev eslint
$ yarn run eslint --init
yarn run v1.22.19
warning ..\\..\\package.json: No license field
warning ..\\..\\..\\..\\..\\..\\package.json: No license field
$ C:\\Users\\USER\\Desktop\\Cho\\04_Study\\React\\koa\\blog-backend\\node_modules\\.bin\\eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.5
Ok to proceed? (y) y
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JSON
Successfully created .eslintrc.json file in C:\\Users\\USER\\Desktop\\Cho\\04_Study\\React\\koa\\blog-backend
Done in 109.90s.

yarn add 명령어를 사용할 때 —dev는 개발용 의존 모듈로 설치한다는 의미입니다. 이렇게 설치하면 package.json에서 devDependencies 쪽에 모듈의 버전 정보가 입력됩니다.

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
    }
}

blog-backend 디렉터리에 .prettierrc 생성

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

Prettier에서 관리하는 코드 스타일은 ESLint에서 관리하지 않도록 eslint-config-prettier를 설치하여 적용하세요.

$ yarn add eslint-config-prettier

const로 값을 선언하고 사용하지 않으면, ESLint 기본 설정은 이를 에러로 간주합니다.

.eslintrc.json을 다음과 같이 수정해 보면

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "prettier"],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
        "no-unused-vars":"warn",
        "no-console":"off"
    }
}

이렇게 수정한 뒤에 저장하면, 기존에 빨간색 줄로 나오던 코드가 변경되었습니다.

그리고 no-console 값에는 “off”를 설정 해주엇습니다. ESLint 기본 설정에서는 console.log를 사용하는 것을 지양하고 있습니다. 그러나 실습을 위해서 비활성화 할것입니다.

ESLint

ESLint는 문법 검사 도구이고, Prettier는 코드 스타일 자동 정리 도구입니다. ESLint는 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해줍니다.

Prettier

JSX를 작성할 때는 코드의 가독성을 위해 들여쓰기를 사용합니다. Prettier를 사용하여 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론(;)이 빠진 곳에는 세미콜론이 자동으로 추가되고, 기존에 사용하던 작은따옴표는 모두 큰따옴표로 바뀝니다.

자바스크립트에서는 문자열을 표현할 때 작은따옴표를 써도 되고 큰따옴표를 써도 됩니다. 세미콜론은 코드의 뒷부분에 무조건 있어야 하는 문자가 아닙니다. 이는 단순히 코딩 관습의 차이일뿐입니다.

$ yarn add --dev eslint
$ yarn run eslint --init
yarn run v1.22.19
warning ..\\..\\package.json: No license field
warning ..\\..\\..\\..\\..\\..\\package.json: No license field
$ C:\\Users\\USER\\Desktop\\Cho\\04_Study\\React\\koa\\blog-backend\\node_modules\\.bin\\eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.5
Ok to proceed? (y) y
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JSON
Successfully created .eslintrc.json file in C:\\Users\\USER\\Desktop\\Cho\\04_Study\\React\\koa\\blog-backend
Done in 109.90s.

yarn add 명령어를 사용할 때 —dev는 개발용 의존 모듈로 설치한다는 의미입니다. 이렇게 설치하면 package.json에서 devDependencies 쪽에 모듈의 버전 정보가 입력됩니다.

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
    }
}

blog-backend 디렉터리에 .prettierrc 생성

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

Prettier에서 관리하는 코드 스타일은 ESLint에서 관리하지 않도록 eslint-config-prettier를 설치하여 적용하세요.

$ yarn add eslint-config-prettier

const로 값을 선언하고 사용하지 않으면, ESLint 기본 설정은 이를 에러로 간주합니다.

.eslintrc.json을 다음과 같이 수정해 보면

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "prettier"],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
        "no-unused-vars":"warn",
        "no-console":"off"
    }
}

이렇게 수정한 뒤에 저장하면, 기존에 빨간색 줄로 나오던 코드가 변경되었습니다.

그리고 no-console 값에는 “off”를 설정 해주엇습니다. ESLint 기본 설정에서는 console.log를 사용하는 것을 지양하고 있습니다. 그러나 실습을 위해서 비활성화 할것입니다.