프론트엔드 개발환경의 이해와 실습 3

3️⃣

🖥 린트(Lint)

4 - 1. ESLint


// .eslintrc.js
module.exports = {
    rules : {
        "no-unexpected-multiline" : "error"
        // 위의 규칙과 어긋나는게 있다면 "error" 를 반환
    }
}

//app.js
console.log()
(function() {})()


// .eslintrc.js
module.exports = {
  extends: ["eslint:recommended"],
  // 규칙들 중 왼쪽 체크된 규칙들을 모두 사용할수있음
};


기본값

4 - 3. ESLint(풀이)

4 - 4. 프리티어


// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "eslint-config-prettier"],
    // recommended 설정들 중에 prettier와 겹치는게 있다면 꺼버리는 설정
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
};
// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "eslint-config-prettier"],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    // 추가되는부분
    plugins: [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    }
};
// .eslintrc.js
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

4 - 7. 자동화

// package.json
  "husky": {
    "hooks": {
      "pre-commit": "echo \"이것은 커밋전에 출력됨\""
      // 커밋되기전에 위의 메세지가 출력된다.
    }
  }

   아래와 같이 수정했다.
"husky": {
    "hooks": {
      "pre-commit": "eslint src/app.js --fix"
    }
  }
// package.json
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix"
  }


// - 설정 settings.json
"editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },