FlowForge(GTDList) 03-30 일지 ESLint과 초기 기동

 

본인은 이 로고에 대해 소유를 포함한 그 어떠한 권리를 갖고 있지 않음을 밝힙니다.

 

 처음으로 ESLint를 이용해 보았다!

이걸 이용할 생각이 처음부터 있었던 것은 아니다. 단순히. ts 확장자나. js확장자를 붙이지 않아서 제대로 import가 안 되는 문제가 생겼고, 그래서 해결 방법을 찾다가 Linting을 해서 코딩을 더 깔끔하게 하기로 마음먹었다. ts에다가 yarn까지 써서 좀 복잡해진 김이 있지만, 다행히 그렇게 어렵진 않았다.

 

1. eslint 설치

yarn add --dev eslint eslint-config-love eslint-plugin-import eslint-plugin-typescript @typescript-eslint/parser

내가 바라는 import구문 강제를 위해서 추가적인 plugin을 설치한다. 최종 사용자는 굳이 필요 없으므로 --dev옵션을 주었다.

2. init

./node_modules/.bin/eslint --init

꼭 node_moudles 안에 있는 걸 건드리지는 않아도 되지만, 나는 이렇게 했다.

3. eslint.json설정

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
    	//chatgpt가 잘못 짚은 부분 1
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
    "@typescript-eslint",
    "import"
    ],
    "rules": {
    	//chatgpt가 잘못 짚은 부분 2
        "@typescript-eslint/no-unused-vars": "off",
        "import/extensions": ["error", "ignorePackages"]
    },
    "settings": {
    "import/resolver": {
        "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
        }
    }
    }
}

나는 이렇게 설정했다. 처음에는 ChatGPT로 어떻게 짜는지를 물어봤는데, 너무 오래된 코드라서 extends부분과 rules부분이 제대로 설정되어있지 않았다. 그래서 --init 후에 생성된 파일과 합치고 고 칠부분은 고쳤다.

 

결국 이 2개의 파트가 제일 중요했다.

{
	...
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
	...
    "rules": {
        "@typescript-eslint/no-unused-vars": "off",
        "import/extensions": ["error", "ignorePackages"]
    },
	...
}

 

import/extensions에서는 2개의 변수를 설정해야하는데

 

1.

첫번째는 severity, 심각도이다. 현재는 "error"로 설정되어있다. "info"같이 강제도를 낮추는 옵션도 있다.

 

2.

두번째는 어떻게 import구문을 강제할지에 대한 옵션인데, "always", "never", "ignorePackages"옵션이 있다.

"always"는 언제나 .js, .ts등의 파일 확장자를 붙이도록 강제하고,

"never"는 반대로 언제나 붙이지 않도로 강제하고,

"ignorePackages"는 확장자를 붙이게 하지만 이미 만들어진 라이브러리의 경우는 그렇지 않게 하도록하는 옵션이다.

결국은 3번째꺼 쓰면 된다.

 

4. script 등록(package.json)

 "scripts": {
    "start": "tsc && npx tsx src/index.ts",
    "check": "yarn run eslint . --ext .ts"
 },

 

근데 정작 tsx로 런타임을 바꿨는데 그냥 돌아가버리는 바람에 lint를 계속한 것이 큰 의미는 없어진 듯하다... 

그래도 eslint는 앞으로도 계속 쓸 것 같았기 때문에(gdsc-client, 그냥 내가 최근에 코드를 읽어보고 있는 곳이라 생각하면 될 듯하다.) 미리 공부했다고 생각하면 나쁘지는 않은 것 같다. 이젠 command line에서도 문법검사를 할 수 있다니 좋은 세상이다.