45일차 프론트엔드 공부 - eslint, prettier

- 프론트엔드 공부 45일차 -

 

코드 린터 / 코드 포멧터

eslint / prettier

 

코드 린터 (eslint)

문법에서 오류는 아니지만, 에러로 약속하자고 규칙을 정하는 것

import 순서, == 금지, === 허용

 

코드 포멧터 (prettier)

코드를 보기 좋게 만드는 것

띄어쓰기 2칸, __길이 넘으면 줄바꿈

 

husky

소스코드를 커밋하기 전, 기존의 규칙을 지켜가면서 코딩을 진행하였는지 검증해주는 도구

규칙에 어긋나는 코드가 있으면 강제로 커밋을 거절한다.

 

eslint 설치법

터미널 창에 'npm init @eslint/config@latest' 입력

To Check syntax and find problem - JavaScript modules (import/export) - React - Yes - Browser - Yes - Yarn 선택

위 항목 과정 재현 시 eslint.config.mjs 파일이 생성된다.

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import eslintConfigPrettier from "eslint-config-prettier";

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  eslintConfigPrettier,

  {
    rules: {
     // 제외할 규칙 입력
    },
  },
];

 rules 부분에 제외할 규칙을 입력하면 해당 규칙은 제외하게 된다. 

"react/react-in-jsx-scope": "off",

위와 같은 형식으로 입력하면 된다.

 

이후 VSCode에서 ESLint extension을 설치해주면 규칙에 해당하지 않은 부분은 빨간 줄로 오류를 알려줄 것이다.

 

터미널 창에 npx eslint 입력 시 모든 파일에서 어떤 부분이 잘못이 있는지 체크해서 알려준다.

 

prettier 설치

터미널 창에 'yarn add --dev --exact prettier' 입력하여 prettier 설치

이후 node --eval "fs.writeFileSync('.prettierrc','{}\n')" 입력하여 설정파일을 생성한다.

설치된 파일에 코드 정렬 규칙을 생성하면 된다.

 

자동으로 prettier 설정하는 법

최상단에 .vscode 폴더 생성 

폴더 안에 settings.json 파일 생성

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

settings.json 파일에 위 코드 입력

 

ESLint 와 Prettier 연결

터미널 창에 npm install --save-dev eslint-config-prettier 입력

eslint.config.mjs 파일 안에 

import eslintConfigPrettier from "eslint-config-prettier";

export default [
  eslintConfigPrettier,
];

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

 

이후 VSCode에서 'Prettier' extension을 설치해주면 된다.