JS 예쁘게 만들기(ESlint, Prettier)

 

ESlint

ESLint - Pluggable JavaScript linter

• 소스코드를 분석해서 문법 에러, 버그를 찾고 보고해주는 도구
• ES6, React를 완벽하게 지원합니다.
• 초기구성 필요 / 조금 느리다

 

Prettier

Prettier · Opinionated Code Formatter

• 원래 스타일을 다 무시하고, 줄 길이를 고려해서 정해진 규칙대로 다시 써주는 것 (독재)

 

< 실행 >

 

1. Node.js 설치

https://urmaru.com/9

 

 

2. eslint 설치

$ npm install eslint --save-dev

• --save-dev ( -D ): 설치한 패키지 정보를 ./package.json 파일의 devDependencies 항목에 저장하며 npm install 할 때 해당 패키지가 같이 설치 된다.

 

 

3. prettier 설치

$ npm install prettier --save-dev --save-exact

• --save-exact: 버전이 달라지면서 생길 스타일 변화를 막기 위함

 

 

4. eslint, prettier 같이 쓰기 위한 설치

$ npm install eslint-plugin-prettier eslint-config-prettier --save-dev

• eslint-config-prettier: Prettier와 충돌할 설정들을 비활성화
• eslint-plugin-prettier: 코드 코맷할 때 Prettier를 사용하세 만드는 규칙을 추가한다.

 

 

5. VSCode에서 Setting

> 1. 확장 프로그램 설치

)

 

> 2. setting.json 설정

• Ctrl + , or Cmd + , 으로 들어간다. -> 빨간 쪽(setting.json) 누른다.
  • User: 모든 프로젝트에 적용
  • Workspace: 현재 프로젝트에 적용 (선호)

• setting.json이 열리면 해당 값 넣어준다.

{
  // Set the default
  "editor.formatOnSave": false,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}

 

 

5. .eslinrc.json 만들기(ESLint)

https://eslint.org/docs/rules/

$ npm install eslint-config-airbnb --save-dev //airbnb스타일 설치(google, airbnb등 여러가지 있다.)

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended", "airbnb-base"],
  "rules": {
    "prettier/prettier": "error"
  }
}

• env
  • 프로젝트의 사용 환경을 설정
• extends
  • 다른 ESLint 설정을 확장해서 사용
• parserOptions
  • ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 설정
• rules
  • 프로젝트에서 자체적으로 덮어쓰고 싶은 규칙을 정의할 때 사용

 

 

6. .prettierrc.json 만들기(Prettier)

https://prettier.io/docs/en/options.html

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

 

 

7. 엄청 나옵니다. ;;;;; + 자동 전체 완성

• VSCode에서 f1을 누릅니다. + ESLint: fix all auto-fixable Problems 을 클릭

 

• 추가로 밑의 자료 보면 자세히 나와 있으니 확인 해도 좋을 것 같습니다.
• 42의 norm보다 더 까다로워요 ;;;;

 

 

 

 

https://pravusid.kr/javascript/2019/03/10/eslint-prettier.html

 

ESLint(TSLint)와 Prettier 함께 사용하기(w/ VSCode) · ID PRAVUS

https://velog.io/@velopert/eslint-and-prettier-in-react

https://k39335.tistory.com/80

https://www.daleseo.com/js-eslint/

https://feynubrick.github.io/2019/05/20/eslint-prettier.html

https://velog.io/@recordboy/ESLint-Prettier-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

• 자동 완성

https://minjung-jeon.github.io/eslint-prettier-intellij/