ESLint

1. 포매팅
2. 문법수정

Prettier

포매팅 특화

ESLint 사용법

1. 사용할 파일이 이미 존재할때 (package.json과 .eslintrc.json등)
2. 처음부터 설치할 때

사용할 파일이 이미 존재할 때 ( eslint + prettier )

• package.json
• .eslintrc.js

• pacakge.json

{
  "scripts": {
    "start": "node main.js",
    "lint": "eslint *.js",
    "lint:fix": "eslint --fix *.js"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.0",
    "eslint-plugin-prettier": "^3.4.0",
    "prettier": "^2.3.2"
  }
}

• eslint와 prettier가 devDependencies에 존재하고
  scripts로 start / lint / lint:fix 3개가 존재한다.
• npm run start : main.js 코드를 실행시킨다.
  npm run lint : 모든 js파일의 eslint로 오류를 확인해준다.
  npm run lint:fix : 모든 js파일의 eslint 오류를 수정해준다.

• .eslintrc.js

// eslint + prettier 설정 참고 : https://pravusid.kr/javascript/2019/03/10/eslint-prettier.html

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['google', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {},
}

eslint에 extends 확장으로 prettier도 추가한다.

배포된 공유 설정 사용하기

• npm에 올라간 설정을 사용할 때는 다음과 같은 명령어로 패키지를 설치합니다.

$ npm install -D eslint-config-[설정 이름]

• 설치한 패키지를 프로젝트의 ESLint 설정 파일에서 extends 하면 공유한 설정이 적용됩니다.

{
"extends": ["설정 이름"],
}

즉, package.json에서 설치된 "eslint-plugin-prettier": "^3.4.0"를 통해 extends에 해당 prettier를 추가할 수 있다.

저장시마다 적용하기

intellij에 있는 eslint를 설치하고 settings -> Languages & Frameworks -> js->code quelity Tools
-> Eslint에서 manuaal EsLint configuration으로 ESLint package 추가

처음부터 설치할 때 (Vue관련)

1. npm i -D eslint eslint-plugin-vue
2. .eslintrc.json 파일 생성 및 작성
3. Eslint 패키지 intellij에서 설치
4. settings -> Languages & Frameworks -> js->code quelity Tools
   -> Eslint에서 manuaal EsLint configuration으로 ESLint package추가

• .eslintrc.json

{
  "env" : {
    "browser" : true,
    "node" : true
  },
  "extends" : [
    "eslint:recommended",
    "plugin:vue/vue3-recommended"
  ]
}

browser와 node를 true로 하지않으면 코드에서
browser는 window.addEventListener에서 window에 에러가 발생하고
node는 require에서 에러가 발생한다.