VSCode를 사용하여 반응 개발 환경을 구성하는 단계의 자세한 예

vscode의 기본 구성은 React의 JSX 구문에 적합하지 않습니다. 이는 자동 서식 지정이나 붙여넣기 사용 후 기본 들여쓰기 오류에 반영됩니다. 언어 모드를 변경하면 오류가 완화될 수 있지만 언어 모드를 변경한 후 서식이 여전히 유지됩니다. 이상적이지 않습니다. 이번 글에서는 VSCode에서 React 개발 환경을 구성하는 단계를 주로 소개하고 있는데, 에디터가 꽤 괜찮다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

ESLint와 Prettier 플러그인을 함께 사용하면 vscode에서 JSX 구문을 완벽하게 지원할 수 있습니다.

Editor 설치 플러그인

vscode에 다음 플러그인을 설치해야 합니다:

1. ESLint

2. Prettier

프로젝트 내 구성

ESLint 구성

기본 구성

프로젝트에 babel-eslint, eslint-plugin-jsx-a11y, eslint-plugin-react를 설치합니다. 종속성:

npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

권장 ESLint 구성은 다음과 같습니다(.eslintrc 수정)

{
 // Use the AirBnB JS styleguide - https://github.com/airbnb/javascript
 "extends": "airbnb",

 // We use 'babel-eslint' mainly for React Native Classes
 "parser": "babel-eslint",
 "ecmaFeatures": {
  "classes": true,
 },

 // jsx相关插件
 "plugins": ["react", "jsx-a11y", "import"]

 // We can add/overwrite custom rules here
 "rules": {
  // React Native has JSX in JS files
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

  // React Native includes images via require("../images/example.png")
  "global-require": 0
 }
}

몇 가지 참고 사항 포인트:

1. yarn 설치를 사용하는 경우 .eslintrc 파일을 수동으로 생성해야 합니다.

2. eslint가 사용 중에 오류를 보고하고 종속성 누락 메시지가 표시되는 경우, 관련 종속성을 설치하세요

발생할 수 있는 문제

프로젝트의 파일 이름 접미사가 .jsx가 아닌 .js인 경우 다음 오류가 발생할 수 있습니다.

코드 복사 코드

[eslint] 확장자가 '.js'인 파일에서는 JSX가 허용되지 않습니다(react/jsx-filename-extension)

.js 및 .jsx 접미사를 허용하려면 .eslintrc에 새 규칙을 추가하세요.

"rules": {
 "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}

react-native 0.49 이상 버전은 더 이상 jsx가 접미사입니다. 이 토론 No.jsx 확장을 참조하세요.

props 유효성 검사 오류

[eslint] 'navigation' is missing in props validation (react/prop-types)

props 유형을 감지하는 데 도움이 됩니다. 재사용 가능한 구성 요소를 작성하려면 이 알림을 끄지 않는 것이 가장 좋습니다. 이 알림을 끄고 다음 규칙을 추가하세요.

"rules": {
 "react/prop-types": 0
}

Prettier 구성

우리가 원하는 효과는 다음과 같습니다. Prettier를 자동으로 구성합니다. ESLint 규칙에 따라 파일을 저장할 때 JSX 코드 형식을 지정합니다. 단계는 다음과 같습니다.

prettier-eslint 프로젝트에 설치

npm install prettier-eslint --save-dev

vscode 작업 공간 구성

vscode 작업 공간 사용자에 다음 코드를 추가합니다. 사용자 정의 섹션:

// Format a file on save. 
// A formatter must be available, 
// the file must not be auto-saved, 
// and editor must not be shutting down.
"editor.formatOnSave": true,
  
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
  
// Use 'prettier-eslint' instead of 'prettier'. 
// Other settings will only be fallbacks 
// in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": true,

관련 권장 사항:

자세한 예 vue-c li vscode 구성 eslint

마크다운 미리보기 및 VSCode에서 미리보기 스타일 수정

VsCode 플러그인 요약 및 구성

위 내용은 VSCode를 사용하여 반응 개발 환경을 구성하는 단계의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!