create-react-app 구성 eslint 단계에 대한 자세한 설명

이번에는 create-react-app에서 eslint를 구성하는 단계에 대해 자세히 설명하겠습니다. create-react-app에서 eslint를 구성할 때 주의할 점은 무엇인가요?

eslint 및 editorconfig를 사용하여 코드 표준화

이것을 사용하는 이유:

1. 코드 사양은 팀 협업에 도움이 됩니다

2. 순수한 수동 사양은 시간이 많이 걸리고 노동 집약적이며 정확성을 보장할 수 없습니다

3. 편집자와 협력 가능 Js lint 도구는 자동으로 오류를 알림하고 개발 효율성을 향상시킵니다

eslint

ECMAScript 버전이 지속적으로 업데이트되면서 Js lint 도구에는 풍부한 플러그인이 있으며 사양을 적용할 수 있습니다. 매우 풍부하며 대부분의 팀의 요구를 충족할 수 있습니다.

eslint는 git과 협력합니다

모든 사람의 사양을 최대한 제어하기 위해 git이 코드를 커밋할 때 비표준 코드를 웨어하우스에 제출할 수 없을 때 git Hook을 사용하여 eslint를 호출하여 코드 사양을 확인할 수 있습니다. .

editorconfig

편집자마다 텍스트 형식에 있어 일정한 차이가 있을 수 있습니다. 일부 표준을 통일하지 않으면 다른 사람과 협력할 때 다른 사람의 코드를 업데이트할 때마다 많은 오류가 발생할 수 있습니다. - 웹스톰 자동 지원 editorconfig 구성 파일.

create-react-app이 기본적으로 이미 설치되어 있으므로 먼저 eslintnpm i eslint를 설치하세요eslintnpm i eslint 因为create-react-app默认已经安装了

  "babel-eslint": "7.2.3",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.1.0",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",

我们针对我们想要的自定义配置，我们再安装如下

npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-promise \
\ eslint-plugin-react \
\ eslint-plugin-standard -D

我们在根目录下新建 .eslintrc 文件针对整个项目做一个标准的规范

{
 "extends": "standard"
}

主要项目是前端工程，所以我们在前端文件夹下新建 .eslintrc 文件，在这里去规范客户端代码，客户端代码使用 jsx，很多规则和 nodejs 是不同的，在这里使用更加严格的规范来要求客户端代码。

配置的value对应的值： 0 : off 1 : warning 2 : error

{
 "parser": "babel-eslint",
 "env": {
  "browser": true,
  "es6": true,
  "node": true
 },
 "parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
  "semi": [0],
  "react/jsx-filename-extension": [0],
  "jsx-a11y/anchor-is-valid": [0]
 }
}

使用 babel-eslint 去解析代码，定义环境是浏览器和es6，会包含公共变量，webpack所以需要node一些环境变量，parserOptions定义版本，jsmodule模式方法书写。

因为需要在每次编译之前都要去检查一下代码，所以还需要配置 webpack,这是create-react-app默认的

   {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc,
   },

我们希望屏蔽掉 node_modules 文件夹下的代码

exclude:[path.resolve(__dirname, '../node_modules')]

在项目根目录下新建文件 .editorconfig webstom默认就有配置

1. root = true 项目根目录

2. [*] 所有文件都应用这个规则

3. charset = utf-8 编码模式

4. indent_style = space 使用 tab 的样式制表符和 space

5. indent_size = 2

6. end_of_line = lf 行尾结尾方式

7. insert_final_newline = true 自动保存行尾最后一行是空行

8. trim_trailing_whitespace = true 一行结束后面的空格自动去掉

eslint 不检测这行代码 // eslint-disable-line

eslint 不检测这个文件，在开头 /* eslint-disable */在文件结尾/* eslint-enable */

安装 npm i husky -D

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

원하는 사용자 정의 구성을 위해 다음과 같이 설치합니다

rrreee

다음에 새 것을 만듭니다. 루트 디렉터리 .eslintrc 파일은 전체 프로젝트에 대한 표준 사양을 만듭니다

rrreee

메인 프로젝트는 프런트엔드 프로젝트이므로 클라이언트 코드를 표준화하기 위해 프런트엔드 폴더 아래에 새로운 .eslintrc 파일을 생성합니다. jsx를 사용하고 많은 규칙과 nodejs가 다릅니다. 여기서는 클라이언트 코드를 요구하기 위해 더 엄격한 사양이 사용됩니다.

구성된 값에 해당하는 값: 0: off 1: warning 2: error

rrreee

babel-eslint를 사용하여 코드를 구문 분석합니다. 정의된 환경은 Webpack이 포함된 브라우저와 es6입니다. 노드 환경 변수입니다. ParserOptions는 버전을 정의하고 jsmodule 모드 메소드가 작성됩니다.

각 컴파일 전에 코드를 확인해야 하기 때문에 create-react-app의 기본값인 webpack 구성도 필요합니다rrreee
프로젝트 루트의 node_modules 폴더

rrreee

에 있는 코드를 차단하길 바랍니다 .editorconfig 디렉터리에 새 파일을 만듭니다. Webstom에는 기본적으로 구성이 있습니다.

root = true 프로젝트 루트 디렉터리 🎜🎜🎜🎜[*] 이 규칙은 모든 파일에 적용됩니다. 🎜🎜🎜🎜charset = utf-8 인코딩 모드 🎜 🎜🎜🎜indent_style = space는 탭 스타일 탭과 space를 사용합니다.🎜🎜🎜🎜indent_size = 2🎜🎜🎜🎜end_of_line = lf 줄 종료 방법🎜🎜🎜🎜insert_final_newline = true 자동으로 줄 끝의 마지막 줄을 공백으로 저장합니다. line🎜🎜🎜🎜trim_trailing_ whitespace = true 줄 끝 뒤의 공백은 자동으로 제거됩니다🎜🎜🎜🎜eslint는 이 코드 줄을 감지하지 못합니다. // eslint-disable-line🎜🎜eslint는 감지하지 않습니다. 시작 부분에서 이 파일을 감지하지 않음 /* eslint- 비활성화 */파일 끝에서 /* eslint-enable */🎜🎜npm i husky 설치 -D🎜🎜그런 다음 package.json 스크립트에 git을 추가합니다. 후크는 git commit🎜rrreee🎜git commit을 실행하기 전에 이 명령을 호출하여 eslint에서 전달된 코드를 강제로 실행합니다🎜🎜읽고 나면 방법을 마스터했다고 믿습니다. 이 기사의 사례에 대해 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜엔트리 컴포넌트 사용 방법🎜🎜🎜🎜🎜실제 프로젝트에서 설치 플러그인 사용 방법🎜🎜🎜

위 내용은 create-react-app 구성 eslint 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!