Code Linter와 Code Formatter

✏️ 정의

• 코드 린터: 문법에서 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것이다.
  • 실행하는데는 문제가 없다.
  • eslint
    • 규칙으로는 import 순서, == 금지 등이 있을 수 있다.
    • eslint 자체에 Formatter 기능도 어느정도 가지고 있다.
• 코드 포메터: 코드를 보기 좋게 만들어주는 것이다.
  • prettier
    • 규칙으로는 띄어쓰기 2칸, 특정 길이가 넘어가면 줄바꿈 등이 있다.

🔎 eslint 설치 방법

• next.js는 package.json에 들어가보면 eslint가 이미 설치되어 있다.
• 따라서 따로 eslint를 설치하지 않고, 설정파일을 만드는 것부터 시작한다.
• 설치가 완료되면, eslintrc.json 파일이 생성된다.
• 그리고 파일을 열면 빨간줄이 생기는데, 이는 standard 규칙에 어긋났다는 뜻이다.

https://eslint.org/

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

npm init @eslint/config

실행하면 몇가지 질문이 나온다.

• How would you like to use ESlint ? -> eslint를 어떤 식으로 사용하지에 대한 질문
  • To check syntax, find problems, and enforce code style -> 문법 체크, 문제 찾기, 코드스타일 강제하기
• What type of modules does your project use? -> 자바스크립트 모듈을 어떤 것을 쓰고있는지에 대한 질문
  • Javascript modules (import/export)
• Which framework does your project use?
  • React
  • Vue.js
• Does your project use TypeScript?
  • Yes
• Where does your code run?
  • Brower
  • Node
• How would you like to define a style for your project?
  • Use a popular style guide
  • Answer questions about your style -> custom
• Which style guide do you want to follow?
  • Standard
• What format do you want your config file to be in? -> 설정 파일을 뭘로 만들지 물어보는 질문
  • Javascript
  • YAML
  • JSON
• Which package manager do you want to use? -> 어떤 패키지 매니저로 설치할지 묻는 질문
  • yarn
  • npm
  • pnpm

필요없는 규칙 제거 방법

• eslintrc.js에 들어가서 rules에 필요없는 규칙은 off 시켜준다.

// 필요없는 규칙은 off해서 꺼주세요
rules: {
    'react/react-in-jsx-scope': 'off',
		'react/prop-types': 'off'
 }

typescript와 연동

• eslintrc.js

parserOptions: {
    project: "**/tsconfig.json",