[eslint] setting eslint and autoFix on VSCode (no CRA)

[SoYoung210]

📘 Desc

eslint 설정으로 코딩 Formatting을 자동화 하고, 이를 저장할때마다 자동으로 고쳐주는 셋팅이다. CRA를 기반으로 설정할때에는 dependency들이 기본으로 설치되어 있는데, CRA없이 직접 셋팅하는 경우에는 plugin이나 config를 하나하나 잡아주어야 한다.

세 가지 오류를 겪었고 차근차근(..) 해결했다.

1. @typescript-eslint/no-angle-bracket-type-assertion' was not found.
2. ESLint couldn't find the plugin "eslint-plugin-flowtype"
3. Failed to load plugin '@typescript-eslint' declared in '.eslintrc': Cannot find module 'typescript' Referenced from ...

♻️env

다음과 같은 옵션에서 진행했다.

• React
• TypeScript
• vscode (auto fix 속성) , vscode eslint plugin(마켓)

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "extends": ["plugin:@typescript-eslint/recommended","react-app", "prettier"],
  "env": {
    "browser": true,
    "commonjs": true,
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "plugins": ["@typescript-eslint", "react-hooks", "simple-import-sort"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "padding-line-between-statements": [
      "error",
      { "blankLine": "always", "prev": "*", "next": "return" }
    ],
    "max-depth": ["error", { "max": 3 }],
    "no-unneeded-ternary": ["error", { "defaultAssignment": false }],
    "simple-import-sort/sort": "error",
    "sort-imports": "off",
    "import/order": "off",
    "semi": 2,
    "@typescript-eslint/no-angle-bracket-type-assertion": "off"
  }
}

기본적으로 react-app 과 prettier 를 extends 하도록 설정했고, 추가적으로 simple-import-sort 를 이용해서 import순서가 자동으로 정렬되도록하였다.

⚠️TS setting

📝 CRA에서 lint를 잡을때에는 없었던 설정이 몇가지 추가 되었다.

• "parser": "@typescript-eslint/parser",
• "plugins": ["@typescript-eslint"]

TS를 사용한다면 잊지말고 꼭 넣어주어야 정상 작동한다.

@typescript-eslint' 설정이 되어 있지 않아서 3번 오류를 첫번째로 만났고 이렇게 해결했다. (사실 이 단계에서는 바로 동작하지 않고, 몇 가지 더 설치해주어야 한다. )

🔗Peer Dependency?

아마도 peer dependency로 추측되는 것들 때문에 한동안 정상 작동하지 않았다. 위의 .eslintrc 를 정상 작동시키기 위한 package.json은 다음과 같다

  "devDependencies": {
    "eslint": "6.0.1",
    "eslint-config-prettier": "6.2.0",
    "eslint-config-react-app": "5.0.1",
    "eslint-plugin-flowtype": "4.3.0",
    "eslint-plugin-import": "2.18.0",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "2.0.1",
    "eslint-plugin-simple-import-sort": "4.0.0",
    "@typescript-eslint/eslint-plugin": "2.2.1-alpha.8",
    "@typescript-eslint/parser": "2.2.0",
    "prettier": "1.18.2"
  },

TIP 처음부터 필요할것 같아 얹은것은 아니고, eslint --debug filename.ts 옵션으로 검사를 돌려보면 어떤 플러그인이 누락되어 검사를 완벽히 수행할 수 없는지 알려준다.

🏃‍♀️ Formatting 자동화

이렇게 workspace root (depth가 있으면 안된다.) 에 setting.json 을 추가한다.

{
  "editor.formatOnSave": false,
  "javascript.format.enable": false,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [".html", ".ts", ".js", ".tsx"]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
}

prettier는 eslint에서 extends해주었으므로 formatOnSave 는 동작하지 않도록 막아주어야 한다.

Refer

jbee.io/ormatting-code-automatically/ https://github.com/typescript-eslint/typescript-eslint/issues/641

Plus..

typescript-eslint/eslint-plugin 의 정식버전에 버그가 있는것으로 보인다. carany 옵션으로 alpha 버전을 설치해주었다.