0w0

eslint와 prettier 사용기

글에 이어 쓰는 eslint/prettier

동기

요건에 eslint와 prettier 사용을 필수로 하기에 이번 기회에 기록한다.

시작

.eslintrc.json

  "extends": [
    // "next/core-web-vitals",
    "eslint:recommended",
    "next",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": "2015",
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"
  }

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all"
}

취향에 맞게 설정

.prettierignore

# Ignore artifacts:
build
coverage
out
.next
node_modules

next는 build 하면 .next, export하면 out 생성되므로 이를 무시

vsc 확장 기능 사용 시 설정

여담으로 vsc 사용할 때도 적는다.

vsc 세팅

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.lineNumbers": "on",
  "editor.rulers": [80],
  "editor.wordWrap": "on",
  "eslint.packageManager": "yarn",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "npm.packageManager": "yarn",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

package.json

// ..
"scripts:"
    // ..
  "lint": "next lint --fix",
  "format": "prettier --write ."
// ..

결론

git

이제 세팅(...) 마쳤으니 프로젝트 시작

읽을거리