코딩 지침을 구현하는 방법

코딩 지침은 여러 기여자가 있는 코드베이스를 일관되고 깨끗하며 읽기 쉽고 오류 발생 가능성이 적은 코드베이스를 만드는 데 중요한 부분입니다. 하지만 어떻게 하면 쉽게 따라갈 수 있고 모든 사람이 충족하는지 어떻게 확인할 수 있을까요?

이에 대한 답은 텍스트 편집기/IDE 설정, 포맷터 및 린터입니다. 가장 일반적인 것을 포함하여 다양한 도구가 있습니다.

EditorConfig(코드 편집기/IDE 설정)

프리티어(포매터)

ESLint(자바스크립트 린터)

스타일린트(CSS 린터)

EditorConfig

EditorConfig는 코드 편집기/IDE에서 파일에 대한 몇 가지 기본 설정을 정의합니다. 파일을 생성하거나 저장할 때 적용됩니다.

샘플 .editorconfig 파일:

root = true

[*.{js,scss}]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

일부 코드 편집기/IDE에서는 설정을 활성화하려면 플러그인을 설치해야 합니다. 자세한 내용은 https://editorconfig.org/#download을 참조하십시오.

더 예뻐

Prettier는 HTML, CSS, JavaScript, Markdown 등을 위한 독창적인 코드 포맷터입니다. 저장할 때 포맷하도록 설정할 수 있어 매우 유용합니다.

독단적이므로 포맷터의 모든 세부 사항을 조정할 수는 없지만 사용 가능한 설정은 대부분의 최신 프로젝트에 충분합니다. 자세한 내용은 https://prettier.io/docs/en/options.html을 참조하십시오.

ESLint

ESLint는 독단적인 JavaScript linter이므로 모든 규칙을 조정할 수 있습니다. JavaScript에서 코드 오류를 확인하지만 스타일 문제를 확인하는 옵션도 있습니다. 모든 규칙을 조정해야 하는 대규모 또는 레거시 프로젝트에 적합한 옵션입니다.

설정하는 동안 몇 가지 질문이 있습니다.



자세한 내용은 https://eslint.org/을 참조하십시오.

스타일린트

Stylelint는 독단적인 CSS 린터입니다. ESLint와 유사하게 모든 규칙을 조정할 수 있으며 CSS에서 코드 오류를 확인하지만 스타일 문제에 대한 옵션도 있습니다. ESLint와의 차이점은 오류를 자동으로 수정할 수 없다는 것입니다.

자세한 내용은 https://stylelint.io/을 참조하십시오.

결론

처음에는 항상 EditorConfig를 사용할 수 있으며 Prettier와 같은 포맷터를 사용하여 빠르고 "일체형"솔루션을 원하는지 또는 ESLint와 같은 린터의 모든 세부 사항을 편집할 수 있는지 여부를 결정하는 것은 사용자의 몫입니다. 및 Stylelint(코드 오류에 대한 보푸라기 포함).