This time I will bring you the instructions for newbies to get started with EsLint. What are the precautions for newbies to get started with EsLint. The following is a practical case, let’s take a look at it together.

Introduction

? ESLint is a plug-in javascript code detection tool that can be used to check Common JavaScript code errors can also be checked for code style, so that we can specify a set of ESLint configurations according to our own preferences, and then apply them to the projects we write to achieve Assist in the implementation of coding standards and effectively control the quality of project code.

Installation

ESLint installation: local installation, global installation

1, local installation

$?npm?install?eslint?--save-dev

Generate configuration file

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

After that, you can run ESLint in any file or directory as follows:

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

index.js is the js file you need to test. Any plugins or shared configurations you use (must be installed locally to work with a locally installed ESLint).

2. Global installation

If you want ESLint to be available to all projects, it is recommended to install ESLint globally.

$?npm?install?-g?eslint

After generating the configuration file

$?eslint?--init

, you can run ESLint in any file or directory

$?eslint?index.js

PS: eslint --init is used for every project Directory that sets up and configures eslint and will execute locally installed ESLint and its plugins. If you prefer to use ESLint installed globally, any plugins used in your configuration must be installed globally.

Use

1. Generate a package.json file in the project root directory (The project that configures ESLint must have a package.json file. If not, you can use npm init -y to generate )

$?npm?init?-y

2. Install eslint (The installation method is installed according to the needs of personal projects, here we use global installation )

$?npm?install?-g?eslint

3. Create index .js file, write a function in it.

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}));

Execute node index.js, the output result is { a: 123, b: 456 }

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

Use eslint to check

$?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

The execution result is failure because it is not found Corresponding configuration file, personally think that the most important thing about this eslint is the configuration issue.

New configuration file

??$?eslint?--init

During the generation process, you need to select the generation rules, support environment and other content. Here are some of my generation options

??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

The generated content is in. In the eslintrc.js file, the file content is as follows

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"
????????]
????}
};

? However, there are already some configurations in the generated file, so delete most of the content inside. Leave an extension and fill in the rest by yourself

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

eslint:recommended configuration, which contains a series of core rules and can report some common problems.

Re-execute eslint index.js, the output is as follows

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

??2?problems?(2?errors,?0?warnings)

Unexpected console statement no-console --- Console cannot be used
'console' is not defined no-undef --- console The variables are not defined, and undefined variables cannot be used.
Solve the problem one by one. If you cannot use the console prompt, then we can just disable no-console and add rules

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

to the configuration file. Write the configuration rules In the rules object, key represents the rule name, and value represents the rule configuration.
? Then there is the solution to no-undef: the reason for the error is that JavaScript has many running environments, such as browsers and Node.js. In addition, there are many software systems that use JavaScript as their scripts Engines, such as PostgreSQL, support using JavaScript to write storage engines, and the console object may not exist in these operating environments. In addition, there will be a window object in the browser environment, but not in Node.js; there will be a process object in Node.js, but not in the browser environment.
So we also need to specify the target environment of the program in the configuration file:

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

When the check is re-executed, there will be no prompt output, indicating that index.js has completely passed the check.

Configuration

There are two configuration methods: file configuration method and code comment configuration method (It is recommended to use the file configuration form, which is relatively independent and easy to maintain).
Use file configuration: Create a new file named .eslintrc in the root directory of the project, and add some checking rules to this file.

File configuration method

env: What environment will your script run in?
Environment can preset global variables for other environments, such as brower, node environment variables, and es6 environment. Variables, mocha environment variables, etc.

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

globals: additional global variables

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

rules: open rules and the level reported when an error occurs
There are three error levels for rules:

0或’off’：關(guān)閉規(guī)則。?
1或’warn’：打開規(guī)則，并且作為一個警告（并不會導(dǎo)致檢查不通過）。?
2或’error’：打開規(guī)則，并且作為一個錯誤?(退出碼為1，檢查不通過)。

參數(shù)說明：?
參數(shù)1?：?錯誤等級?
參數(shù)2?：?處理方式

Configuration code comment method

Use JavaScript comments to embed configuration information directly into a file
Example:

忽略?no-undef?檢查?
/*?eslint-disable?no-undef?*/

忽略?no-new?檢查?
/*?eslint-disable?no-new?*/

設(shè)置檢查?
/*eslint?eqeqeq:?off*/?
/*eslint?eqeqeq:?0*/

There is a lot of configuration and rules content, interested students You can refer here: rules

使用共享的配置文件

??我們使用配置js文件是以extends: 'eslint:recommended'為基礎(chǔ)配置，但是大多數(shù)時候我們需要制定很多規(guī)則，在一個文件中寫入會變得很臃腫，管理起來會很麻煩。

??新建一個文件比如eslint-config-public.js，在文件內(nèi)容添加一兩個規(guī)則。

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

然后原來的.eslintrc.js文件內(nèi)容稍微變化下，刪掉所有的配置，留下一個extends。

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

??這個要測試的是啥呢，就是看看限定縮進(jìn)是4個空格和使用單引號的字符串等，然后測試下，運行eslint index.js，得到的結(jié)果是沒有問題的，但是如果在index.js中的var ret = {};前面加個空格啥的，結(jié)果就立馬不一樣了。

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行的是縮進(jìn)應(yīng)該是4個空格，而文件的第2行卻發(fā)現(xiàn)了5個空格，說明公共配置文件eslint-config-public.js已經(jīng)生效了。

??除了這些基本的配置以外，在npm上有很多已經(jīng)發(fā)布的ESLint配置，也可以通過安裝使用。配置名字一般都是eslint-config-為前綴，一般我們用的eslint是全局安裝的，那用的eslint-config-模塊也必須是全局安裝，不然沒法載入。

在執(zhí)行eslint檢查的時候，我們會經(jīng)?？吹教崾尽?-flx”選項，在執(zhí)行eslint檢查的時候添加該選項會自動修復(fù)部分報錯部分（注意這里只是部分，并不是全部）

比如我們在規(guī)則中添加一條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}));

執(zhí)行eslint index.js，得到結(jié)果如下：

??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.

然后我們在執(zhí)行eslint index.js --fix就會自動修復(fù)，index.js那個多余的分號也就被修復(fù)消失不見了。

總結(jié)

以上是我在學(xué)習(xí)eslint整理的一些資料，不算太全面，對于像我這樣的新手入門足夠了

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

前端中排序算法實例詳解

PromiseA+的實現(xiàn)步驟詳解

The above is the detailed content of What you need to know about EsLint for newbies. For more information, please follow other related articles on the PHP Chinese website!