[CloseSea] eslint, prettier 설정

개발을 하던 중간 서로 prettier의 설정이 달라 코드 정렬이 계속 달라졌다.

이를 해결하기 위해 eslinit와 prettier로 작업영역의 코드스타일을 통일 시키려고 했다.

루트 폴더구조

루트폴더

/.vscode/setting.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.workingDirectories": [{ "mode": "auto" }]
}

.vscode 폴더에 들어있는 setting.json은 루트 폴더 작업영역내의 설정을 해주는 것이다.

 

"editor.codeActionsOnSave": {
    "source.fixAll": true
},

저장을 할때마다 formatter규칙에 따라 format을 해준다는 설정이다.

"eslint.workingDirectories": [{ "mode": "auto" }]

eslint를 적용할 폴더를 루트폴더로 설정한다.

 

프론트

/front/.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard",
    "plugin:prettier/recommended"
  ],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks"],
  "rules": {
    "prettier/prettier": ["warn", { "endOfLine": "auto" }],
    "react/prop-types": "off"
  }
}

/front/babel.config.json

{
  "presets": ["@babel/preset-react"]
}

/front/.prettierrc

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false
}

/front/jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src", "src/image"]
}

리액트 루트 경로를 src로 설정하여 import 시 경로를 깔끔하게 하기 위해 설정했다.