ESLint is an excellent JavaScript code checker. You can use ESLint to check TypeScript and JavaScript code. In this article I’ll show you step by step how to use ESLint to check code in a project.

introduce

ESLint and TSLint

ESLint is a JavaScript code checker that uses ESLint to make your code conform to a specific style format. And check that the code conforms to format specifications.

Some of you may have heard of TSLint, which makes its living with TypeScript. But in 2019, the TSLint team decided not to continue maintenance and recommended ESLint instead. The main reason for not maintaining is that TSLint and ESLint function the same and have a lot of duplicate code. So I stopped.

We can use ESLint for TypeScript projects in the future.

Create the project and install the dependencies

Create the Node.js project

mkdir typescript-eslint-project
cd typescript-eslint-project
npm init -y
Copy the code

Install dependencies

npm install typescript eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
Copy the code

Create an ESLint configuration file.eslintrc

touch .eslintrc
Copy the code

Write the following configuration

{
  "root": true."parser": "@typescript-eslint/parser"."plugins": [
    "@typescript-eslint"]."extends": [
    "eslint:recommended"."plugin:@typescript-eslint/eslint-recommended"."plugin:@typescript-eslint/recommended"]}Copy the code

Creating ESLint ignores the file configuration.eslintignore to specify directories or files that we don’t need to check

touch .eslintignore
Copy the code

Here I omit the node_modules folder and the TypeScript compilation output folder dist.

node_modules
dist
Copy the code

Add lint command to package.json

{
  "scripts": {..."lint": "eslint . --ext .ts",}}Copy the code

Next, create a ts file, create a SRC folder in the root directory, and create an index.ts file under SRC

src/
	index.ts
Copy the code

Write a piece of test code

console.log('my typescript eslint project')
Copy the code

Parsing, let’s test Lint

npm run lint
Copy the code

There is no output in the terminal, indicating that the code is correct and there is no error.

ESLint rules

Rules in ESLint have three Settings: OFF, WARN, and ERROR.

“Off” can be replaced with 0 to turn off the rule

“Warn” can be replaced with 1, which opens the rule and warns, but does not report an error

“Error” can be replaced by 2, which means to open the rule and report an error directly

In the.eslintrc file, add a rules property, which is the JSON object type.

{
  "root": true."parser": "@typescript-eslint/parser"."plugins": [
    "@typescript-eslint"]."extends": [
    "eslint:recommended"."plugin:@typescript-eslint/eslint-recommended"."plugin:@typescript-eslint/recommended"]."rules": {}// Add attributes
}
Copy the code

