집 > 기사 > 웹 프론트엔드 > 초보자를 위한 EsLint에 대해 알아야 할 사항

초보자를 위한 EsLint에 대해 알아야 할 사항

php中世界最好的语言원래의: 2018-05-24 14:05:323900검색

이번에는 EsLint를 시작하는 분들이 꼭 알아야 할 Notes에 대해 알려드리겠습니다. 몇 가지 실제 사례를 함께 살펴보겠습니다.

Introduction

ESLint은 플러그인 javascript 코드 감지 도구로, 일반적인 JavaScript 코드 오류를 확인하는 데 사용할 수 있으며 코드 스타일 검사도 수행할 수 있습니다. 자신의 ESLint 구성 세트를 지정한 다음 이를 작성하는 프로젝트에 적용하여 보조 코딩 표준을 실행하고 프로젝트 코드의 품질을 효과적으로 제어하는 것을 좋아합니다.

Installation

ESLint 설치: 로컬 설치, 전역 설치

1, 로컬 설치

$ npm install eslint --save-dev

구성 파일

$ ./node_modules/.bin/eslint --init

을 생성한 후 다음과 같이 모든 파일이나 디렉터리에서 ESLint를 실행할 수 있습니다.

$ ./node_modules/.bin/eslint index.js

index. js는 테스트해야 하는 js 파일입니다. 사용하는 모든 플러그인 또는 공유 구성(로컬에 설치된 ESLint와 작동하려면 로컬로 설치해야 함).

2. 전역 설치

모든 프로젝트에서 ESLint를 사용하려면 ESLint를 전역으로 설치하는 것이 좋습니다.

$ npm install -g eslint

구성 파일

$ eslint --init

을 생성한 후 모든 파일이나 디렉터리에서 ESLint를 실행할 수 있습니다

$ eslint index.js

PS: eslint --init는 각 프로젝트에서 eslint를 설정 및 구성하는 데 사용되며 로컬에 설치된 ESLint를 실행합니다. 및 플러그인 디렉토리. 전역적으로 설치된 ESLint를 사용하려는 경우 구성에 사용되는 모든 플러그인을 전역적으로 설치해야 합니다.

사용

1. 프로젝트 루트 디렉터리에 package.json 파일을 생성합니다. (ESLint를 구성하는 프로젝트에는 package.json 파일이 있어야 합니다. 그렇지 않은 경우 npm init -y를 사용하여 생성할 수 있습니다)

$ npm init -y

2. eslint 설치 (개인 프로젝트의 필요에 따라 설치 방법이 있는데 여기서는 전역 설치를 사용합니다)

$ npm install -g eslint

3.index.js 파일을 생성하고 그 안에 함수를 작성합니다.

function merge () {
    var ret = {};
    for (var i in arguments) {
        var m = arguments[i];
        for (var j in m) ret[j] = m[j];
    }
    return ret;
}

console.log(merge({a: 123}, {b: 456}));

node index.js를 실행하면 출력 결과는 {a: 123, b: 456}

$ node index.js
{ a: 123, b: 456 }

eslint를 사용하여 확인하세요.

$ eslint index.js

Oops! Something went wrong! :(

ESLint: 4.19.1.
ESLint couldn't find a configuration file. To set up a configuration file for this project, please run:

    eslint --init

ESLint looked for configuration files in E:\website\demo5\js and its ancestors. If it found none, it then looked in your home directory.

If you think you already have a configuration file or if you need more help, please stop by the ESLint chat room: https://gitter.im/eslint/eslint

실행 결과는 해당 구성 파일을 찾을 수 없어서 실패입니다. 이 eslint가 가장 중요하다고 생각합니다. 구성 문제입니다.

새 구성 파일 만들기

  $ eslint --init

생성 과정에서 생성 규칙, 지원 환경 및 기타 콘텐츠를 선택해야 합니다. 다음은 내 생성 옵션 중 일부입니다.

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? No
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Windows
? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript

생성된 콘텐츠는 .eslintrc.js 파일에 있습니다. , 파일 내용은 다음과 같습니다

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};

단, 생성된 파일에는 이미 일부 구성이 있으므로 안에 있는 내용을 대부분 삭제하세요. 확장을 그대로 두고 나머지는 직접 작성하세요

 module.exports = {
      "extends": "eslint:recommended"
  };

eslint:권장 구성에는 일련의 핵심 규칙이 포함되어 있으며 몇 가지 일반적인 문제를 보고할 수 있습니다.

eslint index.js를 다시 실행하면 출력은 다음과 같습니다

  10:1  error  Unexpected console statement  no-console
  10:1  error  'console' is not defined      no-undef

✖ 2 problems (2 errors, 0 warnings)

예기치 않은 콘솔 문 no-console --- 콘솔을 사용할 수 없습니다.
'console'이 정의되지 않았습니다. no-undef --- 콘솔 변수가 정의되지 않았습니다. 정의되지 않은 변수는 사용할 수 없습니다
하나씩 해결하세요. 콘솔 프롬프트를 사용할 수 없으면 콘솔 없음을 비활성화하고 구성 파일에 규칙을 추가할 수 있습니다

module.exports = {
    extends: 'eslint:recommended',
    rules: {
        'no-console': 'off',
    },
};

