노드버드 리뉴얼 강의 정리 #etc 번외 IDE 변경 및 prettier, eslint 설정 변경하기

jakeseo_me·2020년 7월 26일
0

노드버드리뉴얼

목록 보기
10/34

노드버드 리뉴얼 강의 정리 #etc 번외 IDE 변경 및 prettier, eslint 설정 변경하기

Prologue

노드버드에서 배운 지식들로 레퍼런스를 만들어보자.

주요 내용

IDE를 변경하게 된 이유

VSCode에서 typescript를 쓰는데 prettier 관련 버그가 있는건지 뭔지 모르겠지만, formatOnSave 과정에서 시간이 너무 오래 걸리는 버그가 있다.

stackoverflow와 github issues를 찾아다니며 어떻게든 해결해보려 했는데, 아무리 찾아봐도 해결책이 보이지 않는다.

그래서 그냥 IDE를 WebStorm으로 바꾸어봤는데, WebStorm은 확실히 버그 없이 잘 된다.

WebStorm 및 prettier, eslint 세팅 방법

eslint의 내용은 다음과 같다.

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module", // import export를 의미
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": [
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:react/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "plugins": ["@typescript-eslint", "import", "react-hooks"],
    "rules": {
        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
    }
}

prettier의 config 내용은 다음과 같다.

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
  bracketSpacing: true,
};

기존에 .prettierrc.js파일에 오타가 있었어서 제대로 안됐던 문제도 있다. 위와 같이 eslint와 prettier를 세팅하면 두개가 맞물려서 잘 된다.

그리고 prettier를 webstorm에서 적용하는 방법은

WebStorm > Preferences 탭에서 가능한데,

  1. Plugin 중 Save Actions 를 설치하여 다음과 같이 세팅해도 되고,

  1. Prettier 옵션 중에 아예 Run on save for files라는 옵션이 있어서 그걸 체크해도 되는 것 같다.

현재 나는 둘 다 체크했다.

이제 Typescript의 prettier도 잔렉 없이 잘 작동한다.

profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글