RECT 개발을위한 CODE를 설정하는 방법
- Lisa Kudrow원래의
- 2025-02-10 15:59:10978검색
효율적인 반응 개발을위한
이 기사에 나열된 도구와 기술은 몇 시간의 개발 작업을 절약 할 수 있습니다.이 시간은 많은 작지만 중요한 문제를 해결하는 데 낭비되었을 것입니다. 또한 코딩 오류를 줄이는 데 도움이 될 수 있습니다. 생산성 향상의 핵심은 가능한 많은 작업을 자동화하는 것입니다. 다음 확장 및 설정은이 목표를 달성하는 데 도움이됩니다.
키 포인트
jsx에 대한 Emmet 구성 : VS Code가 .js 파일을 반응 파일로 인식하거나 더 나은 EMMET 지원을 위해 .jsx로 이름을 바꾸어 HTML 코드 효율성을 향상시킵니다.
ESLINT와 함께 코드 품질 확인 : VS 코드와 통합하여 인코딩 오류를 실시간으로 강조하고 수정하여 모범 사례 및 깨끗한 코드 기반을 홍보합니다. 반응-특이 적 확장 사용 : ES7 React/redux/GraphQL/React-Native 스 니펫과 같은 확장은 즉각적인 코드 스 니펫을 제공하여 인코딩 속도를 향상시킵니다.
언어 지원- 다음은 환영 탭의 스냅 샷입니다. 언제든지 도움말 메뉴 아래에서 찾을 수 있습니다.
-
javaScript 언어 확장 환영 탭의 "도구 및 언어"섹션에서 JavaScript 링크를 클릭하여 설치하십시오. 새로 고침 프롬프트가 나타나고 새로운 기능을 발효하려면 클릭해야합니다. -
다음 수치는 Intellisense 및 자동 수입 실제 작업의 예입니다. -
JavaScript 언어 기능을 설치 한 후 VS 코드는 프로젝트의 루트 디렉토리에 jsconfig.json 파일을 제공하라는 메시지가 표시 될 수 있습니다. 이것은 필요하지 않지만이 파일을 설정하면 Intellisense가보다 정확한 팁을 제공하는 데 도움이됩니다. 다음은 샘플 구성입니다 -
typeScript 지원
크고 복잡한 반응 프로젝트를 구축 할 계획이라면 TypeScript를 사용하는 것이 좋습니다. 이는 TypeScript가 유형 안전을 제공하여 프론트 엔드 애플리케이션에서 오류 코드를 전달할 가능성을 줄이기 때문입니다. VS 코드는 많은 기능을 제공함으로써 상자 밖에서 TypeScript 언어 지원을 제공합니다 (예 : :: : : -
프로젝트에서 개발 의존성으로 더 예쁘게 설치하십시오 : NPM 설치 -Save Dev 더 예기 또는 원사 추가 -d 더 예쁘다. - 또는 또는 명령 NPM 실행 형식을 실행하여 더 예쁘게 실행할 수 있습니다.
이로 인해 Prettier의 기본 규칙과 .prettierrc 및 .editorconfig 파일에서 재정의하는 규칙에 따라 모든 파일이 올바르게 일관되게 재발하게됩니다. 라인 브레이크도 일관성을 유지합니다. 코드 형식이 이제 세 가지 위치에 있음을 알 수 있습니다. 우리가 충돌하는 규칙이 있다면 어떻게 될지 궁금 할 것입니다. 더 예쁘게 활성화 한 후 다음 우선 순위에 따라 이러한 규칙을 처리합니다. 더 예쁜 구성 파일 .EditorConfig - 모든 실제 개발자는 인터넷 어딘가에서 HTML 코드를 복사하여 React 코드에 붙여 넣는 것이 일반적이라는 것을 알고 있습니다. 일반적으로 HTML 속성을 유효한 JSX 구문으로 변환해야합니다. 다행스럽게도 HTML에서 JSX라는 확장 기능이있어 전환을 수행합니다. 설치 후 쉽게 할 수 있습니다
- (내용의 나머지는 원래 텍스트와 유사하지만 문구 및 문장 구조는 의사 원리의 목적을 달성하도록 조정됩니다. 이미지 형식을 변경하지 않음)
intellisense
-
자동 가져 오기
형식
또는 Compile Hero Pro Extension을 설치할 수 있으며, 이는 다음을 포함하여 TypeScript 및 기타 여러 언어를위한 컴파일러를 제공 할 수 있습니다.
jade
퍼그
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code> 흐름
Flow는 Facebook의 TypeScript 대안입니다. 동일한 기능을 제공하지만 React 프로젝트에서만 작동하며 그다지 인기가 없습니다. VS 코드는 기본적으로 지원하지 않지만 유량 언어 지원 확장을 설치할 수 있으며, 이는 IntelliSense 및 Renaming과 같은 제한된 수의 기능을 제공합니다.
(다음 부분은 원래 텍스트와 유사하지만 문구 및 문장 구조는 의사 원리의 목적을 달성하도록 조정되었습니다.)
키 매핑 설정
Emmet은 HTML 코드를보다 효율적으로 작성할 수있는 웹 개발 툴킷입니다. Emmet에 익숙하지 않은 경우 데모를 확인하여 작동 방식을 확인하십시오.
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>
eslint-config-airbnb
와 같은 다른 JavaScript 개발 도구에 문제가 발생하며, 이는 REACT 코드에 .jsx 파일 확장을 강요하는 규칙 세트가 있습니다. 나중에이 규칙을 비활성화하면 다른 문제가 발생할 수 있습니다.
형식 일관성 코드를 작성해야합니다. 개발자로서 우리는 인간이며 우리 자신을 위해 설정 한 표준을 잊기 쉽습니다. 이 섹션에서는 일관된 코드를 자동으로 작성하는 데 도움이되는 몇 가지 필수 도구에 대해 배울 것입니다.
이 명령을 스크립트 섹션에 추가하여
다음, 더 예쁘게 살펴 보겠습니다.
Pretier
대 코드가 더 예쁘게 사용하는지 확인하십시오. 다음과 같이 Settings.json을 업데이트하십시오
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>
.
위 내용은 RECT 개발을위한 CODE를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!