🧐 Eslint 와 Prettier를 왜 써야하는가?
이번 프로젝트를 시작하면서 초기 환경 설정에 진심으로 공부해보고 싶었다. 코드를 작성하거나 협업을 할때 이유 모르는 error가 발생하거나 코드의 일관성이 사라져 가독성이 낮아지는 경우가 있습니다. 이런경우 규칙과 코드의 문제를 잡아주는 도구 lint 와 코드의 스타일을 잡아주는 prettier를 사용함으로써 코드의 품질과 깔끔함 코드를 작성하고 협업에 도움을 줄 수 있습니다.
✨ Eslint 설치
npm install eslint --save-dev or npm install -D eslint +추가 vscode 확장프로그램 eslint도 설치해주자
npm option
npm -D === --save-dev
devDependencies에 패키지를 등록. 개발 단계에서만 사용하는 의존성 모듈을 정의하고 설치한다.
💡 Eslint 초기화(간편한 환경설정)
npx eslint --init
선택지가 나온다, 원하는 선택지를 선택하면 된다.
✔ How would you like to use ESLint?
✔ What type of modules does your project use?
✔ Which framework does your project use?
✔ Does your project use TypeScript?
✔ Where does your code run?
✔ How would you like to define a style for your project?
✔ Which style guide do you want to follow?
✔ What format do you want your config file to be in?
✨ root 디렉토리에 .eslintrc.js 파일 생성
js 이외에도 JSON, YAML 파일 형식도 지원한다.
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended'
],
plugins: ['react'],
rules: {
ex)
'react/jsx-filename-extension': [ 1,
{
extensions: ['.js', '.jsx'],
}
}
env: 실행환경을 설정extends: 설정 파일을 확장, airbnb 등 추가 시킬 수 있다.plugin: 확장 개념rules: 상세한 규칙을 설정 할 수 있다.rule의 첫번째 배열 값에 따라 설정의 사용 할수 있다.off,0: 설정 끄기warn,1: 경고error,2: 에러 발생
이와 같은 양식으로 작성한다.
✨ .eslintignore 파일 추가
eslint가 적용되지 않았으면 하는 파일을 작성한다.
build
dist
public
✨ eslint에 prettier 추가
npm install -D eslintnpm install -D eslint-config-prettier eslint-plugin-prettier
✔ eslint-config-prettier
eslint와 prettier간 충돌 나는 규칙을 비활성해주는 eslint 설정 'prettier'를 extends에 마지막으로 추가해주어야한다.
{
"extends": [
"some-other-config-you-use",
"prettier"
]
}
✔ eslint-plugin-prettier
prettier 규칙 생성 eslint 플러그인
eslint-plugin-prettier 설정 방법
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
위와 같은 방법으로 설정이 가능하지만 모두 포함되어있는 방법이 있습니다.
{
"extends": ["plugin:prettier/recommended"]
}
✨ root 디렉토리에 .prettierrc.js 파일 생성
prettier 규칙을 생성한다.
module.exports = {
// 화살표 함수의 매개변수 표시 형태
arrowParens: 'always',
// 브라켓 한줄 사용 여부
// 마지막 '>'를 다음줄로 내릴지 여부
bracketSameLine: false,
// 객체 선언시 괄호 양 끝 사이의 공백 사용여부
bracketSpacing: true,
// 파일 안에 또다른 형식의 코드에도 Prettier를 적용할지 여부
embeddedLanguageFormatting: 'auto',
// html의 공백을 처리하는 방법
htmlWhitespaceSensitivity: 'css',
// 미리 정의된 @format marker의 사용 여부 (v1.8.0)
insertPragma: false,
// jsx에서 홀따옴표 사용여부
jsxSingleQuote: false,
// 코드가 보여지는 너비
printWidth: 80,
proseWrap: 'preserve',
// 객체의 속성을 표현할때, 따옴표를 적용하는 조건
// "as-needed" : 필요한 경우에만 객체에 따옴표
// "consistent" : 하나라도 따옴표가 필요하다묜 모든속성에 따옴표
quoteProps: 'as-needed',
// 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
requirePragma: false,
// 세미콜론 사용여부
semi: true,
// 큰따옴표 대신 작은 따옴표 사용 여부
singleQuote: true,
// 들여쓰기 간격
tabWidth: 2,
// 후행 쉼표의 사용조건
// 배열의 요소와 객체 타입의 속성을 나열하는 경우에, 맨 마지막 요소 뒤에 쉼표를 입력할지를 결정합니다.
trailingComma: 'es5',
// 탭을 사용할지 여부
useTabs: false,
};
✨ .prettierignore 파일 추가
prettier 가 적용되지 않았으면 하는 파일 추가
node_modules
dist
✨ 자동 수정 설정
ctr + shft + p
setting.json - 파일에서 설정 변경
// 프리티어 자동 수정
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
// 저장시 자동 변경
"editor.formatOnSave": true
// eslint 자동 수정
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
✨ airbnb 규칙 추가하기
eslint-config-airbnb-base - airbnb-bnb 패키지
1️⃣ npx install-peerdeps --dev eslint-config-airbnb-base
종속 되어있는 모든 패키지가 설치된다.
npm info "eslint-config-airbnb-base@latest" peerDependencies 의존하는 패키지 정보를 볼수있다.
💡airbnb 가 아닌 airbnb-base 선택한 이유
eslint-config-airbnb에 포함되어 있는 패키지 : eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y
eslint-config-airbnb-base 에 포함 되어 있는 패키지 : eslint, eslint-plugin-import
airbnb에 포함되어 있는 eslint-plugin-jsx-a11y 는 접근성을 위한 패키지지만 불필요한 오류가 대부분의 rule을 'off' 해주었기 때문에 제외시키며 기본적인 airbnb-base를 선택하였습니다. 부수적인 패키지는 따로 설치해 주었다.
2️⃣ eslintrc.js 폴더에 아래 옵션을 추가해주면 된다.
"extends": "airbnb-base"
✨ Reference
prettier 설정 설명
DaleSeo eslint
velopert eslint
배하람 eslint helloinyong npm - eslint-config-airbnb npm - eslint-config-airbnb-base npm - eslint-plugin-prettier GitHub - eslint-config-prettier