프로젝트에 ESLint + Prettier 설정하기 🔏

더 많은 React 프로젝트를 만들면서 코드를 최대한 매끄럽게 만들기 위한 많은 설정이 있다는 것을 알게 되었습니다. 프로젝트 로드맵에서 자주 엿보는 전제 조건 중 하나는 linting 설정이 없다는 것입니다.

작고 종종 문체적인 일이지만 로봇에서 자동화해야 할 때 여기 저기 빈 줄을 제거하거나 코드를 제자리에 탭하는 경우가 종종 있습니다.

따라서 프로젝트에서 ESLint 및 Prettier를 설정하는 확실한 방법은 다음과 같습니다(VSCode를 사용한다고 가정).

# Install ESLint and Babel ESLint
# Make sure to install at least v5.1.0 of ESLint
npm install --save-dev eslint babel-eslint

# Install the Airbnb config
npx install-peerdeps --dev eslint-config-airbnb

# Install Prettier + ESLint config
npm install --save-dev --save-exact prettier eslint-config-prettier

프로젝트 루트의 .eslintrc.js에 다음을 추가합니다.

module.exports = {
  parser: "babel-eslint",
  extends: ["airbnb", "prettier"],
  plugins: ["react", "jsx-a11y", "import"]
};

VSCode에서CTRL + , 사용자 설정을 열고 다음을 추가하여 저장 시 자동 보정을 활성화합니다.

{
    // Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
    "editor.formatOnSave": true,
    // Enable/disable default JavaScript formatter (For Prettier)
    "javascript.format.enable": false,
    // Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
    "prettier.eslintIntegration": true
}

You can also create a new file called .vscode/settings.json for per-project settings, to enforce it across all devs using VSCode.

아직 설치하지 않은 경우 VSCode에 ESLint를 설치하고 창을 다시 시작합니다.

code --install-extension dbaeumer.vscode-eslint

If you have Prettier installed on your project (in the NPM modules), you don't have to install the VSCode extension.

그게 다야!

저장하면 코드가 자동으로 다시 포맷됩니다. 더 중요한 것은 코드가 linter에 대해 실행되고 문제(포맷, prop 유형 부족 등)가 있는지 확인하는 것입니다. Mac에서 VSCode의 ESLint 디버거CTRL + T에서 이를 확인하여 터미널을 열고 문제 탭으로 이동할 수 있습니다.

도움이 되는 희망,
료

참고문헌

Workflow - Adding ESLint + Prettier to projects

Configure ESLint, Prettier, and Flow in VSCode for React Development

Airbnb ESLint config