프로젝트가 src 레벨에서 설정이 되어있을 때, 해당 프로젝트 코드를 clone하거나 fork해 작업하는 모든 작업자가 동일한 설정을 가지고 코드를 정리할 수 있기 때문이다.
-> 개발 툴의 종류와 환경에 영향을 받지 않고 프로젝트 소스 레벨에서 설정을 관리하는게 팀 내 관리 차원에서 생산성이 높아짐
npm i eslint --save-dev
npm i eslint-plugin-vue --save-dev
-> i
대신 install
사용해도 무방
npm i prettier --save-dev
npm i eslint-config-prettier eslint-plugin-prettier --save-dev // 이부분 추가
--save : package.json에서 dependencies에 추가되도록 조건 설정
--save-dev : package.json에서 devDependencies에 추가되도록 조건 설정
📌 이때, eslint의 버전이 v7이하
일 경우 prettier가 동시에 적용이 안되는 오류가 생길 수 있음
npm i --save-dev eslint@7 // 버전 v7 이상으로 변경
npm i --save-dev eslint-plugin-vue@8 // 버전 v8 이상으로 변경
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'eslint:recommended',
'plugin:prettier/recommended', // 이 부분 꼭 추가해야함!
],
parserOptions: {
parser: '@babel/eslint-parser',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'prettier/prettier': [ // prettier 룰 추가
'error',
{
singleQuote: true,
semi: true,
useTabs: true,
tabWidth: 2,
trailingComma: 'all',
printWidth: 80,
bracketSpacing: true,
arrowParens: 'avoid',
endOfLine: 'auto',
},
],
},
...
};
prettierrc
가 아닌 eslintrc
설정 파일에서 prettier를 설정해주는 이유
eslint가 먼저 우선시 되어야하기 때문
또한, prettier로 정리를 하면서 eslint로 룰까지 적용됨
(prettier를 통한 코드 정리와 동시에 eslint 에러까지 잡을 수 있음)
// settings.json
// 기본 포맷팅
"editor.defaultFormatter" : "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 자동 포맷팅 <- 이부분이 중요!
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
-> setting을 변경해주었지만 실시간 적용이 안된 경우, VSC를 종료 후 재시작을 해보세요!