깨끗한 React 코드를 쓴 ESLight를 찾아봤어요.
배경.
21개의 깨끗한 리액트 프로젝트의 최선의 실천'이라는 제목의 기사가 나왔다.
이 글에서 쓴 몇 가지 실천은 ESLin에서 자동으로 대응할 수 있다.
내가 지금 주목하고 있는 ESLight 규칙을 요약해 봅시다.
규칙 정보
plugin:react/recommended나 eslint:recommended에 포함된 규칙은 이미 사용한 적이 많은 것 같아서 설명하지 않으려고 했지만 소개가 틀렸다면 죄송합니다. (recommonded에 포함된 규칙을 자세히 조사하지 않았기 때문에 복습하는 것이 좋을 것 같습니다.)보도 중의 실천에 관하여
예를 들어'단편을 사용한다'는 실천에 관해서 나는 개인적으로 사람에 따라 다르다고 생각한다.원래 실천적 견해가 있는 부분에 대해서는 조사를 하지 않았다.
ESLit 규칙
JSX의 생략 형식 사용
BAD
return (
<Navbar showTitle={true} />
);
return(
<Navbar showTitle />
)
={true}는 생략할 수 있습니다.이쪽 규칙을 사용해.
'react/jsx-boolean-value': 'error'
eslint --fix={true}부분이사라진다.문자열 속성에는 대괄호가 필요하지 않습니다.
BAD
return(
<Navbar title={"My Special App"} />
)
return(
<Navbar title="My Special App" />
)
여기서 ESLit 규칙을 사용하면 중복된 파괄호를 삭제할 수 있습니다.
'react/jsx-curly-brace-presence': 'error',
시작 태그
BAD
<SomeComponent variant="stuff"></SomeComponent>
<SomeComponent variant="stuff" />
ESLit 규칙을 사용합니다.
'react/self-closing-comp': [
'error',
{
component: true,
html: true,
},
],
템플릿 상수 사용
가장 좋은 실천 방법은 문자열의 연결
+에서 사용하는 것이 아니라 템플릿 소양에서 하는 것이다.이것에 관해서는
prefer-template의 규칙이 있다.주의
그러나 이 규칙은 전환된 중괄호 안에서 여분의 공백 행위를 볼 수 있다.
// BEFORE
const hoge = 'hoge' + token;
// AFTER
const hoge = `hoge${ token}`;
// ---
// BEFORE
const hoge = 'hoge'+token;
// AFTER
const hoge = `hoge${token}`;
순서대로 가져오기
본 보도에 따르면 수입은 철칙이라고 다음 순서대로 적혀 있다.
import React처럼 소스 코드에서 직접 사용하는 것은 아니지만 import이 꼭 필요한 것을 말한다.ESLin의 책임과 의무 내에서 개관 여부를 읽는 것은 엄격할 수 있으나 아래의 규칙이 가까운 역할을 할 것이라고 생각합니다.
확실히 리드할 수 있는 건 맞지만 프로젝트 중간에 들어가면 차이가 크고, IDE에서 자동으로 eslint fix를 실행하면 답답하기 때문에 사용하더라도 초기 개발부터 들어간다.
기본 반환값 사용
BAD
const add = (a, b) => {
return a + b;
}
다음 규칙을 통해 설정할 수 있습니다.그렇긴 한데, 나중에 리턴에 고리 같은 걸 붙이려고 할 때 아우텍스에서 삭제되면 슬퍼요. 이것도 취향에 따라 정하는 거죠.
어셈블리 이름 지정
구성 요소를 파스카 상자로 명명하는 가장 좋은 실천
다음 규칙은 대응할 수 있다.이것도 의외로 Recommmmended에 들어가지 않았다.
따옴표
"JSX의 속성은 큰따옴표를 사용하고 다른 JS는 큰따옴표를 사용합니다."그렇게 말하지만 일반적인 JS에서 1인용 따옴표를 사용할지 안 할지는 내가 좋아하는 것 같다.나는 모든 것이 과장된 것이라고 생각하는 견해도 있다고 생각한다.
JSX에 사용된 따옴표의 경우 다음 규칙에 따라 따를 수 있습니다.
감상
의외로 recommmended에 들어가는 규칙이 없어도 있으면 도움이 되는 게 많아서 도움이 돼요.
여담
아래의 보도는 거의 여기까지 조사한 내용을 포함하고 있는데, 나는 이렇게 하는 것이 비교적 좋다고 생각한다.모르는 게 많네요.
여담2
이 보도는 매우 심각하다.
나는 모든 eslint 규칙을 일시적으로 ON으로 설정할 생각이 있다는 것을 처음 알았다.그거 재미있어요.
Reference
이 문제에 관하여(깨끗한 React 코드를 쓴 ESLight를 찾아봤어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/meijin/articles/clean-react-code-eslint-research텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
