ESLint와 Prettier 설정

Front-line-dev commented 3 years ago

💁 설명

VSCode에서 저장시 자동 바꿔주기 기능을 사용하기 위한 준비

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier 글로벌로 설치도 가능하긴 하다
VSCode 확장앱 ESLint, Prettier - Code formatter 설치

VSCode Workspace 설정 (한 사람이 하고 Git에 올리면 됨)

{
// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true
}
}

이 작업을 하면 .vscode 폴더에 settings.json이 생성되며 Git에 올리면 모든 사람들이 받아서 쓸 수 있다.

환경설정 만들기 (이 작업도 한 사람이 하면 된다)

npx eslint --init 하고 질문에 대답한다. (포맷은 JSON으로 한다)

prettier와 연결 시켜주기 위해 .eslintrc.json에 다음의 옵션을 추가한다

// 복붙하지 말고 중복된 부분을 찾아서 잘 이어줘야한다
{
"plugins": ["prettier"],
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"rules": {
"prettier/prettier": "error"
}
}

.prettierrc.json도 위와 같이 만들 수 있으나 미리 설정 된 파일을 수정하는게 더 빠르다

{
"printWidth": 100,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"semi": true,
"useTabs": false,
"arrowParens": "avoid",
"endOfLine": "auto"
}