ESLint와 같은 Linter 는 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구
Prettier와 같은 Formatter는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구
- ESLint 설치
- ‘npm install -D eslint 명령어 입력
- -D를 입력하는 이유는 devDependencies에 설치하기 위함 → 실제 프로덕션에는 필요없기 때문
- ‘npx eslint —init’ 명령어 입력
- 각 프로젝트마다 eslint 설정
- ctrl+shift+p 입력해서 settings.json(User settings)에 들어가서 밑의 코드 입력
-> eslint config recommendation gist를 검색해서 사람들이 eslint rule을 어떻게 설정했는지 찾아보면 좋다!"editor.fontFamily": "D2Coding ligature", "editor.lineHeight": 24, "editor.fontSize": 14, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.stylelint" : true, }, // terminal "terminal.integrated.lineHeight": 1.4, "workbench.iconTheme": "material-icon-theme", // eslint "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ],
- Prettier 설치
- 명령어 ‘npm install —save-dev —save-exact prettier’를 입력해서 prettier를 설치한다.
- 명렁어 ‘npm install -D eslint-config-prettier’를 입력해준다.
- 명령어 ‘npx prettier . —write’를 입력한다.
- .prettierrc 폴더 생성 후 밑의 코드를 복붙한다.
- { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 100, "bracketSpacing": true, "arrowParens": "always", "endOfLine": "auto" }
- ESLint와의 충돌 방지를 위해 .eslintrc.js 파일에 extends : ‘prettier’를 추가해준다.(prettier를 마지막에 작성해줘야한다.)
