RECT 개발을위한 CODE를 설정하는 방법-JS 튜토리얼-php.cn

How to Set Up VS Code for React Development 효율적인 반응 개발을위한 React Developer는 REACT 코드를 효율적으로 쓸 수있는 코드 편집기가 필요합니다. VS 코드의 시장에는 개발 워크 플로우를 개선하는 데 도움이되는 수천 개의 무료 확장이 있습니다. 이 기사는 React 인코딩 효율을 전문 수준으로 가져올 확장 및 설정에 중점을 둘 것입니다.

기사에 나열된 확장자 중 일부는 반응 별이 아니지만 효율성과 인코딩 속도를 향상시킬 수 있습니다. 실제로, 매일 코딩에 실제로 유용한 확장 장치는 몇 가지뿐입니다.

이 기사에 나열된 도구와 기술은 몇 시간의 개발 작업을 절약 할 수 있습니다.이 시간은 많은 작지만 중요한 문제를 해결하는 데 낭비되었을 것입니다. 또한 코딩 오류를 줄이는 데 도움이 될 수 있습니다. 생산성 향상의 핵심은 가능한 많은 작업을 자동화하는 것입니다. 다음 확장 및 설정은이 목표를 달성하는 데 도움이됩니다.

키 포인트

vs 코드에서 JavaScript 언어 확장 설치 : IntelliSense, 코드 스 니펫 및 자동 가져 오기와 같은 기능을 제공하여 React 개발 효율성을 향상시킵니다.

대규모 프로젝트에 TypeScript 사용 : 유형 안전을 제공하고 오류를 줄이며 복잡한 React 애플리케이션에 중요합니다. vs 코드는 TypeScript 컴파일러가 포함되어 있지 않습니다.

jsx에 대한 Emmet 구성 : VS Code가 .js 파일을 반응 파일로 인식하거나 더 나은 EMMET 지원을 위해 .jsx로 이름을 바꾸어 HTML 코드 효율성을 향상시킵니다.

더 예쁘고 EditorConfig를 사용한 일관된 서식 : CODE CORMATTING을 자동화하여 React Code Base를 일관성있게 유지하는데, 이는 협업 프로젝트에 중요합니다.

ESLINT와 함께 코드 품질 확인 : VS 코드와 통합하여 인코딩 오류를 실시간으로 강조하고 수정하여 모범 사례 및 깨끗한 코드 기반을 홍보합니다. 반응-특이 적 확장 사용 : ES7 React/redux/GraphQL/React-Native 스 니펫과 같은 확장은 즉각적인 코드 스 니펫을 제공하여 인코딩 속도를 향상시킵니다.

언어 지원

Code 대 코드를 처음 설치할 때 TypeScript 및 JSX 코드에 대한 JavaScript 구문 강조 및 지원과 같은 많은 상자 기능을 제공합니다.

다음은 환영 탭의 스냅 샷입니다. 언제든지 도움말 메뉴 아래에서 찾을 수 있습니다.

여기에서 초기 설정을 수행해야합니다. 우리의 초점은 React이므로 JavaScript 언어 확장을 설정하여 시작하여 코딩 효율 워크 플로우에 필수적인 추가 기능을 제공합니다.

javaScript 언어 확장 환영 탭의 "도구 및 언어"섹션에서 JavaScript 링크를 클릭하여 설치하십시오. 새로 고침 프롬프트가 나타나고 새로운 기능을 발효하려면 클릭해야합니다.

JavaScript Language Extension은 다음을 포함한 다양한 기능을 제공합니다.

intellisense 코드 스 니펫 JSDOC 지원

hoom 정보

이러한 기능의 전체 목록과 문서는 VS 코드 문서에서 찾을 수 있습니다. 개발 워크 플로에서 사용하는 방법을 이해하려면 각 기능을 읽는 것이 좋습니다.

다음 수치는 Intellisense 및 자동 수입 실제 작업의 예입니다.

