[JS]ESLint&Prettier

1.ESList

• Javascript의 스타일 가이드를 따르지 않거나 문제가 있는 부분을 찾아주고 일관된 코드를 작성할 수 있도록 도와줌
• node.js환경에서 사용가능

[ESList 설치]

1. npm 또는 yarn을 이용하여 설치
   (npm install eslint --save-dev) or (yarn add eslint --dev)
2. 구성 파일 설정
   npx eslint --init
   eslint초기화 실행 시 옵션 설정 가능

? How would you like to use ESLint? · problems
? Which framework does your project use? · react
? Does your project use TypeScript? · No / Yes
? Where does your code run? · browser, node
? What format do you want your config file to be in? · JavaScript
? Would you like to install them now with npm? · No / Yes

=> 설정이 모두 끝나면 .eslintrc.js파일 생성
상황에 따라 옵션 추가 가능[ESLint사이트 참조]

[VScode와 함께 이용하기]

확장 프로그램 ESLint를 설치하면 바로 사용 가능

=> 설정 내용대로 자동으로 수정하기위해서는 VScode에 가서 옵션 추가 필요

// settings.json
  "editor.codeActionsOnSave": { // 저장 버튼 누르면 자동으로 eslint의 규칙되로 변경
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "html"],
  "eslint.alwaysShowStatus": true

2. Prettier

-사용자의 옵션에 따라 코드 스타일을 맞춰줄 수 있음

[Prettier 설치]

1) VScode 확장 프로그램을 이용해 설치2) npm으로 설치(npm install --save-dev --save-exact prettier)

-.prettierrc파일 생성 => 기본적인 옵션포함

{    
    "singleQuote": "true",

    "semi": "true",

    "useTabs": "false",

    "tabWidth": 2,

    "trailingComma": 'all',

    "printWidth": 80,

    "arrowParens": 'avoid',

    "endOfLine": "auto",
}

• VScode 전역에서 사용하기 위해서는 Setting.json에서 아래 항목 추가 필요

 "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

---

공부하며 작성하고 있는 블로그입니다.
잘못된 내용이 있을 수 있으며 혹시 있다면 댓글 달아주시면 감사하겠습니다 😊