Javascript as the front end of the weapon, can be lu AI, can write drive, (ok, I admit THAT I made up), but JS as a weak type of dynamic language, in bringing us convenient at the same time, will quietly bury the pit, especially in large projects, carelessly, will work overtime to fill the pit, So in order to make things easier and faster, we choose to use ESLint as a javascript syntax checker and TSLint as a TypeScript syntax checker

  1. Improve code quality and avoid low-level bugs
  2. Standardized coding, unified code style

Eslint official address

Tslint official address

Configuration rules

Rules for ESLint and TSLint are already available online, and the configuration items are easy to understand. To avoid getting too long in this article, the configuration rules file has a syntax check – configuration Rules

eslint

'extends': [
        "eslint:recommended",
        "standard",
        "plugin:react/recommended",
        "plugin:vue/base",
    ],
Copy the code

These plug-ins are recommended. They are all popular specifications in the industry. The address of the plug-ins is as follows

standard

React check specification Plugin :react/recommended

Vue check specification Plugin :vue/base

tslint

Enable the following plug-ins

"extends": [
        "tslint:recommended"
    ]
Copy the code

Use with vscode

Two plug-ins are recommended

Tslint plugin address

Eslint plugin address

Shareable configuration

When there are multiple projects, we can consider independent configuration, unified management, can manage the configuration file through NPM, independent maintenance of the configuration file as a project, if it is an Intranet project, you can use NPM install

to install the detailed method as follows:

npm install <git remote url>: <protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]

Tip: The project name should be in the format eslint-config-mylint

In the configuration file.eslintrc.js, change it to the following

module.exports = {
    "extends": [
        "mylint"]};Copy the code

Fill in the pit

Inline rules

In some cases, comments are used for special treatment of individual files and lines of code

eslint

This file does not participate in syntax verification /* eslint-disable */

Console /* eslint no-console: 0 */ or /* eslint-disable no-console */

tslint

This file does not participate in syntax verification /* tslint:disable */

Console /* tslint:disable:no-console */

Jquery and arrow functions

  1. Arrow functions are recommended for use in projects because of their advantages and brevity. Arrow functions have one feature

The arrow function does not have its own this value. The this value in the arrow function inherits from the enclosing scope. There is no local this binding, that is, this is no longer dynamically changed

As part of the project is still based on jquery, there is no way to avoid binding event listeners to dom elements. When we use function, the DOM event is raised and this in the callback refers to the DOM. However, when we use arrow functions, this is not a DOM, but a context, for example

<div class="outer">
    <div class="inner">ww</div>
</div>
Copy the code
    $('.outer').on('click', (event) => {
        console.log(this) // Is no longer a DOM object
        console.log(event.target) // This is the DOM object
    })
Copy the code

So when modifying the dom element’s listener event callback, remember to synchronize this with it

  1. CurrentTarget is used when there are nested nodes in the listening nodeevent.targetThere will be problems with chestnuts as follows
<div class="outer">
    <div class="inner">cc</div>
</div>
Copy the code
 // If there are nested nodes in the listener, be careful
$('.outer').on('click', (event) => {
    console.log(event.target) // Get the clicked object inner
    console.log(event.currentTarget) Outer; // Get the listener object outer
})
Copy the code

So when cc is clicked, event.target gets the element that was clicked, and the listener gets event.currentTarget, which is this under function

Typescript custom declaration files

TypeScript is a superset of javascript, and it’s a joy to use, anyone can use it

The company has developed a set of UI framework internally. When using it with TS, we found that many methods lacked declarations, so we need to write declaration files. The official address is as follows

Typescript – Declaration files

As an aside goose

For CSS formatting, we recommend csscomb, which also supports online rule generation, which is not user-friendly, and currently works well with major editors and build tools

Refer to the article

Configuring ESLint

The popular way to understand dynamic typing, static typing; Strong type, weak type

CurrentTarget differs from Target