eslint-config-zum

코딩 컨벤션 지원을 위한 eslint 룰셋입니다 원본 notion 문서

프로젝트에 적용 방법

1. 패키지 설치

# eslint, typescript를 같이 설치해줍니다

# yarn
yarn add @zum-front-core/eslint-config-zum eslint@^7.2.0 typescript -D

# npm
npm i -D @zum-front-core/eslint-config-zum eslint@^7.2.0 typescript

2. eslint 설정 파일 생성

.eslintrc.js를 생성하고 언어에 따라 다르게 설정해줍니다

// TypeScript
module.exports = {
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname, // 모노레포에서 tsconfig파일을 못 찾는 경우 tsconfigRootDir 지정
  },
  extends: ['@zum-front-core/eslint-config-zum'],
};

// Vue
module.exports = {
  extends: ['@zum-front-core/eslint-config-zum/vue'],
};

3. env 적용(옵션)

런타임 환경을 지정해줍니다

https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments

// .eslintrc.js
module.exports = {
+ env: {
+   node: true,     // Node.js 글로벌 변수 추가
+   browser: true,  // 브라우저 글로벌 변수 추가
+   commonjs: true, // 웹팩 코드의 경우
+ },
  parserOptions: {
    project: './tsconfig.json',
  },
  extends: ['@zum-front-core/eslint-config-zum'],
};

4. prettier 적용(옵션)

prettier와 같이 사용하는 경우 추가 설정이 필요합니다.

4-1. 패키지 설치

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

4-2. prettier 설정파일 생성 (예시)

// .prettierrc
{
  "singleQuote": true,
  "printWidth": 110,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "arrowParens": "always",
  "endOfLine": "auto",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve"
}

4-3. eslint설정의 extends옵션 마지막에 plugin:prettier/recommended 추가

// TypeScript
module.exports = {
  parserOptions: {
    project: './tsconfig.json',
  },
- extends: ['@zum-front-core/eslint-config-zum'],
+ extends: [
+   '@zum-front-core/eslint-config-zum',
+   'plugin:prettier/recommended'
+ ],
};

// Vue
module.exports = {
- extends: ['@zum-front-core/eslint-config-zum'],
+ extends: [
+  '@zum-front-core/eslint-config-zum/vue',
+  'plugin:prettier/recommended',
+ ],
};

트러블 슈팅

• eslint 설정파일에서 The file must be included in at least one of the projects provided. 에러가 발생하는 경우
  • tsconfig에서 eslint파일을 포함하지 않아서 발생하는 문제. 일반적으로는 eslint용으로 따로 tsconfig파일을 하나 더 추가해준다. (관련링크)