도구

ESLint

우리는 ESLint를 사용하여 프런트엔드 코드 표준을 캡슐화하고 강제합니다. 우리의 설정은 gitlab-eslint-config 프로젝트에서 찾을 수 있습니다.

Yarn 스크립트

이 섹션에서는 ESLint를 사용하여 파일을 유효성 검사하고 자동 수정을 적용할 수 있는 yarn 스크립트에 대해 설명합니다.

ESLint를 사용하여 git diff를 기반으로 모든 스테이징된 파일을 확인하려면 다음 스크립트를 실행하세요: 

yarn run lint:eslint:staged

찾은 문제 목록은 콘솔에 기록됩니다.

git diff를 기반으로 모든 스테이징된 파일에 자동 ESLint 수정을 적용하려면 다음 스크립트를 실행하세요: 

yarn run lint:eslint:staged:fix

수동 변경이 필요하면 변경 목록이 콘솔로 전송됩니다.

저장소의 특정 파일을 ESLINT로 확인하려면 다음 스크립트를 실행하세요 ($PATH_TO_FILE를 대체하세요): 

yarn run lint:eslint $PATH_TO_FILE

저장소의 모든 파일을 ESLint로 확인하려면 다음 스크립트를 실행하세요: 

yarn run lint:eslint:all

찾은 문제 목록은 콘솔에 기록됩니다.

저장소의 모든 파일에 자동 ESLint 수정을 적용하려면 다음 스크립트를 실행하세요: 

yarn run lint:eslint:all:fix

수동 변경이 필요하면 변경 목록이 콘솔로 전송됩니다.

경고: 전역 규칙 업데이트로 사용을 제한하세요. 그렇지 않으면 변경 사항이 거대한 병합 요청으로 이어질 수 있습니다.

새 파일에서 ESLint 비활성화

새 파일을 만들 때 ESLint를 비활성화하지 마세요. 기존 파일은 레거시 호환성으로 인해 기존 규칙이 비활성화되어 있지만 리팩토링 과정에 있습니다.

특정 ESLint 규칙을 비활성화하지 마세요. 기존 코드 모듈을 호출하는 경우에만 다음 규칙을 비활성화하세요. 기술 부채를 도입하지 않으려면 다음 규칙만 비활성화하세요.

이러한 규칙은 행별로 비활성화하세요. 이렇게 하면 나중에 리팩토링하기 쉬워집니다. 예를 들어, eslint-disable-next-line 또는 eslint-disable-line을 사용하세요.

단일 위반을 위한 ESLint 비활성화

단일 위반을 위해 규칙을 비활성화해야 하는 경우 필요한 최소한의 코드에 대해 비활성화하세요: 

// bad
/* eslint-disable no-new */

import Foo from 'foo';

new Foo();

// better
import Foo from 'foo';

// eslint-disable-next-line no-new
new Foo();

no-undef 규칙 및 전역 선언

결코 no-undef 규칙을 비활성화하지 마세요. 대신 /* global Foo */를 사용하여 전역을 선언하세요.

여러 전역을 선언할 때는 항상 각 변수마다 하나의 /* global [name] */ 줄을 사용하세요. 

// bad
/* globals Flash, Cookies, jQuery */

// good
/* global Flash */
/* global Cookies */
/* global jQuery */

import/no-deprecated를 사용하여 기능 폐기

우리의 @gitlab/eslint-plugin 노드 모듈에는 eslint-plugin-import 패키지가 포함되어 있습니다.

@deprecated 태그가 포함된 JSDoc 블록을 사용하여 기능을 폐기하는데 import/no-deprecated 규칙을 사용할 수 있습니다: 

/**
 * 검색 쿼리를 객체로 변환
 *
 * @param {String} query "document.location.search"에서
 * @param {Object} options
 * @param {Boolean} options.gatherArrays - 배열 값을 배열로 모으기
 * @returns {Object}
 *
 * ex: "?one=1&two=2"를 {one: 1, two: 2}로 변환
 * @deprecated 대신 `queryToObject`을 사용하세요. 자세한 내용은 https://gitlab.com/gitlab-org/gitlab/-/issues/283982를 참조하세요
 */
export function queryToObject(query, options = {}) {
  ...
}

강력히 권장하는 것은 다음과 같습니다:

  • 이 기능을 사용하려는 개발자를 위한 대체 경로를 제공하세요.
  • 마이그레이션 프로세스를 추적할 이슈에 대한 링크를 제공하세요.

참고: 포함된 파일에서 폐기된 기능을 가져오면 사용이 감지됩니다. 이 함수가 동일한 파일에서 사용될 때는 사용이 감지되지 않습니다.

이것을 수행한 후 $ yarn eslint를 실행하면 폐기된 사용 목록을 얻을 수 있습니다: 

$ yarn eslint

