What is the js code style? Introduction to JavaScript coding style-JS Tutorial-php.cn

What is the js code style? Introduction to JavaScript coding style

不言

Release： 2018-08-09 18:00:11

Original

1568 people have browsed it

This article brings you what is the js code style? The introduction to JavaScript coding style has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Standards

In order to agree on everyone’s coding style, some relatively standardized coding style specifications have been born in the community:

JavaScript Standard Style
Airbnb JavaScript Style

2. ESLint

ESLint only provides tools and rules, how to configure these The rules are entirely up to the user. This is illustrated using the Airbnb configuration.

2.1. Installation

$ npm info "eslint-config-airbnb@latest" peerDependencies
{ eslint: &#39;^4.19.1&#39;,  &#39;eslint-plugin-import&#39;: &#39;^2.12.0&#39;,  &#39;eslint-plugin-jsx-a11y&#39;: &#39;^6.0.3&#39;,  &#39;eslint-plugin-react&#39;: &#39;^7.9.1&#39; }


$ npx -v6.1.0$ npx install-peerdeps --dev eslint-config-airbnb+ eslint-config-airbnb@17.0.0+ eslint-plugin-jsx-a11y@6.1.1+ eslint-plugin-react@7.10.0+ eslint-plugin-import@2.13.0+ eslint@4.19.1SUCCESS eslint-config-airbnb and its peerDeps were installed successfully.

Copy after login

2.2. Configuration

# 创建 package.json$ npm init -y

$ eslint --init? How would you like to configure ESLint?
  Answer questions about your style
❯ Use a popular style guide
  Inspect your JavaScript file(s)

? Which style guide do you want to follow?
  Google
❯ Airbnb
  Standard

? Do you use React? No
? What format do you want your config file to be in? JSON

+ eslint-plugin-import@2.13.0+ eslint-config-airbnb-base@13.0.0

Copy after login

Finally generate .eslint.json file:

{
    "extends": "airbnb-base"}

Copy after login

2.3. Use

2.3.1. In the command line

$ ./node_modules/.bin/eslint -v
v4.19.1$ ./node_modules/.bin/eslint ./blog//Users/forwardNow/develop/work/study/blog/2018/08/test.js  35:1  warning  Unexpected console statement  no-console✖ 1 problem (0 errors, 1 warning)

Copy after login

2.3.2. Configure npm script

"scripts": {
  "eslint": "./node_modules/.bin/eslint ./src/"},

Copy after login

2.3.3. In vscode

Search and install the eslint plug-in

Configure User Settings:

"editor.detectIndentation": false,"editor.tabSize": 2,"eslint.autoFixOnSave": true,

Copy after login

The above is the detailed content of What is the js code style? Introduction to JavaScript coding style. For more information, please follow other related articles on the PHP Chinese website!