eslint와 prettier 설정 관련 질문

예전에 여쭤보고 블로그들 찾아봐서 적용했는데 airbnb와 prettier를 같이 적용하면 에러가 제대로 안뜨고 엄격한 규칙이 제대로 적용이 안되는것같습니다.

아래 처럼 설정해 두었는데 어디를 수정해야지 airbnb eslint를 제대로 사용하면서 prettier까지 적용할 수 있을까요??

.eslintrc

{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"ignorePatterns": ["node_modules/"],
"extends": ["airbnb", "plugin:prettier/recommended"],
"plugins": ["import", "react-hooks", "prettier"],
"rules": {
"jsx-a11y/label-has-associated-control": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-console": "off",
"no-underscore-dangle": "off",
"react/forbid-prop-types": "off",
"react/jsx-filename-extension": "off",
"react/jsx-one-expression-per-line": "off",
"object-curly-newline": "off",
"linebreak-style": "off",
"no-param-reassign": "off"
}
}

.prettierrc

{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"endOfLine": "auto",
"jsxBracketSameLine": false
}

vscode에 settings.json

//화면크기에따라 줄바꿈 설정
"editor.wordWrap": "on",
//prettier 설정
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace",
"gitlens.codeLens.scopes": ["document"]
},

// For ESLint
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},

"launch": {
"configurations": [],
"compounds": []
},
// jsx 자동완성 추천
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
// jsx에서 html 자동완성 추천
"emmet.includeLanguages": {
"javascript": "html"
},
//import 변경 자동 수정
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.fontLigatures": null,
"workbench.colorTheme": "Material Theme Darker High Contrast"
}

인프런 커뮤니티 질문&답변