탭 키를 누르면 헤더 구성 요소가 상단으로 가져옵니다. 엔딩 기호를 입력해야하며 코드는 다음과 같이 자동으로 완료됩니다.

JavaScript 언어 기능을 설치 한 후 VS 코드는 프로젝트의 루트 디렉토리에 jsconfig.json 파일을 제공하라는 메시지가 표시 될 수 있습니다. 이것은 필요하지 않지만이 파일을 설정하면 Intellisense가보다 정확한 팁을 제공하는 데 도움이됩니다. 다음은 샘플 구성입니다

위의 구성은 JavaScript 언어 서버에 소스 코드에 속하는 파일과 어떤 파일이 속하지 않은지 알려줍니다. 이렇게하면 언어 서비스가 소스 코드 만 분석하므로 성능이 빠릅니다. 전체 구성은 여기에 문서화되어 jsconfig.js에서 사용할 수있는 모든 가능한 값을 설명합니다.

typeScript 지원 크고 복잡한 반응 프로젝트를 구축 할 계획이라면 TypeScript를 사용하는 것이 좋습니다. 이는 TypeScript가 유형 안전을 제공하여 프론트 엔드 애플리케이션에서 오류 코드를 전달할 가능성을 줄이기 때문입니다. VS 코드는 많은 기능을 제공함으로써 상자 밖에서 TypeScript 언어 지원을 제공합니다 (예 : :: : :

구문 및 시맨틱 하이라이트 intellisense 코드 스 니펫 js doc 지원

hoom 정보 및 서명 도움말

형식 JSX 및 자동 폐쇄 태그

전체 목록은 여기에 문서화되어 있습니다. TypeScript를 사용하는 경우 JSX 코드는 .tsx 파일 확장자와 함께 작성됩니다. 컴파일 후 출력은 확장자 .jsx와 파일을 생성합니다.

대 코드는 TypeScript 컴파일러를 제공하지 않습니다. 다음과 같이 Global Node.js 환경에 하나를 설치해야합니다.

또는 Compile Hero Pro Extension을 설치할 수 있으며, 이는 다음을 포함하여 TypeScript 및 기타 여러 언어를위한 컴파일러를 제공 할 수 있습니다. How to Set Up VS Code for React Development

적은 Sass, scss 스타일러스

jade

퍼그

확장자는 TypeScript 및 스타일 코드를 작성하는시기 및 방법 측면에서보다 구성 가능한 옵션을 제공합니다. React and TypeScript 설정에 대해 자세히 알아 보려면보다 자세한 설명을 보려면 다른 기사 인“Typecript : 모범 사례”를 확인하는 것이 좋습니다.

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

로그인 후 복사

흐름 Flow는 Facebook의 TypeScript 대안입니다. 동일한 기능을 제공하지만 React 프로젝트에서만 작동하며 그다지 인기가 없습니다. VS 코드는 기본적으로 지원하지 않지만 유량 언어 지원 확장을 설치할 수 있으며, 이는 IntelliSense 및 Renaming과 같은 제한된 수의 기능을 제공합니다.

(다음 부분은 원래 텍스트와 유사하지만 문구 및 문장 구조는 의사 원리의 목적을 달성하도록 조정되었습니다.) 키 매핑 설정 다른 코드 편집기에서 vs 코드로 마이그레이션하는 경우 이미 익숙한 동일한 키보드 바로 가기를 계속 사용할 수 있다는 것을 알게되어 기쁩니다. 코드 편집기에 익숙하지 않은 경우이 섹션을 건너 뛰십시오. 그러나 이전에 코드 편집기를 사용한 경우 근육 기억을 재교육하는 것이 비효율적이며 조정하는 데 시간이 걸린다는 것을 알 수 있습니다. 환영 탭의 "설정 및 키 바인딩"섹션에서 Vim, Sublime, Atom 및 기타 키보드 단축키를 설치하는 링크가 표시됩니다. "기타"링크를 클릭하면 설치할 수있는 전체 키 맵 목록이 표시됩니다.

나는 VS 코드로 전환하기 전에 원자 사용자였습니다. 대 코드에서 Atom의 키 매핑을 설정하는 것은 Atom 링크를 클릭하는 것만 큼 간단합니다. 이것은 나에게 Atom Keymap 확장을 설치합니다. Settings.json vs 코드를 "Atom"과 비슷하게 만들려면 다음 구성이 필요합니다. 단축키 키를 설정하는 방법을 배우려면 키보드 바로 가기 확장으로 제공된 지침을 읽으십시오. 확장 막대에서 Keymap 확장을 클릭하면 문서를 찾을 수 있습니다.

emmet JSX Support

Emmet은 HTML 코드를보다 효율적으로 작성할 수있는 웹 개발 툴킷입니다. Emmet에 익숙하지 않은 경우 데모를 확인하여 작동 방식을 확인하십시오.

vs Code에는 내장 EMMET가 있으며 이미 JSX 구문을 지원합니다. 불행히도, 대부분의 React 스타터 프로젝트는 .js 확장을 사용합니다. 문제는 VS Code가 파일을 React Code와 인식하지 않으므로 JSX 기능이 활성화되지 않았다는 것입니다. 두 가지 솔루션이 있습니다 :

jsx 코드를 포함하는 모든 파일 이름 이름 바꾸기 .jsx extension (권장) 모든 .js 파일을 반응 파일로 인식하도록 대 코드를 구성합니다. 다음과 같이 settings.json을 업데이트하십시오

How to Set Up VS Code for React Development settings.json에 액세스하려면 상단 메뉴 탭으로 이동하여 "보기"> "명령 패널"을 클릭하십시오. "설정"을 입력하고 "환경 설정 : 열기 설정 (JSON)"옵션을 선택하십시오. 또는 ctrl

p 를 누르고 "settings.json"을 입력하여 파일을 신속하게 열 수 있습니다. 단축키 키 ctrl , 를 사용하여 새 탭에서 세트 UI 버전을 열 수도 있습니다. 첫 번째 오른쪽 상단의 아이콘 버튼을 클릭하면 Settings.json이 열립니다.

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

로그인 후 복사

두 번째 옵션이 가장 쉬운 방법 인 것 같습니다. 불행히도, 이것은

eslint-config-airbnb

와 같은 다른 JavaScript 개발 도구에 문제가 발생하며, 이는 REACT 코드에 .jsx 파일 확장을 강요하는 규칙 세트가 있습니다. 나중에이 규칙을 비활성화하면 다른 문제가 발생할 수 있습니다.

공식 RECT 팀은 RECT 코드의 .js 확장자를 사용하는 것이 좋습니다. 내 개인적인 경험에서, 반응 코드를 포함하는 모든 파일의 이름을 .jsx로 바꾸고 순수한 JavaScript 코드가 포함 된 파일의 .js 확장자를 사용하는 것이 가장 좋습니다. 이렇게하면 모든 개발 도구를보다 쉽게 사용할 수 있습니다.

형식

고품질 코드를 작성하려면

일관성 코드를 작성해야합니다. 개발자로서 우리는 인간이며 우리 자신을 위해 설정 한 표준을 잊기 쉽습니다. 이 섹션에서는 일관된 코드를 자동으로 작성하는 데 도움이되는 몇 가지 필수 도구에 대해 배울 것입니다. editorConfig editorConfig는 규칙 형식 만 포함하는 간단한 구성 파일입니다. 대 코드 가이 규칙을 읽고 자체 규칙을 덮어 쓰도록 확장을 설치해야합니다. 아래 단계를 따라 설정하려면 다음을 설정하십시오. vs 코드의 editorConfig 확장자를 설치하십시오. .EditorConfig 파일에있는 설정을 사용하여 사용자/작업 공간 설정을 무시합니다.

프로젝트의 루트 디렉토리에서 .editorconfig 파일을 만들고이 샘플 구성을 복사하십시오.

vs 코드는 이제이 규칙을 따라 코드를 형식화합니다. 신약에 대해 빨리 논의합시다. Windows는 CRLF를 사용하여 행이 종료되는 반면 UNIX 기반 시스템은 LF를 사용합니다. 혼합 라인 브레이크가있는 파일을 사용하면 파일을 제출할 때 많은 문제가 발생합니다. Git이 NewLines를 처리하는 방법을 구성 할 수 있습니다. 내가 선호하는 방법은 모든 프로젝트 파일이 모든 플랫폼에서 LF Newlines를 사용하도록 강요하는 것입니다. EditorConfig는 라인 브레이크를 기존 파일로 변환하지 않습니다. 새 파일에 대해서만 LF를 설정합니다. 기존 파일을 모두 변환하려면 두 가지 옵션이 있습니다.

수동으로 수행합니다 (상태 표시 줄에서 스위치로 텍스트 CRLF를 클릭하십시오) 모든 파일을 Pretier 로 형식으로 형식화하십시오

다음, 더 예쁘게 살펴 보겠습니다.

Pretier

Pretier는 JavaScript 코드를 위해 설정하기에 가장 쉬운 코드 포맷터입니다. JavaScript, TypeScript, JSX, CSS, SCSS, Less 및 GraphQL을 지원합니다. 설정하려면 다음 단계를 따르십시오

더 예쁘게 코드 형식화기 확장자를 설치하십시오.

대 코드가 더 예쁘게 사용하는지 확인하십시오. 다음과 같이 Settings.json을 업데이트하십시오

프로젝트에서 개발 의존성으로 더 예쁘게 설치하십시오 : NPM 설치 -Save Dev 더 예기 또는 원사 추가 -d 더 예쁘다.
. prettierrc를 생성하고 다음 예제 규칙을 복사하십시오 :

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

로그인 후 복사

이 명령을 스크립트 섹션에 추가하여 update package.json :

3-5 단계의 경우 더 예쁘게 지원하려는 각 프로젝트 마다이 작업을 수행해야합니다. 아래 스크린 샷과 같이 VS 코드의 NPM 스크립트 패널 아래 형식 명령을 클릭 할 수 있습니다.

이로 인해 Prettier의 기본 규칙과 .prettierrc 및 .editorconfig 파일에서 재정의하는 규칙에 따라 모든 파일이 올바르게 일관되게 재발하게됩니다. 라인 브레이크도 일관성을 유지합니다.
코드 형식이 이제 세 가지 위치에 있음을 알 수 있습니다. 우리가 충돌하는 규칙이 있다면 어떻게 될지 궁금 할 것입니다. 더 예쁘게 활성화 한 후 다음 우선 순위에 따라 이러한 규칙을 처리합니다.
더 예쁜 구성 파일 .EditorConfig

충돌이 발생하면 더 예쁜 구성이 선호됩니다.

html to jsx

모든 실제 개발자는 인터넷 어딘가에서 HTML 코드를 복사하여 React 코드에 붙여 넣는 것이 일반적이라는 것을 알고 있습니다. 일반적으로 HTML 속성을 유효한 JSX 구문으로 변환해야합니다. 다행스럽게도 HTML에서 JSX라는 확장 기능이있어 전환을 수행합니다. 설치 후 쉽게 할 수 있습니다

기존 HTML 코드를 jsx 로 변환합니다 를 붙여 넣을 때 HTML 코드를 유효한 JSX 구문으로 변환합니다. 이것은 클래스와 같은 속성이 클래스 이름으로 변환 될 것임을 의미합니다. 이것은 아주 좋은 시간 절약 방법입니다.

(내용의 나머지는 원래 텍스트와 유사하지만 문구 및 문장 구조는 의사 원리의 목적을 달성하도록 조정됩니다. 이미지 형식을 변경하지 않음)

위 내용은 RECT 개발을위한 CODE를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!