회사에서 사용하는 code의 eslint를 설정합니다.

Extension 설치하기

Prettier와 Eslint 를 설치합니다.

eslintrc.js .prettier 설정 수정

기존 eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
};

기존 .prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 160,
  "arrowParens": "avoid"
}

변경 eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    'prettier/prettier': ['error', { printWidth: 120 }], // 줄바꿈 120 적용을 위해 해당 부분 추가
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
};

변경 .prettierrc

{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 120,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

settings.json 설정

VS Code 의 환경 설정 (settings.json)
VS Code의 환경 설정메뉴로 들어가서 settings.json파일을 생성 합니다.

File > Preferences > Settings 접근(혹은 Ctrl + , )
Workspace탭 선택
Text Editor > Code Actions On Save 에서 Edit in settings.json을 클릭 합니다.
다음의 디렉토리 및 파일이 생성 됩니다.

• window 사용자: .vscode
• wsl 사용자
  디렉토리: C:Users\KYC\AppData\Roaming\Code\User\setting.json
• 파일: settings.json

환경설정 파일을 다음과 같이 설정 합니다.
아래 부분 한줄 추가 한 것입니다.

최초 settings.json

{
    "gitlens.hovers.currentLine.over": "line",
    "workbench.iconTheme": "material-icon-theme",
    "terminal.integrated.profiles.windows": {
        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell"
        },
        "Command Prompt": {
            "path": [
                "${env:windir}\\Sysnative\\cmd.exe",
                "${env:windir}\\System32\\cmd.exe"
            ],
            "args": [],
            "icon": "terminal-cmd"
        },
        "Git Bash": {
            "source": "Git Bash"
        },
        "Ubuntu (WSL)": {
            "path": "C:\\WINDOWS\\System32\\wsl.exe",
            "args": [
                "-d",
                "Ubuntu"
            ]
        }
    },
    "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)",
    "workbench.colorTheme": "Bearded Theme Coffee",
    "editor.codeActionsOnSave": {
        
    }
}

변경 settings.json

{
    "gitlens.hovers.currentLine.over": "line",
    "workbench.iconTheme": "material-icon-theme",
    "terminal.integrated.profiles.windows": {
        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell"
        },
        "Command Prompt": {
            "path": [
                "${env:windir}\\Sysnative\\cmd.exe",
                "${env:windir}\\System32\\cmd.exe"
            ],
            "args": [],
            "icon": "terminal-cmd"
        },
        "Git Bash": {
            "source": "Git Bash"
        },
        "Ubuntu (WSL)": {
            "path": "C:\\WINDOWS\\System32\\wsl.exe",
            "args": [
                "-d",
                "Ubuntu"
            ]
        }
    },
    "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)",
    "workbench.colorTheme": "Bearded Theme Coffee",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 저장을 누르면 자동으로 줄을 바꿔주겠다. 라는 설정
    }
}