webpack에서 eslint 구성 사용(자세한 튜토리얼)

이 글에서는 webpack에서 소개하는 eslint 구성에 대한 자세한 설명을 위주로 소개하고 참고하겠습니다.

webpack에서 eslint 사용

우선 webpack이 eslint를 지원하도록 하려면 eslint-loader를 설치해야 합니다. 명령은 다음과 같습니다.

npm install --save-dev eslint-loader

webpack.config.js에 다음 코드를 추가합니다.

{
  test: /\.js$/,
  loader: 'eslint-loader',
  enforce: "pre",
  include: [path.resolve(__dirname, 'src')], // 指定检查的目录
  options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
    formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
  }
}

참고: 포맷터 기본값 타사 플러그인을 사용하려는 경우 위 예의 eslint-Friendly-formatter와 같은 플러그인을 설치할 수 있습니다.

두 번째로, webpack에 eslint 기능을 추가하려면 eslint를 설치해야 합니다. 명령은 다음과 같습니다.

npm install --save-dev eslint

마지막으로 프로젝트에서 해당 eslin 규칙을 사용하려면 '.eslintrc.js' 구성 파일을 생성하면 됩니다. '라는 코드를

module.exports = {
  root: true,  
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  rules: {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": "error",
    "arrow-parens": 0
  }
}

이렇게 추가하면 eslint에 대한 간단한 웹팩 소개가 완성되었습니다.

여기에서는 eslintrc.js의 구성 및 사용에 대해 설명합니다. 자세한 내용은 http://eslint.cn/docs/user-guide

eslint 구성 항목

1. root을 참조하세요. 구성 파일 사용

2. parser는 eslint 파서를 지정합니다

3. parserOptions는 파서 옵션을 설정합니다

4. extends는 eslint 사양을 지정합니다

5. 플러그인은 타사 플러그인을 나타냅니다

6. env 코드가 실행되는 호스트 환경을 지정합니다

7. rules 추가 규칙을 활성화하거나 기본 규칙을 무시합니다

8. globals 코드에 선언된 사용자 정의 전역 변수

eslint를 사용할 때 구성의 규칙 구성 항목은 다음과 같습니다. 꼭 필요한 파일?

답은 그렇습니다. 그러나 우리는 규칙을 사용자 정의할 필요가 없습니다. 여기서는 확장 구성 항목을 사용할 것입니다.

extends

eslint에서 공식적으로 권장하는 것을 사용하거나 aribnb, google, 표준과 같은 일부 대기업에서 제공하는 것을 사용할 수 있습니다.

저희는 일반적으로 개발 시 제3자를 활용합니다.

공식 추천

.eslintrc.js에 다음 코드를 추가하세요:

extends: 'eslint:recommended',
extends: 'eslint:all',

자세한 내용은 공식 규칙 표를 참조하세요

제3자 공유

제3자 공유를 사용하는 경우 일반적으로 다음이 필요합니다. 관련 플러그인 코드를 설치하려면 다음과 같이

npm install --save-dev eslint-config-airbnb // bnb
npm install --save-dev eslint-config-standard // standard

.eslintrc.js에 다음 코드를 추가하세요.

extends: 'eslint:google',
// or
extends: 'eslint:standard',

이러한 타사 확장 기능을 사용하면 때로는 표준과 같은 일부 플러그인을 업데이트해야 할 수도 있습니다. eslint- 플러그인 가져오기

당황하지 마세요. 오류 메시지를 따르기만 하면 됩니다. 이 플러그인을 단계별로 설치하세요.

이러한 타사 확장 기능은 매우 훌륭하지만 때로는 좀 더 개인화된 규칙을 정의해야 하고 규칙 구성 항목을 추가해야 합니다.

구성 규칙

.eslintrc.js 파일에 규칙을 추가하면 코드는 다음과 같습니다.

{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

"semi" 및 "quotes"는 ESLint의 규칙 이름입니다. 첫 번째 값은 오류 수준이며 다음 값 중 하나일 수 있습니다.

1. "off" 또는 0 - 규칙 끄기

2. "warn" 또는 1 - 규칙을 경고로 처리합니다(하지 않음). 종료 코드에 영향을 미침)

3. "error" 또는 2 - 규칙을 오류로 처리합니다(종료 코드는 1)

이러한 규칙은 일반적으로 두 가지 범주로 나뉩니다.

1. 기본값에 없는 항목 추가 또는 타사 라이브러리

2. 기본 또는 타사 라이브러리 무시

프로젝트에 html, vue, 반응 등과 같은 형식 지정이 필요한 다른 파일이 있을 수 있습니다. 처리를 위해 이러한 파일 중 타사 플러그인을 도입해야 합니다.

plugins(html)

다음 명령을 사용하여 eslint-plugin-html을 설치합니다.

npm install --save-dev eslint-plugin-html

이 플러그인은 모듈 스크립트에 적용되지 않기 때문에 브라우저 공유 전역 변수의 동작을 시뮬레이션하도록 모듈 스크립트에 상기시킵니다.

이 플러그인은 .vue, .jsx

.eslintrc.js와 같은 파일을 확장할 수도 있습니다. 다음 구성 항목을 추가하세요.

settings: {
  'html/html-extensions': ['.html', '.vue'],
  'html/indent': '+2',
},

eslint-pulgin-html로 확장된 파일의 경우 eslint를 사용할 수 있습니다. --ext .html,.vue src 개발 중 작성 중에 감지하고 싶다면 해당 파일의 로더를 사용하여 처리할 수 있습니다. 그런 다음 npm run dev를 실행하여 기능을 달성합니다. 글을 쓰면서 확인하는 기능입니다.

때로는 개발 중에 필요에 따라 동일한 프로젝트의 다른 디렉터리에서 다른 .eslintrc.js 파일을 사용할 수 있습니다.

제한된 사용 범위(루트: true)

다른 디렉터리에서 다른 .eslintrc를 사용하려면 디렉터리에 다음 구성 항목을 추가해야 합니다.

{
  "root": true
}

설정하지 않으면, 업데이트된 디렉터리에 도달할 때까지 계속 검색합니다. 업데이트된 디렉터리에 구성 파일이 있으면 루트 디렉터리가 사용됩니다. 이로 인해 현재 구성 디렉터리 구성이 작동하지 않습니다.

개발 중에는 상황에 따라 다른 파서를 사용해야 하는데, 우리가 흔히 사용하는 것은 babel-eslint입니다.

파서(파서 지정)

babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。

babel-eslint 安装命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置项代码：

parser: 'babel-eslint',

如果你使用的默认解析器的话，且在代码中使用了浏览器有兼容性的问题的js新特性，使用webpack编译就会出现问题，这时我们一般装最新的eslint或者安装是使用 babel-eslint 来解决问题。

env（环境）

在 .eslintrc.js 中添加如下代码：

"env": {
  "browser": true, //
  "node": true //
}

指定了环境，你就可以放心的使用它们的全局变量和属性。

global

指定全局变量。

在 .eslintrc.js 中添加如下代码：

"globals": {
  "var1": true,
  "var2": false 
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JS中如何改变单物体透明度

在JS中如何实现通过拖拽改变物体大小

在vue中使用cli如何实现重构多页面脚手架

위 내용은 webpack에서 eslint 구성 사용(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!