eslint
JavaScript의 lint 중의 하나로 코드를 실행하지 않아도 정적분석을 통해 문법적 에러를 찾아 줍니다.
추가로, 간단한 포멧팅 기능도 있습니다.
prettier
코드 포멧터 중 하나입니다.
설치
npm i -D eslint입력하여 설치합니다.prettier를 설치하기 전에 홈페이지에 방문해봅니다.
설치 탭에서 npm 명령어를 확인해 봅니다.
npm install --save-dev --save-exact prettier
-D의 줄임말이--save-dev입니다. 그리고
여기서--save-exact이라는 못보던 옵션이 있습니다.
이--save-exact옵션은 이 옵션을 추가할 경우^캐럿 기호 없이 package.json에 버전이 기재됩니다.
npm install --save-dev --save-exact prettier를 입력하여 설치를 진행합니다.npm i -D eslint-config-prettier eslint-plugin-prettier를 입력하여 두 패키지를 설치합니다.
eslint와 prettier의 포멧팅이 겹치는 부분이 있어 충돌이 나는 부분이 있습니다.
그래서 eslint에서 prettier와 겹치는 포멧팅 룰들을 비활성화 해주는 것이eslint-config-prettier입니다.
eslint-plugin-prettier는 eslint에 prettier의 포멧팅 기능을 추가하는 패키지입니다.- eslint 설정파일을 초기화주겠습니다.
cmd 창에서npx eslint --init를 입력해줍니다.
설정하고 나면.eslintrc.json파일이 생성되었습니다. - 위에서 설치한
eslint-plugin-prettier를 사용하기 위해.eslintrc.json에서"extends"속성에 값을 추가해줍니다.
"extends": ["eslint:recommended", "plugin:prettier/recommended"],eslint:recommended는 eslint가 추천하는 룰을 사용한다는 의미입니다. airbnb스타일로 작업을 하고 싶다면,
"extends": ["eslint-config-airbnb", "plugin:prettier/recommended"],라고 입력하면 됩니다. 강의에서는 추천룰로 사용하겠습니다.
6. 최상위 경로에 .eslintignore 파일을 하나 만들겠습니다.
이 파일은 eslint의 룰을 적용하고 싶지 않은 경로나 파일, 파일 형식들을 입력하는 파일입니다.
/node_modules
/dist
webpack.config.js를 입력하여 제외시킵니다.
7. prettier를 설정해주는 파일을 만들겠습니다.
최상위 루트에 .prettierrc.json으로 만듭니다.
여기에 prettier 포멧팅 룰을 설정해주어야 합니다.
prettier홈페이지의 playground에서 기본 룰을 copy하여 붙여넣습니다.
{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false
}- prettier를 설정하지 않을 경로나 파일을 입력해줄
.prettierignore파일을 최상위에 만들어줍니다. 내용으로 아래를 입력합니다..eslintignore와 내용이 같습니다.
/node_modules
/dist
webpack.config.js- VCCode 확장프로그램에서 아래 3가지를 설치해줍니다.
- ESLint
- Prettier - Code formatter
- open in browser (TechER) : 마우스오른쪽 클릭으로 간단한 html문서 서버 열기 ctrl+shift+P에서 settings 검색하여Preferences: Open Workspace Settings (JSON)을 클릭합니다.
- 아래처럼 setting 해줍니다.
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave":{
"source.fixAll.eslint":true
}
}editor.formatOnSave :
- 저장 시 해당 파일 전체 포맷 여부.
- 해당 값 true로 설정 시 파일 저장하면 자동으로 포맷이 맞춰집니다.
- 프로젝트 상황에 따라서 false를 해야지 자동포맷이 되는 경우도 있습니다. 참고링크
editor.codeActionsOnSave :
- 저장시 수행동작 기능을 활성화 합니다.
source.fixAll.eslint :
- eslint의 룰대로 fix를 한다는 의미입니다.
- 설정이 끝나면 작성한 파일들에서 에러가 나옵니다. 저장하여 prettier와 eslint룰대로 수정하면 에러가 사라집니다.
- 마지막으로
.eslinttc.json에서 아래 내용을 추가합니다.
"rules": {
"prettier/perttier": "error"
}추가하면 eslint내에서 prettier 포맷팅 기능을 실행하게 해줍니다.
강의설치버전
참고
- 구글 검색창에
eslint airbnb입력하고 들어가면
airbnb 스타일의 가이드가 있습니다. 그 외 구글이나 페이스북 등 여러가지가 있습니다. 이런것들을 사용하기 위해서는 install을 해주면 됩니다.eslint:recommended는 eslint가 추천하는 룰을 사용한다는 의미입니다.
-
prettier 홈페이지의 playground에 들어가면 여러가지 룰들을 테스트해 볼 수 있습니다. 마음에 드는 룰을 완성하면 json형식으로 copy할 수 있습니다.
-
prettier 홈페이지의 Docs에서 Configuring Prettier의 Options에 보면 룰들이 어떤 의미를 가지는지 설명이 있습니다. 설정할 때 참고하면 좋습니다.
-
eslint 홈페이지에서 rule들을 확인할 수 있고, Demo탭에서
여러가리 옵션들을 직접 조합해 보고, .json 형태로 다운받을 수 있습니다. -
eslint와 prettier를 VScode에서 확장프로그램으로도 설치할 수 있습니다.
- ESLint
- Prettier - Code formatter