구성 규칙은 규칙 개체에 작성되며 키는 규칙을 나타냅니다. 이름과 값은 규칙의 구성을 나타냅니다.
그러면 no-undef에 대한 해결책이 있습니다. 오류가 발생하는 이유는 JavaScript가 브라우저 및 Node.js와 같은 실행 환경이 많기 때문입니다. 또한 PostgreSQL과 같이 JavaScript를 스크립트 엔진으로 사용하는 소프트웨어 시스템도 많습니다. JavaScript를 사용하여 스토리지 엔진을 작성하면 이러한 운영 환경에는 콘솔 개체가 존재하지 않을 수 있습니다. 또한 브라우저 환경에는 window 개체가 있지만 Node.js에는 프로세스 개체가 있지만 브라우저 환경에는 없습니다. 따라서 구성 파일에서 프로그램의 대상 환경도 지정해야 합니다.

module.exports = {
    extends: 'eslint:recommended',
    env: {
        node: true,
    },
    rules: {
        'no-console': 'off',
    }
};

검사가 다시 실행되면 index.js가 검사를 완전히 통과했음을 나타내는 프롬프트 출력이 없습니다.

구성

구성 방법에는 파일 구성 방법과 코드 주석 구성 방법 두 가지가 있습니다. (

상대적으로 독립적이고 유지 관리가 쉬운 파일 구성 형식을 사용하는 것이 좋습니다

). 파일 구성 사용: 프로젝트의 루트 디렉터리에 .eslintrc라는 새 파일을 만들고 이 파일에 몇 가지 검사 규칙을 추가합니다.
파일 구성 방법

env: 스크립트는 어떤 환경에서 실행되나요?

환경은 브라우저, 노드 환경 변수, es6 환경 변수, mocha 환경 변수 등과 같은 다른 환경에 대한 전역 변수를 미리 설정할 수 있습니다.

'env': {
    'browser': true,
    'commonjs': true,
    'es6': true
},

globals: 추가 전역 변수

globals: {
    vue: true,
    wx: true
},

규칙: 개방형 규칙 및 오류 발생 시 보고되는 수준

규칙에는 세 가지 오류 수준이 있습니다.

0或’off’：关闭规则。 
1或’warn’：打开规则，并且作为一个警告（并不会导致检查不通过）。 
2或’error’：打开规则，并且作为一个错误 (退出码为1，检查不通过)。

参数说明： 
参数1 ： 错误等级 
参数2 ： 处理方式

구성 코드 주석 방법

JavaScript 주석을 사용하여 구성 정보를 파일에 직접 포함

예:

忽略 no-undef 检查 
/* eslint-disable no-undef */

忽略 no-new 检查 
/* eslint-disable no-new */

设置检查 
/*eslint eqeqeq: off*/ 
/*eslint eqeqeq: 0*/

관심 있는 학생들은 여기에서 많은 구성과 규칙을 참조할 수 있습니다. 규칙

使用共享的配置文件

我们使用配置js文件是以extends: 'eslint:recommended'为基础配置，但是大多数时候我们需要制定很多规则，在一个文件中写入会变得很臃肿，管理起来会很麻烦。

新建一个文件比如eslint-config-public.js，在文件内容添加一两个规则。

module.exports = {
    extends: 'eslint:recommended',
    env: {
        node: true,
    },
    rules: {
        'no-console': 'off',
        'indent': [ 'error', 4 ],
        'quotes': [ 'error', 'single' ],
    },
};

然后原来的.eslintrc.js文件内容稍微变化下，删掉所有的配置，留下一个extends。

module.exports = {
    extends: './eslint-config-public.js',
};

这个要测试的是啥呢，就是看看限定缩进是4个空格和使用单引号的字符串等，然后测试下，运行eslint index.js，得到的结果是没有问题的，但是如果在index.js中的var ret = {};前面加个空格啥的，结果就立马不一样了。

2:1  error  Expected indentation of 4 spaces but found 5  indent

✖ 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

这时候提示第2行的是缩进应该是4个空格，而文件的第2行却发现了5个空格，说明公共配置文件eslint-config-public.js已经生效了。

除了这些基本的配置以外，在npm上有很多已经发布的ESLint配置，也可以通过安装使用。配置名字一般都是eslint-config-为前缀，一般我们用的eslint是全局安装的，那用的eslint-config-模块也必须是全局安装，不然没法载入。

在执行eslint检查的时候，我们会经常看到提示“--flx”选项，在执行eslint检查的时候添加该选项会自动修复部分报错部分（注意这里只是部分，并不是全部）

比如我们在规则中添加一条no-extra-semi: 禁止不必要的分号。

'no-extra-semi':'error'

然后，我们在index.js最后多添加一个分号

function merge () {
    var ret = {};
    for (var i in arguments) {
        var m = arguments[i];
        for (var j in m) ret[j] = m[j];
    }
    return ret;;
}

console.log(merge({a: 123}, {b: 456}));

执行eslint index.js，得到结果如下：

  7:16  error  Unnecessary semicolon  no-extra-semi
  7:16  error  Unreachable code       no-unreachable

✖ 2 problems (2 errors, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

然后我们在执行eslint index.js --fix就会自动修复，index.js那个多余的分号也就被修复消失不见了。

总结

以上是我在学习eslint整理的一些资料，不算太全面，对于像我这样的新手入门足够了

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！