JavaScript 개발자 코스:코드 스타일 가이드
13493 단어 codereviewlintgithubcodequality
합작 개발 코드 시작 패키지^
개발자 여러분, 안녕하세요.
모든 것이 순조롭길 바랍니다!본고에서 나는 팀에서 일할 때 코드 작성의 일치성을 유지하기 위해 코드 양식과 품질을 유지하는 데 도움이 되는 도구를 소개할 것이다.
언뜻 보기에 코드 양식이 코드의 외관인 것 같다.하지만 멋진 변압기 하나로 말하자면,
"There's more to them than meets the eye" - Optimus Prime
코드 양식화는 또한 코드의 가독성과 해석성과 관련이 있다.우리 대다수 사람들은 코드를 작성하는 방식(빈칸의 수량, 함수를 정의하는 방식 등)이 있는데 우리는 본능적으로 식별하고 이해하기 쉽다.인코딩 스타일에 익숙하지 않은 구역에 던져지거나, 다른 인코딩 스타일의 혼합체로 보이는 코드 라이브러리가 있으면 처리하기 어렵다.우리는 종종 더 많은 시간을 들여 일을 설명하는데, 때로는 사람을 낙담하게 할 수도 있다.이것은 생산력을 심각하게 떨어뜨렸다.
인코딩 스타일은 언어 기반의 여러 가지 작은 결정으로 구성됩니다.
코드 스타일은 보통 모든 개발자에게 매우 개성화된 것이다. 왜냐하면 우리는 처음부터 끊임없이 무엇을 배우고 있기 때문에 어떤 것이 우리에게 가장 적합한가.그러나 코드의 일치성을 확보하기 위해 좋은 코드 가이드라인이 있다.
녀석들을 찾기 좋은 곳은
크리스토레스 / 좋은 매뉴얼
고품질 인코딩 스타일과 표준 리스트를 정성껏 기획한 것
좋은 매뉴얼
특정 프로그래밍 언어에 대한 안내서로 이 언어로 작성된 프로그램의 각 방면에 프로그래밍 스타일, 실천과 방법을 추천합니다.
기부를 환영합니다.투고하기 전에 contribution guidelines을 읽으세요.드래그 요청을 통해 링크를 추가하거나 문제를 만들어서 토론을 시작합니다.
컨텐트
프로그래밍 언어
얼간이
C
C#
C++
C++ Core Guidelines - C++ 인코딩에 대한 검증된 지도 방침, 규칙과 최선의 실천
크로줄
The Clojure Style Guide-Clojure 프로그래밍 언어의 커뮤니티 인코딩 스타일 가이드.
공공의 말투가 분명하지 않다.
D
The D …
이제 이 글로 돌아가면 코드 스타일을 유지하는 데 도움을 줄 수 있는 도구를 소개해 드리겠습니다.
1. 에스린
ESLint는 모든 자바스크립트 코드 라이브러리에서 매우 유명한 linter입니다.creat react 프로그램에서 생성된 항목에도 eslint 설정이 내장되어 있습니다.
Eslint는 다음과 같은 기능을 제공합니다.
프로젝트에서 ESLint를 활성화하려면 패키지 관리자(예: NPM 또는 Thread)를 사용하여 프로젝트에 패키지를 추가한 다음
eslintrc.json 파일을 정의해야 합니다.샘플
eslintrc.json은 다음과 같습니다.{
"env": {
"node": true,
"jest": true
},
"extends": ["airbnb-base", "plugin:jest/recommended", "plugin:security/recommended"],
"plugins": ["jest", "security"],
"parserOptions": {
"ecmaVersion": 2018
},
"rules": {
"no-console": "error",
"func-names": "off",
"no-underscore-dangle": "off",
"consistent-return": "off",
"jest/expect-expect": "off",
"security/detect-object-injection": "off"
}
}
2.prettierj
PrettierJS는 ESLint와 유사하며 둘 다 함께 사용할 수 있습니다.Prettier는 사용자가 정의한 규칙에 따라 코드 포맷 작업을 컴퓨터에 전달한다는 뜻의 코드 포맷 프로그램입니다.코드를 추상적인 문법 트리 (AST) 로 해석하고 AST를 예쁘게 출력해서 코드를 분석합니다.이것은 코드가 자동으로 저장된다는 것을 의미하며, '스타일 복구' 를 표시하는 제출 목록을 길게 만들 염려가 없습니다.
Prettier의 특징은 다음과 같습니다.
Prettier는 NPM 또는 실을 설치하여 프로젝트에 직접 사용할 수 있습니다.
package.json as에 유효한 스크립트로 Pretter를 추가할 수도 있습니다. "prettier": "prettier --check **/*.js",
"prettier:fix": "prettier --write **/*.js",
3 하스키
이것은 코드 스타일에 국한되지 않지만, 제출하기 전에 대부분의 작업을 자동으로 완성할 수 있기 때문에 포함해야 한다고 생각합니다.
개발자1: 약속하셨어요?
데이브2: 네, 그럼요. 그렇습니다.그 벌레를 못박아 죽였다
데이브 1: 다행이다!당신은 코드 스타일을 수정했습니까?
개발자2:...
하하, 이것이 바로 하스키다.🐶 화면에 나타나다.Husky 는 Git 작업에서 트리거하는 Git 갈고리를 구성하는 데 사용됩니다.예를 들어, 제출할 때 linting 오류를 복구하는 것을 잊어버리면, 제출할 때마다 코드 스타일을 자동으로 복구할 수 있도록 Git 갈고리를 설정할 수 있습니다.
Husky는 모든 Git 갈고리를 지원합니다. 패키지 관리자(예를 들어 NPM이나 Thread)를 사용하여 패키지를 프로젝트에 설치한 다음
huskyrc.json 파일을 정의해야 합니다.커밋 시 코드 스타일을 자동으로 설정하는 예제
huskyrc.json은 다음과 같습니다.{
"hooks": {
"post-checkout": "yarn",
"pre-commit": "prettier --check *.js",
"post-commit": "git status"
}
}
네, 저는 지금 여기까지 하겠습니다. 도움이 되었으면 좋겠습니다. 프로젝트에서 코드 스타일을 고수하는 사람들을 많이 볼 수 있을 것입니다. 왜냐하면 우리 대부분은 독학으로 인재가 된 개발자이기 때문입니다. 이것은 저에게 우스갯소리를 떠올리게 합니다.
영원히 기억하고
if (buildingAwesomeProject) {
setEquallyAwesomeCodingStyles(true);
}
평화와 안전✌️
너는 나의 개발 중에 나를 미행할 수 있다
제 Github@Vedant1202에서.
각주
Reference
이 문제에 관하여(JavaScript 개발자 코스:코드 스타일 가이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vedant1202/javascript-dev-lessons-code-styling-guide-18jm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
