Next.js 프로젝트 (2) - VSCode 기초 설정(Prettier, ESLint..etc)

우선 React랑 살짝 다른게 React에서는 ESLint가 내장되어 있었지만 Next에서는 내장되어 있지 않았다..

따라서 ESLint, Prettier 를 설정해 주도록한다.! 당연.. 프로젝트 루트에서 설치!!

 

1. Prettier, ESLint 설치!!

$ yarn add prettier eslint --dev

$ yarn add --dev eslint-config-prettier eslint-plugin-prettier eslint-plugin-react

# prettier: 코드를 예쁘게 일관성 있게 정리해준다.

# eslint: 코딩 컨벤션 툴로.. 룰에 어것나는 것들은 경고, 에러를 발생 시켜 올바른 코딩을 할 수 있게 해준다.

# eslint-config-prettier: eslint의 포매팅 기능 off

# eslint-plugin-prettier: eslint에 prettier 포매팅 기능 on

# eslint-plugin-react: 리액트와 관련된 eslint 룰셋 기능 on

 

2. Prettier 설정

설정에는 다양한 옵션들이 있다. 특이한점은 루트 디렉토리에서 prettier 파일을 만들어줘야 동작한다.

루트에 ".prettierrc" 파일을 만들고 아래와 같은 옵션들을 취향에 맞게 명시한다.

{
  "trailingComma": "none", // array등에서 마지막 항목에 콤마를 붙일건지 말건지.. 안붙이게 설정
  "tabWidth": 2, // 탭 2칸
  "semi": true, // 세미콜론 있게 설정
  "singleQuote": true, // 따옴표
  "bracketSpacing": true, // 괄호 열었을때 공백 넣을지 여부
  "jsxBracketSameLine": true, // 멀티 라인에서 > 닫는부분을 < 와 맞출지 여부
  "printWidth": 200
}

프리티어 옵션 확인

 

3. ESLint 설정

린트 또한 프리티어만큼이나 옵션이 다양하다. 

린트 옵션 확인

Next에서는 parser부분에 bable-eslint 를 명시해줘야 에러 문구가 나타나지 않는다.

babel-eslint를 적용시키려면

$ yarn add babel-eslint --dev 

로 선 설치!!

옵션은 루트 디렉토리에서 ".eslintrc.json" 생성 후 아래 내용 입력!

옵션에 대한 속성들은 취향과 상황에 맞게 명시하면 된다.

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": [
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": ["error", {
      "endOfLine": "auto"
    }],
    "react/prop-types": "off",
    "no-var": "error",
    "no-dupe-keys": "error"
  }
}

 

4. VSCode 설정

우선 기본적으로 Prettier, ESLint 확장팩을 설치해야한다..( 확장팩 검색-> 별 많은거로 설치)

"editor.formatOnSave": false // Prettier를 사용하기 위해 VSCode 자체 포매팅 off
"editor.tabSize": 2          // 일단 에디터에도 탭 눌렀을 때 두 칸 설정ㅋㅋ 이유는 가독성면에서 좋음
//"eslint.autoFixOnSave": true => Deprecated 된 프로퍼티 로써 저장시 ESLint를 통한 자동 수정을 위해서
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } // => 로 대신 사용해야함
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue", "css"],
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  },
 "[javascript]": {  // javascript 의 기본 포맷터는 prettier, 저장시 포매팅
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
 },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }