EsLint 초보자 학습 튜토리얼

소개

ESLint는 JavaScript红楼의 저자 Nicholas C. Zakas에 의해 작성되었습니다. 2013 년에 첫 번째 버전을 출시했습니다. NCZ의 초기 목적은 새로운 룸을 만들지 않는 것이었으며, 실제 필요에 대해 JSHint 팀이 응답하지 않은 경우에 이루어진 선택입니다: 확장 가능, 각 규칙이 독립적이고 내장된编码 스타일이 없는 개념으로 lint 도구를 작성했습니다.

공식 주소: http://eslint.org/

EsLint는 JavaScript 프로그래밍 중에 문법 오류를 확인하는 데 도움을 줍니다. 예를 들어, JavaScript 애플리케이션에서는 빠진 변수나 메서드를 찾기 어렵습니다. EsLint는 JS 코드를 분석하고 버그를 찾아 JS 문법 작성의 정확성을 보장하는 데 도움을 줍니다.

EsLint는 Esprima(ECMAScript 파싱 아키텍처) 기반으로 구축되었습니다. Esprima는 ES를 지원합니다.5.1본체는 ECMAScript로 작성되어 있으며, 다용도 분석에 사용됩니다. EsLint는 기본 규칙(확장 가능)을 제공하고, 사용자 정의 규칙을 제공하여 작성한 JavaScript 코드를 제약합니다.

EsLint는 다음과 같은 지원을 제공합니다:

ES6
AngularJS
JSX
스타일 검사
사용자 정의 오류와 경고

EsLint는 다음과 같은 검사를 제공합니다:

문법 오류 검사
중요하지 않거나 빠진 구두점, 예를 들어 세미콜론
실행되지 않은 코드 블록(WebStorm을 사용한 친구들에게는 잘 알려져 있습니다)
사용되지 않은 매개변수 경고
끝나지 않은 마침표, 예를 들어 {},
스타일의 일관된 규칙을 보장합니다. 예를 들어, sass나 less
변수 이름의 명명을 확인합니다

사용

1. 설치

Npm install gulp-eslint –save-dev

프로젝트 디렉토리 아래에서 실행하면, eslint –init를 통해 .eslintrc 파일이 생성되며, 파일 내용에는 일부 검사 규칙이 포함됩니다.

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

중에서 "semi"와 "quotes"는 규칙 이름입니다. EsLint는 error의 등급도 제공하며, 숫자가 높을수록 오류 경고가 높습니다. 예를 들어, 0은 코드 오류를 경고하지 않습니다.1경고를 경고하지만 기존 컴파일에 영향을 미치지 않습니다.2error는 오류를 발생시킵니다.

"extends": "eslint:recommended"

Extends는 EsLint 기본 추천 검사입니다. 필요한 검사를 선택할 수 있는 설정을 사용할 수 있으며, 로그인할 수 있습니다.npmjs.com查看

二、自定义配置EsLint

之前提到你可以关闭所有EsLint默认的验证，自行添加所需的验证规则。为此EsLint提供了2以下几种方式进行设置：

配置注释：在要验证的文件中，直接使用JavaScript注释嵌套配置信息
配置文件：使用JavaScript、JSON或YAML文件进行配置，例如前面提到的.eslintrc文件，当然你还可以在package.json文件中添加eslintConfig字段，EsLint会自动读取并进行验证。

开始介绍EsLint的用法

parserOptions

EsLint通过parserOptions，允许指定校验的ecma的版本，及ecma的一些特性

{
 "parserOptions": {
  "ecmaVersion": 6 //指定ECMAScript支持的版本，6为ES6
  "sourceType": "module", //指定来源的类型，有两种”script”或”module”
  "ecmaFeatures": {
   "jsx": true//启动JSX
  },
 }
}

Parser

EsLint默认使用esprima做脚本解析，当然你也切换他，比如切换成babel-eslint解析

{
 "parser": "esprima" //默认，可以设置成babel-eslint，支持jsx
}

Environments

Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

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

如果你想使用插件中的环境变量，你可以使用plugins指定，如下

{
 "plugins": ["example"],
 "env": {
  "example/custom": true
 }
}

Globals

指定你所要使用的全局变量，true代表允许重写、false代表不允许重写

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

Plugins

EsLint允许使用第三方插件

{
 "plugins": [
  "react" 
  ]
}

Rules

自定义规则，一般格式：”规则名称”:error级别系数。系数0为不提示(off)、1경고(warn)를 위해}}2에러를 표시할 때(error), 범위를 지정할 수 있습니다. 예를 들어, [14]

Strict 모드를 포함할 수도 있으며, 코드 방식으로 알림을 제공할 수도 있습니다. 또한, react와 같은 제3자 검증을 포함할 수도 있습니다.

기본 검증 주소 http://eslint.org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //제이스크립트 코드 기본 검증
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   //서드파티 플러그인의 검증 규칙 사용
  "react/jsx-quotes": 0
 }
}

　　　　　　　　　　　 https://www.npmjs.com/패키지/eslint-플러그인-react, 이 링크는 react의 eslint 사용

3. Gulp에서 사용

var eslint = require('gulp-eslint');
gulp.task('validate-,function(){
 eslint/**/*return gulp.src(['app //.js'])
  지정된 검증 경로/.pipe(eslint({configFle:". //eslintrc")))
  .pipe(eslint.format())
});

정리

이 글의 전체 내용은 여기에 있습니다. 이 글의 내용이 여러분의 학습이나 업무에 도움이 되길 바랍니다. 의문이 있으시면 댓글을 통해 교류해 주세요.

기본 튜토리얼