기본설정

https://poiemaweb.com/eslint
https://baeharam.netlify.app/posts/lint/Lint-ESLint-+-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

ES Lint

# $ npm init -y
$ npm i -D eslint

$ node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Node
? What format do you want your config file to be in? JavaScript
Successfully created .eslintrc.js file in /temp/learn-eslint

Prettier, ES Lint 통합

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

eslintrc.json

{
  "extends": ["plugin:prettier/recommended"]
}

.prettierignore

node_modules
package - lock.json;

---

휴... 설정이 모두 완료되었다.
...라고 생각했는데
왠걸 ts 파일에 import문에 죄다 빨간 밑줄이 그어져 있었다.

에러슈팅

unable to resolve path to module '모듈 경로/모듈 명'.
eslint(import/no-unresolved)

src경로를 인식하지 못해서 발생한 것 같아서
계속 eslint-import-resolver 설정만 고쳐봤는데
안 되서 구글을 뒤지다가

https://chinsun9.github.io/2021/08/29/tsconfig-baseUrl-eslint/

이 글을 발견했다.

결론은
eslint-import-resolver-typescript 가 또 있고
이걸 설치하고 설정을 잡아주면 된다는 것이다.

npm i -D eslint-import-resolver-typescript

eslint.json 수정

{
  // ...
  "parserOptions": {
    // ...
    "project": "./tsconfig.json"
  },
  // ...
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

https://github.com/import-js/eslint-plugin-import/issues/1485#issuecomment-535351922

이제 경로 인식이 잘 된다.

기타 추가설정

• @typescript-eslint/no-unused-vars

‘@typescript-eslint/no-unused-vars’: [
‘error’,
{ ignoreRestSiblings: true, argsIgnorePattern: ‘‘, varsIgnorePattern: ‘‘ },
],

이건 프로젝트가 좀더 진행된 다음에 하는 것이 좋겠다.

• simple-import-sort/imports

• @typescript-eslint/naming-convention

eslint.json 수정

'@typescript-eslint/naming-convention': [
      'error',
      {
        format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
        selector: 'variable',
        leadingUnderscore: 'allow',
      },
      { format: ['camelCase', 'PascalCase'], selector: 'function' },
      { format: ['PascalCase'], selector: 'interface' },
      { format: ['PascalCase'], selector: 'typeAlias' },
    ],

전체 코드

{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "es2019": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": ["./tsconfig.json"],
    "sourceType": "module",
    "ecmaVersion": "latest"
  },
  "globals": { "_": true },
  "plugins": ["html", "import", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "airbnb-base",
    "plugin:import/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "no-console": "warn",
    "no-plusplus": "off",
    "no-shadow": "off",
    "vars-on-top": "off",
    "no-underscore-dangle": "off",
    "comma-dangle": "off",
    "func-names": "off",
    "prefer-template": "off",
    "no-nested-ternary": "off",
    "max-classes-per-file": "off",
    "consistent-return": "off",
    "no-restricted-syntax": ["off", "ForOfStatement"],
    "prefer-arrow-callback": "error",
    "require-await": "error",
    "arrow-parens": ["error", "as-needed"],
    "no-param-reassign": ["error", { "props": false }],
    "no-unused-expressions": [
      "error",
      {
        "allowTernary": true,
        "allowShortCircuit": true,
        "allowTaggedTemplates": true
      }
    ],
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "max-len": [
      "error",
      {
        "code": 120,
        "ignoreComments": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true
      }
    ],
    "import/order": [
      "error",
      {
        "groups": [["builtin", "external"], "internal", ["parent", "sibling"], "index"],
        "newlines-between": "always",
        "pathGroups": [
          {
            "pattern": "@/**",
            "group": "internal",
            "position": "after"
          }
        ]
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "js": "never",
        "mjs": "never",
        "jsx": "never"
      }
    ],
    "import/prefer-default-export": "off",
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "format": ["camelCase", "UPPER_CASE", "PascalCase"],
        "selector": "variable",
        "leadingUnderscore": "allow"
      },
      { "format": ["camelCase", "PascalCase"], "selector": "function" },
      { "format": ["PascalCase"], "selector": "interface" },
      { "format": ["PascalCase"], "selector": "typeAlias" }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

---

참고

https://eslint.org

https://poiemaweb.com/eslint

https://www.daleseo.com/js-eslint/
https://www.daleseo.com/js-prettier/
https://www.daleseo.com/eslint-config/

https://medium.com/@_diana_lee/default-export%EC%99%80-named-export-%EC%B0%A8%EC%9D%B4%EC%A0%90-38fa5d7f57d4