Tooling
ESLint
우리는 ESLint를 사용하여 프론트엔드 코드 표준을 캡슐화하고 강제합니다. 우리의 구성은 gitlab-eslint-config
프로젝트에서 찾을 수 있습니다.
Yarn Script
이 부분에서는 ESLint를 사용하여 파일을 유효성 검사하고 자동 수정을 적용하는 사용 가능한 yarn 스크립트에 대해 설명합니다.
모든 스테이징된 파일(기반 git diff
에 따름)을 ESLint로 검사하려면 다음 스크립트를 실행하세요:
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 from "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 Deprecated: Please use `queryToObject` instead. See https://gitlab.com/gitlab-org/gitlab/-/issues/283982 for more information import/no-deprecated
33:23 error Deprecated: Please use `queryToObject` instead. See https://gitlab.com/gitlab-org/gitlab/-/issues/283982 for more information import/no-deprecated
...
이 규칙의 비활성화된 경우를 찾아 이슈를 생성하고, 폐기된 사용의 노력을 추적할 수 있도록 하기 위해 grep를 실행하세요:
$ 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/users_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 Script
다음 Yarn 스크립트로 전역 형식화를 수행할 수 있습니다:
yarn run lint:prettier:staged:fix
모든 스테이징된 파일(기반 git diff
)을 Prettier로 업데이트하고 필요한 변경 사항을 저장합니다.
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
},
}