VS Code의 ESLint 확장과 Prettier 확장 간의 충돌 에러를 위해 내가 해본 것들

1. VS Code 설정 세팅 수정 

settings.json 

파일 찾는 방법

VS Code의 settings.json 파일은 사용자 설정 또는 작업 영역 설정에 위치할 수 있습니다.

사용자 설정 (User Settings):

Windows: %APPDATA%\Code\User\settings.json
macOS: $HOME/Library/Application Support/Code/User/settings.json
Linux: $HOME/.config/Code/User/settings.json

사용자 설정은 VS Code의 모든 인스턴스에 적용됩니다.
작업 영역 설정 (Workspace Settings):

작업 영역 설정은 프로젝트의 루트 디렉토리에 .vscode 폴더 내에 settings.json 파일로 저장됩니다.
예를 들어, 프로젝트의 루트 디렉토리가 C:\myproject인 경우 작업 영역 설정 파일의 경로는 C:\myproject\.vscode\settings.json입니다.

작업 영역 설정은 해당 특정 프로젝트에만 적용되며 사용자 설정보다 우선합니다.

VS Code 내에서 settings.json 파일에 액세스하는 방법:

Ctrl+Shift+P (Windows/Linux) 또는 Cmd+Shift+P (macOS)를 눌러 명령 팔레트를 엽니다.
"Preferences: Open Settings (JSON)"을 검색하고 선택합니다.
사용자 설정 또는 작업 영역 설정을 선택합니다.

선택한 settings.json 파일이 VS Code 편집기에서 열립니다. 이 파일에 설정을 추가하거나 수정할 수 있습니다. 변경 사항을 저장하면 VS Code가 자동으로 새로운 설정을 적용합니다.

{
  "workbench.iconTheme": "vscode-icons",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "tabnine.experimentalAutoImports": true,
  "workbench.editorAssociations": {
    "*.class": "default",
    "*.png": "imagePreview.previewEditor",
    "{git,gitlens}/*/*/*.{md,csv}": "default"
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.python",
    "editor.formatOnType": true
  },
  "explorer.confirmDelete": false,
  "git.autofetch": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "git.suggestSmartCommit": false,
  "blockman.n01LineHeight": 0,
  "workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#1073cf2d",
    "editor.lineHighlightBorder": "#9fced11f"
  },
  "editor.wordWrap": "off",
  "diffEditor.wordWrap": "off",
  "editor.guides.indentation": false,
  "editor.guides.bracketPairs": false,
  "editor.inlayHints.enabled": "off",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "java.home": "C:\\Program Files\\Eclipse Adoptium\\jdk-17.0.1.12-hotspot",
  "git.confirmSync": false,
  "DockerRun.DisableAutoGenerateConfig": true,
  "redhat.telemetry.enabled": true,
  "cloudcode.duetAI.project": "centum-community",
  "cmake.configureOnOpen": true,
  "prisma.showPrismaDataPlatformNotification": false,

  // 추가된 ESLint 및 Prettier 설정
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "prettier.eslintIntegration": true
}

해당 부분을 추가 하면 됩니다. 

  // 추가된 ESLint 및 Prettier 설정
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "prettier.eslintIntegration": true
}

 

2. 우선 TSLint를 제거하고 ESLint를 설치해야 합니다. VS Code 터미널에서 다음 명령을 실행하세요:

npm uninstall tslint
npm install eslint --save-dev

3. 그런 다음 프로젝트에 필요한 ESLint 관련 패키지를 설치하세요 : 

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-config-prettier

4. .eslintrc.js 파일에 다음 내용을 추가하여 Prettier 관련 설정을 포함시키세요

module.exports = {
  // ... (기존 내용 유지)
  rules: {
    // ... (기존 내용 유지)
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'all',
        endOfLine: 'auto'   // 이 부분이 lf로 되어있다면 auto로 변경 

      },
    ],
  },
};

5. package.json 파일의 "scripts" 섹션에 다음 내용을 추가하세요:

"scripts": {
  // ... (기존 내용 유지)
  "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
  "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\""
},

6. tsconfig.json 파일에서 "enableTsLint": true 옵션을 제거하세요.

7. VS Code를 재시작하세요.

이제 프로젝트에서 TSLint 대신 ESLint와 Prettier를 사용하도록 구성되었습니다. 파일을 저장할 때 ESLint와 Prettier가 자동으로 코드를 검사하고 수정할 것입니다.

명령줄에서 다음 명령을 실행하여 수동으로 린팅과 포맷팅을 수행할 수도 있습니다:

• 린팅: npm run lint
• 포맷팅: npm run format

여기 까지 하고 나니 에러 메세지가 사라 졌다.

다들 한번 시도해보세요