To add rules, you can go to the ESLint website (eslint.org/docs/rules/…

Now we add a no-console rule, which means that ESLint will throw an error if there is console code in the code. For detailed rules and configurations, see eslint.org/docs/rules/…

Modify the. Eslintrc file

{
  "root": true."parser": "@typescript-eslint/parser"."plugins": [
    "@typescript-eslint"]."extends": [
    "eslint:recommended"."plugin:@typescript-eslint/eslint-recommended"."plugin:@typescript-eslint/recommended"]."rules": { 
    "no-console": 2 // If there is console, an error is thrown}}Copy the code

Run ESLint

npm run lint
Copy the code

Then we’ll get an error from ESLint

/typescript-eslint-project/src/index.ts
  1:1  error  Unexpected console statement  no-console

✖ 1 problem (1 error, 0 warnings)	
Copy the code

Then we turn off no-console

{
  "root": true."parser": "@typescript-eslint/parser"."plugins": [
    "@typescript-eslint"]."extends": [
    "eslint:recommended"."plugin:@typescript-eslint/eslint-recommended"."plugin:@typescript-eslint/recommended"]."rules": { 
    "no-console": 0 // Use 0 or "off", both are the same}}Copy the code

Run ESLint again

npm run lint
Copy the code

Everything becomes normal

Use ESLint in a real project

If your team is lax about code and doesn’t want to spend time looking at ESLint rules every time, you can use ESLint :recommended, a configuration that ESLint recommends.

If the team is strict with the code and doesn’t want to spend time looking at ESLint rules for each one, you can use ESLint rules that are open source from large companies, such as Airbnb or Facebook, and take them and make simple changes. My team is currently using Airbnb’s rules.

If the team is strict with the code and has the time, you can make your own rules by following ESLint rules one by one.

In real world projects, Husky and ESLint will be used together, so that when team members commit code with Git, Lint checks will be performed to prevent the wrong code from being committed to the repository.

Husky and ESLint configurations can be seen in my previous article:

Juejin. Cn/post / 700169…

Use the ESLint plugin

When the rules provided by the authorities do not meet our needs, we can find some third-party plug-ins, or write our own plug-ins.

Below loading a plug-in no interesting – loops, the function of it is prohibited to use in the code for that for -in, while, the do – while, the for – cycle, you can use the map and forEach method instead.

Here is a list of all the plugins and configurations for ESLint: awese-esLint

Let’s install it

npm install eslint-plugin-no-loops -D
Copy the code

Then modify the.eslintrc file to plugins for no-loops and add rules for no-loops.

{
  "root": true."parser": "@typescript-eslint/parser"."plugins": [
    "@typescript-eslint"."no-loops" // Add no-loops]."extends": [
    "eslint:recommended"."plugin:@typescript-eslint/eslint-recommended"."plugin:@typescript-eslint/recommended"]."rules": {
    "no-console": 0."no-loops/no-loops": 2 // Add no-loops rule}}Copy the code

Then we add a for loop to SRC /index.ts

console.log('my typescript eslint project')

for (let i = 0; i < 10; i++) {
  console.log(i)
}
Copy the code

Then run Lint

npm run lint
Copy the code

Then you get the following error

/typescript-eslint-project/src/index.ts
  3:1  error  loops are not allowed  no-loops/no-loops
Copy the code

Import ESLint third-party configuration

Since ESLint has hundreds of rules, assuming you don’t want to configure them one by one, we can import configurations that someone else has configured. Let’s introduce Shopify’s configuration.

Install it first

npm install eslint-plugin-shopify -D
Copy the code

Then modify the.eslintrc file

{
  "root": true."parser": "@typescript-eslint/parser"."plugins": [
    "@typescript-eslint"]."extends": [
    "plugin:shopify/esnext"]."rules": {
    "no-console": 0}}Copy the code

We can introduce multiple rules and write them to extends’s array

We’re running Lint

npm run lint
Copy the code

You can see the following error

/typescript-eslint-project/src/index.ts
  1:1   error  'console' is not defined                       no-undef
  1:44  error  Missing semicolon                              babel/semi
  1:44  error  Missing semicolon                              semi
  4:3   error  'console' is not defined                       no-undef
  4:17  error  Missing semicolon                              babel/semi
  4:17  error  Missing semicolon                              semi
  5:2   error  Newline required at end of file but not found  eol-last

✖ 7 problems (7 errors, 0 warnings)
  5 errors and 0 warnings potentially fixable with the `--fix` option.
Copy the code

Use ESLint to automatically fix code errors

As you can see from the above error, it tells us that there are seven problems, five of which can be fixed automatically with –fix.

* 7 problems (7 errors, 0 warnings) 5 errors and 0 warnings * fixable with the –fix option.

Json to add lint:fix

{
  "scripts": {..."lint": "eslint . --ext .ts"."lint:fix": "eslint . --ext .ts --fix"}},Copy the code

Then run Lint :fix

npm run lint:fix
Copy the code

You can see that there are 5 fewer errors because it was automatically fixed by ESLint

/typescript-eslint-project/src/index.ts
  1:1  error  'console' is not defined  no-undef
  4:3  error  'console' is not defined  no-undef

✖ 2 problems (2 errors, 0 warnings)
Copy the code

ESLint modified the code for us by adding a semicolon at the end of the code

console.log('my typescript eslint project');

for (let i = 0; i < 10; i++) {
  console.log(i);
}
Copy the code

Program source code

Github.com/cmdfas/type…

nagging

If this article is useful to you, your likes, comments and concerns are the biggest encouragement for me O(∩_∩)O👍👍👍

I am aufu Kosi, pay attention to me, progress a little bit every day, as soon as possible to achieve financial freedom.