ESLint?
ECMAScript 코드에서 문제점을 검사하고 정정하는 도구
잠재적인 오류, 버그를 제거해 단단한 코드를 만드는 것이 목적
.eslintrc.js 파일로 규칙을 세팅할 수 있습니다.
(먼저 eslint를 npm으로 설치필요)
(npx eslint --init 로 쉽게 구성 가능)
Prettier?
프리티어는 이름과 같이 코드를 예쁘게 다듬는데 사용됩니다.
먼저 npm으로 prettierr 설치가 필요합니다.
예제 파일 (.eslintrc.js)
module.exports = {
env: { // 전역변수 사용설정
browser: true,
es2021: true,
node: true,
},
extends: ["eslint:recommended", "eslint-config-prettier"],
// eslint:recommended 미리세팅된 규칙모음
// eslint-config-prettier 프리티어와 충돌하는 린트규칙을 off 하는 역할
parserOptions: { // ESlint 사용을 위해 지원하는 javascript 옵션
ecmaVersion: "latest", // 사용하는 ECMAScript 버전
sourceType: "module", // parser의 export 형태 설정
ecmaFeatures: { // ECMAScript의 언어 확장 기능을 설정
globalReturn: 전역 스코프의 사용 여부 (node, commonjs 환경에서 최상위 스코프는 module)
impliedStric: strict mode 사용 여부
jsx: ECMScript 규격의 JSX 사용 여부
},
},
plugins: ["prettier"], // third-party 플러그인 사용지원
rules: { // 추가적인 규칙은 rules에 추가가능
"prettier/prettier": "error",
},
};위처럼 세팅하면 lint 실행만으로도 prettier도 실행되기 때문에
터미널에서 npx eslint app.js --fix 로 코드를 체크 및 수정까지 할 수 있지만
매번 하기 번거롭기때문에 자동화를 하게되는데
git hook을 이용한 방법과 vscode 에디터로 설정하는 방법이 있는데
vscode로 하는 방법이 더 간단하다고 생각되어 해당 방법으로 정리하겠습니다.
vscode에서 ESLint 익스텐션을 설치하고
vscode설정 창을 열면 아래 이미지와 같이 x닫기버튼 옆에
화살표A4용지 모양 아이콘을 클릭하면 setting.json 파일이 열립니다.
setting.json 파일에 아래와 같이 적용하면 eslint를 사용하고 저장시 ESLint로 코드를 정정 합니다!
{
"eslint.enable": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
devLog