eslint & prettier

eslint

자바스크립트 코드를 실행하지 않아도 정적 분석을 통해 문법 오류를 찾아준다
간단한 포맷팅기능도 있음

npm i -D eslint

 

prettier

포맷팅 중 하나
https://prettier.io/ 에서 install 명령어를 찾아 복사 실행시켜준다.

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

--save-dev -> -D와 동일
--save-exact -> package.json devDependencies에서 ^ 없이 설치를 의미
"^"의 의미는 패키지가 업데이트 할때 마이너 버전에 한해 업데이트를 허용
포맷팅이므로 버젼에 따라 기본 설정이 달라지므로 exact로 설치

  "devDependencies": {
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^3.4.1",
    "eslint": "^8.13.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "prettier": "2.6.2",
    "terser-webpack-plugin": "^5.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  }

 

---

npm i -D eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier → 둘 다 포맷팅 기능이 있으므로 겹치는 부분에서 eslint를 비활성화
eslint-plugin-prettier → eslint에 prettier의 포맷팅 기능을 추가

 

 .eslintrc.json 파일 생성

npx eslint --init

"extends": ["eslint:recommended", "plugin:prettier/recommended"], 추가

 .eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

 

eslint airbnb
"eslint airbnb"를 구글에 검색
구글 스타일도 있고 페이스북 스타일도 있음

.eslintrc.json에 extends에
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"eslint:recommended" -> "eslint-config-airbnb

---

. prettierrc.json 파일을 생성

prettier.io →  playground → 설정 입력 후 → 하단 copy config JSON → . prettierrc.json에 넣는다

https://prettier.io/playground/

Prettier

.prettierrc.json

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

 

.eslintrc.josn

"rules": {
"prettier/prettier": "error"
}

→ prettier rule을 이용

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:prettier"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

---

.eslintignore / .prettierignore 파일을 생성

→ eslint와 prettier를 제외할 폴더 파일을 지정한다.

/node_modules
/dist
webpack.config.js
readme.md

---

vscode에 extents 설치

ctr+shift+p
setting 입력
Preferences: Open Workspace Setting(JSON) 에 다음을 입력

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true

 

setting.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}