Eslint-config-hs NPM

Heunsig ESLint

Heunsig ESLint

목표

ESLint 룰을 적용하여 코드 품질을 향상
잘못된 Javascript, Typescript 코드 사용으로 Runtime 오류가 나는 것을 방지
같은 프로젝트를 하는 모든 개발자들이 일관된 코드 스타일로 개발
너무 자유롭지도 너무 엄격하지도 않은 중간 단계의 ESLint 룰을 적용
Prettier 를 사용을 제한하고 ESLint 만 사용 (Prettier룰과 ESLint룰 충돌 발생 때문)

빠른 시작

이 ESLint 설정은 package.json의 type이 module인 경우를 기준으로 합니다. module이 아니라면 CommonJS 설정을 참고하세요.

공통 설정

package.json 에 eslint 룰 체크 및 수정을 위한 script 를 등록 합니다.

"scripts": {
  "lint": "eslint . -c eslint.config.js --fix"
}

환경별 설정

프로젝트의 환경을 선택하세요.

Javascript
Typescript
Vue3
Vue3 + Typescript
Nuxt3

Javascript

NPM

npm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin eslint-config-hs

PNPM

pnpm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin eslint-config-hs

YARN

yarn add --dev globals eslint @eslint/js @stylistic/eslint-plugin eslint-config-hs

eslint.config.js를 root 디렉토리에 생성 후 아래 내용을 입력하세요.

import globals from 'globals';
import config from 'eslint-config-hs/js';

export default [
  {
    languageOptions: {
      globals: globals.browser,
    },
  },
  ...config,
];

Typescript

NPM

npm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin typescript-eslint eslint-config-hs

PNPM

pnpm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin typescript-eslint eslint-config-hs

YARN

yarn add --dev globals eslint @eslint/js @stylistic/eslint-plugin typescript-eslint eslint-config-hs

eslint.config.js를 root 디렉토리에 생성 후 아래 내용을 입력하세요.

import globals from 'globals';
import config from 'eslint-config-hs/ts';

export default [
  {
    languageOptions: {
      globals: globals.browser,
    },
  },
  ...config,
];

Vue3

NPM

npm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin eslint-plugin-vue eslint-config-hs

PNPM

pnpm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin eslint-plugin-vue eslint-config-hs

YARN

yarn add --dev globals eslint @eslint/js @stylistic/eslint-plugin eslint-plugin-vue eslint-config-hs

eslint.config.js를 root 디렉토리에 생성 후 아래 내용을 입력하세요.

import globals from 'globals';
import config from 'eslint-config-hs/vue';

export default [
  {
    languageOptions: {
      globals: globals.browser,
    },
  },
  ...config,
];

Vue3 + Typescript

NPM

npm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin typescript-eslint eslint-plugin-vue eslint-config-hs

PNPM

pnpm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin typescript-eslint eslint-plugin-vue eslint-config-hs

YARN

yarn add --dev globals eslint @eslint/js @stylistic/eslint-plugin typescript-eslint eslint-plugin-vue eslint-config-hs

eslint.config.js를 root 디렉토리에 생성 후 아래 내용을 입력하세요.

import globals from 'globals';
import config from 'eslint-config-hs/vue-ts';

export default [
  {
    languageOptions: {
      globals: globals.browser,
    },
  },
  ...config,
];

Nuxt3

NPM

npm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin typescript-eslint eslint-plugin-vue eslint-config-hs

PNPM

pnpm install --save-dev globals eslint @eslint/js @stylistic/eslint-plugin typescript-eslint eslint-plugin-vue eslint-config-hs

YARN

yarn add --dev globals eslint @eslint/js @stylistic/eslint-plugin typescript-eslint eslint-plugin-vue eslint-config-hs

eslint.config.js를 root 디렉토리에 생성 후 아래 내용을 입력하세요.

import globals from 'globals';
import config from 'eslint-config-hs/nuxt';

export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      },
    },
  },
  ...config,
];

IDE 설정 (선택 사항)

VSCode 설정

파일 저장 시 자동 포맷팅 설정

VSCode에서 설정한 eslint 룰을 기반으로 파일 저장 시 자동 포맷팅을 하기 위해서는 먼저 eslint extension을 설치해야 합니다. 설치 완료 후 .js, .ts, .vue 파일 저장 시 자동 포맷팅 기능을 활성화 하기 위해선 VSCode 설정이 필요합니다.

VSCode 전체 설정
File > Preferences > Settings > Open Settings (JSON)에서 아래의 옵션을 설정합니다.

특정 프로젝트에만 설정
프로젝트 루트 폴더 내의 .vscode/settings.json 파일에 아래의 옵션을 설정합니다.

{
  "[vue]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

.js, .ts, .vue에 한해 기본적으로 eslint의 자동 포멧팅 툴을 사용할 것이므로, 해당 파일들의 기본 포맷터를 dbaeumer.vscode-eslint로 설정합니다. 그리고 editor.codeActionsOnSave의 source.fixAll.eslint 설정을 explicit로 설정하여 파일이 저장될 때마다 eslint가 자동 포맷팅을 수행하도록 합니다.

포맷팅 단축키 설정

파일 저장 시 자동으로 포맷팅을 원하지 않는 사용자는, VSCode의 단축키 설정을 변경하여 포맷팅을 수동으로 실행할 수 있습니다. 먼저 VSCode에서 F1을 누르고 ESLint: Fix all auto-fixable Problems를 검색 하세요. 그런 다음 Configure Keybinding 아이콘을 클릭하여 VSCode 단축키 설정 페이지로 이동합니다. 여기서 ESLint: Fix all auto-fixable Problems Command를 더블 클릭하여 원하는 키 설정을 할 수 있습니다.

CommonJS 사용 시 설정

이 eslint 설정은 module 타입의 프로젝트를 기준으로 작성되었습니다. 만약 module 타입을 사용할 수 없는 상황이라면 몇 가지 설정을 변경해야 합니다.

eslint.config.js 파일을 eslint.config.mjs로 변경하세요.
package.json의 scripts에서 lint 스크립트를 아래와 같이 수정하세요.
```
  "scripts": {
     "lint": "eslint . -c eslint.config.mjs --fix"
  }
```