[프론트엔드] 내가 보려고 쓰는 ESlint, Prettier 세팅

ESLint와 같은 Linter 는 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구

 

Prettier와 같은 Formatter는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구

 

 

• ESLint 설치
  1. ‘npm install -D eslint 명령어 입력
  • -D를 입력하는 이유는 devDependencies에 설치하기 위함 → 실제 프로덕션에는 필요없기 때문
  1. ‘npx eslint —init’ 명령어 입력
  • 각 프로젝트마다 eslint 설정
  1. ctrl+shift+p 입력해서 settings.json(User settings)에 들어가서 밑의 코드 입력

  "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"
      ],
  

  -> eslint config recommendation gist를 검색해서 사람들이 eslint rule을 어떻게 설정했는지 찾아보면 좋다!

 

 

• Prettier 설치 
  1. 명령어 ‘npm install —save-dev —save-exact prettier’를 입력해서 prettier를 설치한다.
  2. 명렁어 ‘npm install -D eslint-config-prettier’를 입력해준다.
  3. 명령어 ‘npx prettier . —write’를 입력한다.
  4. .prettierrc 폴더 생성 후 밑의 코드를 복붙한다.
  5. { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 100, "bracketSpacing": true, "arrowParens": "always", "endOfLine": "auto" }
  6. ESLint와의 충돌 방지를 위해 .eslintrc.js 파일에 extends : ‘prettier’를 추가해준다.(prettier를 마지막에 작성해줘야한다.)