React ESLint로 편리하게 코딩하기

React 프로젝트에서 ESLint를 활용하여 코드를 자동으로 포맷팅하고 가독성 있게 만들려면, ESLint와 함께 Prettier를 사용하는 것이 좋습니다. 이 두 도구를 결합하면 코드 저장 시 자동으로 포맷팅되어 일관된 코딩 스타일을 유지할 수 있습니다. 아래는 설정하는 방법입니다.

---

사용하고자 하는 프로젝트에 아래 명령어로 eslint 설치

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

---

프로젝트 루트에 .eslintrc.json 파일을 만들고 다음 설정을 추가합니다.

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

---

 

Prettier의 설정을 정의하기 위해 .prettierrc 파일을 프로젝트 루트에 추가하고, 원하는 포맷팅 옵션을 설정합니다.

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

 

---

VS Code에서 파일 저장 시 자동으로 포맷팅하려면 settings.json을 다음과 같이 설정합니다:

1. VS Code 설정 열기: Ctrl + , 키를 눌러 설정을 엽니다.
2. settings.json을 열어 설정 추가:

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

 

설정을 완료한 후, 코드를 작성하고 Ctrl + S로 저장할 때 코드가 자동으로 포맷팅되는지 확인합니다.

제대로 동작하지 않으면 VS Code를 재시작하면 정상작동 될거에요~!