Maison  >  Article  >  interface Web  >  Quel est le style de code js ? Introduction au style de codage JavaScript

Quel est le style de code js ? Introduction au style de codage JavaScript

不言
不言original
2018-08-09 18:00:111500parcourir

Cet article vous explique quel est le style de code js ? L'introduction au style de codage JavaScript a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

1. Normes

Afin de s'entendre sur le style de codage de chacun, des spécifications de style de codage relativement standardisées sont nées dans la communauté :

  • JavaScript Style standard

  • Style JavaScript Airbnb

2 ESLint

ESLint fournit simplement des outils et des règles, comment. configurez-les. Les règles dépendent entièrement de l'utilisateur. Ceci est illustré en utilisant la configuration Airbnb.

2.1. Installer

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


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

2.2. Configurer

# 创建 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

Générer enfin le fichier .eslint.json :

{
    "extends": "airbnb-base"}

2.3 . Utilisez

2.3.1 dans la ligne de commande

$ ./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)

2.3.2 Configurez le script npm

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

2.3.3. >

Recherchez et installez le plug-in eslint

Configurer les paramètres utilisateur :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn