React - 코드 규칙 설정

milkbottle·2024년 1월 19일

목록 보기

12/33

코드의 규칙성

우리는 코드를 짤 때 규칙을 정하곤 한다.

if 문이 1줄이면 괄호를 넣지 않거나, 무조건 괄호를 넣거나 할 수도 있다.

if {
  doSomething();
} else {
  doAnything();
}

이런식으로 else를 } else {를 쓰거나 아니면 개행을 해서 사용하는 규칙이 있을 수도 있다.

아니면, js에선 세미콜론이 필수가 아니기 때문에 이런 세미콜론을 필수로 하거나 빼거나의 규칙을 정할 수도 있다.

이런 것을 코드 포매팅이라고 부른다.

코드의 포맷을 정해서 자동으로 변환해주는 툴이 각 언어마다 존재한다.

vscode를 사용하기 때문에 사용자는 커스터마이징하여 포매팅 규칙을 정해서 바꿀 수 있다.

이를 도와주는 것이 바로 ESLint와 Prettier이다.

ESLint

https://eslint.org/
ESLint는 JavaScript 및 JSX 코드에서 문제를 식별하고 일관된 코딩 스타일을 적용하기 위한 정적 분석 도구이다.

주로 개발자들이 코드 작성 중에 발생할 수 있는 오류나 잠재적인 문제를 미리 검출하고,

팀 내에서 일관된 코딩 규칙을 적용하여 코드 품질을 향상시키는 데 사용된다.

커스텀 규칙을 설정하고 이를 프로젝트에 적용해서 자동으로 코드를 바꾸게 할 수도 있다.

적용법(VS Code 필수)

npm install --save-dev eslint 또는 yarn add --dev eslint를 통해 프로젝트에 설치한다.

-D와 --save-dev는 같다

npx eslint --init 또는 yarn eslint --init을 통해 eslint를 초기화 한다.

각 단계별 설명을 잘 읽고 선택지를 골라 설치하자
VS Code 에 확장으로 ESLint를 설치한다.
VS Code 설정(Mac은 Cmd + ,, 윈도우는 Ctrl + ,)에서 code action을 검색한다.
settings.json에서 편집을 누르고 아래의 코드를 추가한다.

"editor.codeActionsOnSave": {
    "source.fixAll": true
  },

프로젝트 폴더에 .eslintrc.확장자명으로 파일이 생성되었을 건데 규칙을 넣는다.

이렇게 되면 저장을 하게 되면 자동으로 규칙을 맞춰 변경될 것이다.

규칙에 어긋나면 화낸다. 하지만 저장을 하면 자동으로 이 오류를 해결해준다.

적용이 안된다면 VS Code를 껐다 켜보자!

규칙

자바스크립트로 .eslintrc.js가 생성되었다면 다음의 기본 코드가 들어있을 것이다.

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

여기서 사용자는 plugins에 원하는 eslint의 플러그인을 추가하고, rules에 규칙을 커스터마이징하여 추가할 수 있다.

rules에는 괄호를 강제하거나, 탭 너비를 2칸으로하거나 등의 규칙을 지정할 수 있다.

규칙 예시

https://eslint.org/docs/latest/rules/

해당 사이트에서 규칙을 커스터마이징하여 추가해보자.

만약 내가 C를 너무 좋아해서 세미콜론을 강제하고 싶다.
그리고 탭을 2칸으로 반드시 강제하고 싶다.

이 두개를 만족시킨다면?

rules: {
    // 세미콜론을 반드시 사용하도록 설정
    semi: ['error', 'always'],

    // 들여쓰기를 2칸으로 강제하도록 설정
    indent: ['error', 2],

    // 다른 규칙들...
  },

이런식으로 추가하면 된다.

정 모르겠다면... Chat GPT님님님은 신이므로 물어보자!

Prettier

https://prettier.io/
Prettier은 보다 예쁘게 라는 뜻이다. 코드를 이쁘게 만든다는 것이다.

이 친구도 ESLint와 비슷하게 규칙을 설정하고 포매팅을 시킬 수 있다.

적용법

npm install --save-dev prettier 혹은 yarn add --dev prettier로 설치한다.
프로젝트의 루트 경로에(.eslintrc.js or .eslintrc.json이 있는 곳) .prettierrc를 생성한다.
https://prettier.io/ 에서 TRY IT ONLINE을 통해 원하는 규칙을 선택해서 json 데이터를 추가한다.

아래의 Copy config JSON을 통해 복사가능함!

나는 다음과 같이 규칙을 생성했다.

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "semi": true,
  "experimentalTernaries": false,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "proseWrap": "preserve",
  "insertPragma": false,
  "printWidth": 80,
  "requirePragma": false,
  "tabWidth": 2,
  "useTabs": false,
  "embeddedLanguageFormatting": "auto"
}

Prettier의 규칙을 ESLint에 적용하기 위해 npm install --save-dev eslint-plugin-prettier eslint-config-prettier 또는 yarn add --dev eslint-plugin-prettier eslint-config-prettie을 설치한다.
.eslintrc.js 혹은 .eslintrc.json 파일에 다음의 규칙을 적용한다.

module.exports = {
  // 다른 ESLint 설정...

  extends: [
    // 다른 extends 값...
    'plugin:prettier/recommended',
  ],

  plugins: [/* 다른 plugins 값*/ , 'prettier'],
};