eslint, prettier

ESlint가 검사하는 항목

1. 코드 포매팅 : 일관된 코딩 컨벤션을 유지

2. 코드 품질 : 잠재적인 오류나 버그를 찾아줌.

 

ESlint는 노드 패키지로 제공되므로 npm 명령어 필요.

ESlint는 rules라는 규칙이 필요.

 

 

npm init -y

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

npm i -D eslint prettier

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

npm i -D eslint-plugin-node eslint-config-node

npx install-peerdeps --dev eslint-config-airbnb

 

sudo npm i -g eslint

 

eslint --init

npm i stylelint stylelint-config-standard

.eslintrc.js 혹은 .eslintrc.json 설정

.stylelintrc.js 설정

.prettierrc.js 설정

 

 

 

 

.eslintrc.json 예시

{
    "extends": ["airbnb", "prettier:prettier/recommended","plugin:node/recommended"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error",
        "no-unused-vars": "warn",
        "no-console": "off",
        "func-names": "off",
        "no-process-exit": "off",
        "object-shorthand": "off",
        "class-methods-use-this": "off",
        "no-extra-semi":"error"
    }
}

 

.stylelintrc.js 예시

module.exports = {
  extends: ["stylelint-config-standard"],
  rules: {
    "selector-list-comma-newline-after": "always-multi-line", // 콤마로 연결된 선택자 자동 개행 취소
    "selector-list-comma-space-after": "always-single-line", // 콤마로 연결된 선택자의 콤마 뒤 스페이스
    "alpha-value-notation": "number", // 퍼센트 값이 아닌 넘버값으로
    "rule-empty-line-before": "never", // 규칙 앞에 빈줄 금지
    "declaration-block-semicolon-newline-after": "always", // 속성값 선언 후 개행
    "comment-empty-line-before": null, // 주석 앞에 빈 줄 요구 취소
    "block-closing-brace-newline-before": "always-multi-line", // 블록의 닫는 중괄호 앞에 줄 바꿈
    "block-no-empty": null, // 빈 블록을 허용하지 않음
    "max-line-length": null, // 선의 길이를 제한
    "property-no-vendor-prefix": null, // vendor-prefix 허용
  },
};

 

.prettierrc.js 예시

module.exports = {
  printWidth: 100, // 프린터가 줄 바꿈할 줄 길이를 지정
};