./app/assets/javascripts/issuable_form.js
   9:10  error  폐기됨: 대신 `queryToObject`을 사용하세요. 자세한 내용은 https://gitlab.com/gitlab-org/gitlab/-/issues/283982를 참조하세요  import/no-deprecated
  33:23  error  폐기됨: 대신 `queryToObject`을 사용하세요. 자세한 내용은 https://gitlab.com/gitlab-org/gitlab/-/issues/283982를 참조하세요  import/no-deprecated
...

이 규칙의 비활성화된 경우를 검색하여 폐기된 사용을 제거하는 작업 목록을 생성하여 이슈를 만들어 추적하여 폐기된 사용의 노력을 추적할 수 있습니다: 

$ grep "eslint-disable.*import/no-deprecated" -r .

./app/assets/javascripts/issuable_form.js:import { queryToObject, objectToQuery } from './lib/utils/url_utility'; // eslint-disable-line import/no-deprecate
./app/assets/javascripts/issuable_form.js:  // eslint-disable-next-line import/no-deprecated

vue/multi-word-component-names가 내 파일에서 비활성화되어 있음

단일 이름 컴포넌트는 Vue 스타일 가이드에서 권장하지 않습니다.

그들은 다른 HTML 컴포넌트와 혼동될 수 있기 때문에 문제가 될 수 있습니다: 우리는 컴포넌트를 <table>로 이름 짓을 수 있으며 HTML <table> 렌더링이 중지될 수 있습니다.

이를 해결하기 위해 필요한 최소한 두 단어를 사용하여 .vue 파일과 참조를 다시 이름 짓고, 예를 들어 다음과 같이 사용하세요:

  • user/table.vue를 user/user_table.vue로 이름을 바꿀 수 있으며 UsersTable로 가져오고 <users-table />로 사용할 수 있습니다.

GraphQL 스키마 및 작업 유효성 검사

우리는 GraphQL 스키마와 작업을 유효성 검사하기 위해 @graphql-eslint/eslint-plugin를 사용합니다. 이 플러그인은 제대로 기능하기 위해서 전체 스키마가 필요합니다. 로컬에서 ESLint를 실행할 때 최신의 스키마 덤프를 생성하는 것이 좋습니다. 이를 위해 ./scripts/dump_graphql_schema 스크립트를 실행하는 것이 좋습니다.

Prettier를 사용한 형식 지정

저희 코드는 Prettier를 사용하여 스타일 가이드를 준수하도록 자동으로 형식이 지정됩니다. Prettier는 표준 prettier 규칙에 따라 .js, .vue, .graphql, 그리고 .scss 파일의 형식을 지정합니다. 모든 Prettier 설정은 .prettierrc에서 찾을 수 있습니다.

편집기

Prettier를 워크플로에 포함하는 권장 방법은 선호하는 편집기(모든 주요 편집기가 지원됨)를 해당 설정에 맞게 설정하는 것입니다. 파일이 저장될 때마다 Prettier가 실행되도록 설정하는 것을 권장합니다. 선호하는 편집기에서 Prettier를 사용하는 방법에 대한 지침은 Prettier 문서를 참조하세요.

전역 Yarn 스크립트와 동일한 파일 유형만 Prettier가 형식을 지정하도록 허용하는지 주의하세요 (.js, .vue, .graphql, 그리고 .scss). 예를 들어, Visual Studio Code 설정 파일에서 파일 형식을 제외할 수 있습니다: 

"prettier.disableLanguages": [
    "json",
    "markdown"
]

Yarn 스크립트

다음은 전역 형식 지정에 사용할 수 있는 Yarn 스크립트입니다: 

yarn run lint:prettier:staged:fix

Prettier를 사용하여 git diff를 기반으로 모든 스테이징된 파일에 대해 필요한 변경 사항을 저장합니다. 

yarn run lint:prettier:staged

Prettier를 사용하여 git diff를 기반으로 모든 스테이징된 파일을 확인하고, 필요한 경우 수동으로 업데이트해야 하는 파일을 콘솔에 로깅합니다. 

yarn run lint:prettier

Prettier를 사용하여 모든 파일을 확인하고, 형식을 수동으로 업데이트해야 하는 파일을 콘솔에 로깅합니다. 

yarn run lint:prettier:fix

Prettier를 사용하여 리포지토리의 모든 파일을 형식 지정합니다.

VS Code 설정

기본 포매터로 Prettier 선택

포매터로 Prettier를 선택하려면 사용자 또는 워크스페이스 설정에 다음 속성을 추가하세요: 

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[graphql]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

저장 시 형식 지정

파일을 자동으로 Prettier로 형식을 지정하려면 사용자 또는 워크스페이스 설정에 다음 속성을 추가하세요: 

{
  "[html]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.formatOnSave": true
  },
  "[graphql]": {
    "editor.formatOnSave": true
  },
}