VSCode 느려짐 현상 해결

2023. 2. 21. 11:56프론트엔드/VScode

반응형

느려짐 현상

어느순간부터 코드를 짜고 저장을 하면 VSCode가 느려지는 현상을 느낄수 있었다.

 

저장을 바로하지 않고 Prettier - Format save on 이라는 문구와 함께 로딩이 되는 현상이 나타났었다.

 

해결 방안

첫번째 도전 : 

 

처음에는 Next로 작업을 해서 그런가 싶어서 jsconfig.json을 만들어서 exclude 설정에 .next를 넣어줬었다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", ".next", "storybook", "coverage", "storybook-static"]
}

추가해줬지만 해결하지 못했다.

 

두번째 도전 : 

 

extension이 많으면 vscode 자체가 느려진다는 글을 봐서 extension을 정리하기로 했다.

옆에 블럭 표시를 누르면 나온다 이러한 창이 나온다

 

하지만 내가 쓰지 않는 익스텐션들을 하나하나 정리하고 저장해도 느려짐 현상은 여전했다.

 

세번째 도전 :

VScode에서  control + shift + P 를 입력한 후에 show running extensions를 누르면 내가 사용하고 있는 extension에 속도가 나온다.

 

그중에 오류가 나와 있는 extension이나 가장 오래 걸리는 extension을 사용 안함으로 하거나 삭제를 시켰다.

 

하지만 해결 하지 못했다.

 

네번재 도전 :

Prettier - Format save on 오류 이니까 extension에 prettier - Code formatter 가 있었다.

 

이놈 문제인가 하고 삭제를 했더니 Prettier - Format save on 가 사라졌다 !

 

그 후에는 로딩창도 안뜨고 next를 실행했을때도 빠르게 저장될 수 있었다.

 

하지만 자동완성도 안되고, prettier도 작동을 안했다..

 

다섯번째 도전 :

.eslintrc.json 파일을 수정해줬다. prettier가 eslint와 함께 작동 해서 느린건가 ? 라고 생각이 들었다.

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "extends": ["eslint:recommended", "prettier", "plugin:react/recommended", "plugin:prettier/recommended"],
  "plugins": ["import", "react-hooks", "prettier"],
  "rules": {
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/anchor-is-valid": "off"
  }
}

 

prettier를 plugins와 extends에 추가 해주니까 느려짐은 사라졌다.

 

아직 몇번 저장 안해봐서 잘 모르겠지만 하루정도 사용해보고 계속 느리다면 더 찾아볼 예정이다 ..

반응형

'프론트엔드 > VScode' 카테고리의 다른 글

vs code 꿀팁  (0) 2023.02.22