Back to Standard

JavaScript Standard Style

docs/RULES-fr.md

17.1.235.1 KB
Original Source

JavaScript Standard Style

<p align="center"> <a href="/docs/RULES-en.md">English</a> • <a href="/docs/RULES-esla.md">Español (Latinoamérica)</a> • <a href="/docs/RULES-fr.md">Français</a> • <a href="/docs/RULES-id.md">Bahasa Indonesia</a> • <a href="/docs/RULES-iteu.md">Italiano (Italian)</a> • <a href="/docs/RULES-ja.md">日本語 (Japanese)</a> • <a href="/docs/RULES-kokr.md">한국어 (Korean)</a> • <a href="/docs/RULES-ptbr.md">Português (Brasil)</a> • <a href="/docs/RULES-zhcn.md">简体中文 (Simplified Chinese)</a> • <a href="/docs/RULES-zhtw.md">繁體中文 (Taiwanese Mandarin)</a> </p>

Ceci est un sommaire des règles du standard JavaScript.

La meilleure façon d'apprendre plus sur standard c'est de l'installer et de l'essayer dans votre code.

Règles

  • Utilisez 2 espaces pour l'indentation.

    eslint: indent

    js
    function hello (name) {
      console.log('hi', name)
    }
    
  • Utilisez les apostrophes (') pour le texte à part pour éviter un caractère d'échappement.

    eslint: quotes

    js
    console.log('hello there')
    $("<div class='box'>")
    
  • Pas de variables non-utilisées.

    eslint: no-unused-vars

    js
    function myFunction () {
      var result = something()   // ✗ avoid
    }
    
  • Ajoutez un espace après les mots clés.

    eslint: keyword-spacing

    js
    if (condition) { ... }   // ✓ ok
    if(condition) { ... }    // ✗ avoid
    
  • Ajoutez un espace avant les parenthèses de déclaration de fonction.

    eslint: space-before-function-paren

    js
    function name (arg) { ... }   // ✓ ok
    function name(arg) { ... }    // ✗ avoid
    
    run(function () { ... })      // ✓ ok
    run(function() { ... })       // ✗ avoid
    
  • Utilisez toujours === au lieu de ==.

    Exception: obj == null est autorisé pour vérifier null || undefined.

    eslint: eqeqeq

    js
    if (name === 'John')   // ✓ ok
    if (name == 'John')    // ✗ avoid
    
    js
    if (name !== 'John')   // ✓ ok
    if (name != 'John')    // ✗ avoid
    
  • Les opérateurs infixes doivent être espacés.

    eslint: space-infix-ops

    js
    // ✓ ok
    var x = 2
    var message = 'hello, ' + name + '!'
    
    js
    // ✗ avoid
    var x=2
    var message = 'hello, '+name+'!'
    
  • Les virgules doivent être suivies d'un espace.

    eslint: comma-spacing

    js
    // ✓ ok
    var list = [1, 2, 3, 4]
    function greet (name, options) { ... }
    
    js
    // ✗ avoid
    var list = [1,2,3,4]
    function greet (name,options) { ... }
    
  • Gardez les 'else' sur la même ligne que leurs accolades.

    eslint: brace-style

    js
    // ✓ ok
    if (condition) {
      // ...
    } else {
      // ...
    }
    
    js
    // ✗ avoid
    if (condition) {
      // ...
    }
    else {
      // ...
    }
    
  • Pour les conditions 'if', utilisez des accolades.

    eslint: curly

    js
    // ✓ ok
    if (options.quiet !== true) console.log('done')
    
    js
    // ✓ ok
    if (options.quiet !== true) {
      console.log('done')
    }
    
    js
    // ✗ avoid
    if (options.quiet !== true)
      console.log('done')
    
  • Gérez toujours le paramètre de fonction err.

    eslint: handle-callback-err

    js
    // ✓ ok
    run(function (err) {
      if (err) throw err
      window.alert('done')
    })
    
    js
    // ✗ avoid
    run(function (err) {
      window.alert('done')
    })
    
  • Déclarez les globales de navigateur avec le commentaire /* global */.

    Les exceptions sont: window, document et navigator.

    Prévenez l'utilisation accidentelle de globales comme open, length, event, et name.

    js
    /* global alert, prompt */
    
    alert('hi')
    prompt('ok?')
    

    Référencer explicitement la fonction ou propriété sur window est aussi ok, bien que ce code ne marchera pas dans un Worker qui utilise self au lieu de window.

    eslint: no-undef

    js
    window.alert('hi')   // ✓ ok
    
  • Plusieurs lignes vides ne sont pas autorisées.

    eslint: no-multiple-empty-lines

    js
    // ✓ ok
    var value = 'hello world'
    console.log(value)
    
    js
    // ✗ avoid
    var value = 'hello world'
    
    
    console.log(value)
    
  • Pour l'opérateur ternaire sur plusieurs lignes, placez ? et : sur leurs propres lignes.

    eslint: operator-linebreak

    js
    // ✓ ok
    var location = env.development ? 'localhost' : 'www.api.com'
    
    // ✓ ok
    var location = env.development
      ? 'localhost'
      : 'www.api.com'
    
    // ✗ avoid
    var location = env.development ?
      'localhost' :
      'www.api.com'
    
  • Pour les déclarations var, écrivez chaque déclaration avec leur propre affectation.

    eslint: one-var

    js
    // ✓ ok
    var silent = true
    var verbose = true
    
    // ✗ avoid
    var silent = true, verbose = true
    
    // ✗ avoid
    var silent = true,
        verbose = true
    
  • Entourez les déclarations conditionelles avec des parenthèses supplémentaires. Cela rend plus clair que l'expression est intentionellement une affectation (=) au lieu d'une typo pour égalité (===).

    eslint: no-cond-assign

    js
    // ✓ ok
    while ((m = text.match(expr))) {
      // ...
    }
    
    // ✗ avoid
    while (m = text.match(expr)) {
      // ...
    }
    
  • Ajoutez des espaces dans les blocs écris sur une ligne.

    eslint: block-spacing

    js
      function foo () {return true}    // ✗ avoid
      function foo () { return true }  // ✓ ok
    
  • Utilisez la syntaxe CamelCase quand vous nommez les variables et fonctions.

    eslint: camelcase

    js
      function my_function () { }    // ✗ avoid
      function myFunction () { }     // ✓ ok
    
      var my_var = 'hello'           // ✗ avoid
      var myVar = 'hello'            // ✓ ok
    
  • Les virgules en fin de ligne ne sont pas autorisées.

    eslint: comma-dangle

    js
      var obj = {
        message: 'hello',   // ✗ avoid
      }
    
  • Les virgules doivent être placées à la fin de la ligne courante.

    eslint: comma-style

    js
      var obj = {
        foo: 'foo'
        ,bar: 'bar'   // ✗ avoid
      }
    
      var obj = {
        foo: 'foo',
        bar: 'bar'   // ✓ ok
      }
    
  • Le point doit être sur la même ligne que la propriété.

    eslint: dot-location

    js
      console.
        log('hello')  // ✗ avoid
    
      console
        .log('hello') // ✓ ok
    
  • Les fichiers doivent finir avec un nouvelle ligne.

    eslint: eol-last

  • Pas d'espace entre les identifiants de fonction et leurs invocations.

    eslint: func-call-spacing

    js
    console.log ('hello') // ✗ avoid
    console.log('hello')  // ✓ ok
    
  • Ajoutez un espace entre les deux points et la valeur dans les combinaisons clé/valeur.

    eslint: key-spacing

    js
    var obj = { 'key' : 'value' }    // ✗ avoid
    var obj = { 'key' :'value' }     // ✗ avoid
    var obj = { 'key':'value' }      // ✗ avoid
    var obj = { 'key': 'value' }     // ✓ ok
    
  • Les noms de constructeur doivent commencer avec une lettre capitale.

    eslint: new-cap

    js
    function animal () {}
    var dog = new animal()    // ✗ avoid
    
    function Animal () {}
    var dog = new Animal()    // ✓ ok
    
  • Un constructeur sans argument doit être invoqué avec des parenthèses.

    eslint: new-parens

    js
    function Animal () {}
    var dog = new Animal    // ✗ avoid
    var dog = new Animal()  // ✓ ok
    
  • Les objets doivent contenir un 'getter' quand un 'setter' est défini.

    eslint: accessor-pairs

    js
    var person = {
      set name (value) {    // ✗ avoid
        this._name = value
      }
    }
    
    var person = {
      set name (value) {
        this._name = value
      },
      get name () {         // ✓ ok
        return this._name
      }
    }
    
  • Les constructeurs de classes dérivées doivent appeler super.

    eslint: constructor-super

    js
    class Dog {
      constructor () {
        super()   // ✗ avoid
      }
    }
    
    class Dog extends Mammal {
      constructor () {
        super()   // ✓ ok
      }
    }
    
  • Pour les tableaux (arrays), utilisez les expressions littérales au lieu des constructeurs.

    eslint: no-array-constructor

    js
    var nums = new Array(1, 2, 3)   // ✗ avoid
    var nums = [1, 2, 3]            // ✓ ok
    
  • Évitez d'utiliser arguments.callee et arguments.caller.

    eslint: no-caller

    js
    function foo (n) {
      if (n <= 0) return
    
      arguments.callee(n - 1)   // ✗ avoid
    }
    
    function foo (n) {
      if (n <= 0) return
    
      foo(n - 1)
    }
    
  • Évitez de modifier les variables dans les déclarations de classes.

    eslint: no-class-assign

    js
    class Dog {}
    Dog = 'Fido'    // ✗ avoid
    
  • Évitez de modifier les variables declarées avec const.

    eslint: no-const-assign

    js
    const score = 100
    score = 125       // ✗ avoid
    
  • Évitez d'utiliser les expressions constantes dans les conditions (à part dans les boucles).

    eslint: no-constant-condition

    js
    if (false) {    // ✗ avoid
      // ...
    }
    
    if (x === 0) {  // ✓ ok
      // ...
    }
    
    while (true) {  // ✓ ok
      // ...
    }
    
  • Pas de charactère de contrôle dans les expressions régulières.

    eslint: no-control-regex

    js
    var pattern = /\x1f/    // ✗ avoid
    var pattern = /\x20/    // ✓ ok
    
  • Pas de debugger.

    eslint: no-debugger

    js
    function sum (a, b) {
      debugger      // ✗ avoid
      return a + b
    }
    
  • Pas d'opérateur delete sur les variables.

    eslint: no-delete-var

    js
    var name
    delete name     // ✗ avoid
    
  • Pas d'arguments dupliqués dans les définitions de fonction.

    eslint: no-dupe-args

    js
    function sum (a, b, a) {  // ✗ avoid
      // ...
    }
    
    function sum (a, b, c) {  // ✓ ok
      // ...
    }
    
  • Pas de noms dupliqués dans les membres de classe.

    eslint: no-dupe-class-members

    js
    class Dog {
      bark () {}
      bark () {}    // ✗ avoid
    }
    
  • Pas de clés dupliquées dans les objets littéraux.

    eslint: no-dupe-keys

    js
    var user = {
      name: 'Jane Doe',
      name: 'John Doe'    // ✗ avoid
    }
    
  • Pas de label case dupliqué dans les blocs switch.

    eslint: no-duplicate-case

    js
    switch (id) {
      case 1:
        // ...
      case 1:     // ✗ avoid
    }
    
  • Utilisez une seule instruction d'import par module.

    eslint: no-duplicate-imports

    js
    import { myFunc1 } from 'module'
    import { myFunc2 } from 'module'          // ✗ avoid
    
    import { myFunc1, myFunc2 } from 'module' // ✓ ok
    
  • Pas de classes de charactères vides dans les expressions régulières.

    eslint: no-empty-character-class

    js
    const myRegex = /^abc[]/      // ✗ avoid
    const myRegex = /^abc[a-z]/   // ✓ ok
    
  • Pas d'affectation par décomposition vide.

    eslint: no-empty-pattern

    js
    const { a: {} } = foo         // ✗ avoid
    const { a: { b } } = foo      // ✓ ok
    
  • N'utilisez pas eval().

    eslint: no-eval

    js
    eval( "var result = user." + propName ) // ✗ avoid
    var result = user[propName]             // ✓ ok
    
  • Ne réaffectez pas les exceptions dans les clauses catch.

    eslint: no-ex-assign

    js
    try {
      // ...
    } catch (e) {
      e = 'new value'             // ✗ avoid
    }
    
    try {
      // ...
    } catch (e) {
      const newVal = 'new value'  // ✓ ok
    }
    
  • N'étendez pas les objet natifs.

    eslint: no-extend-native

    js
    Object.prototype.age = 21     // ✗ avoid
    
  • Evitez les liens de fonctions inutiles.

    eslint: no-extra-bind

    js
    const name = function () {
      getName()
    }.bind(user)    // ✗ avoid
    
    const name = function () {
      this.getName()
    }.bind(user)    // ✓ ok
    
  • Evitez les modifications de booléens inutiles.

    eslint: no-extra-boolean-cast

    js
    const result = true
    if (!!result) {   // ✗ avoid
      // ...
    }
    
    const result = true
    if (result) {     // ✓ ok
      // ...
    }
    
  • Pas de parenthèses inutiles autour des expressions de fonction.

    eslint: no-extra-parens

    js
    const myFunc = (function () { })   // ✗ avoid
    const myFunc = function () { }     // ✓ ok
    
  • Utilisez break pour éviter de continuer dans les cas de switch.

    eslint: no-fallthrough

    js
    switch (filter) {
      case 1:
        doSomething()    // ✗ avoid
      case 2:
        doSomethingElse()
    }
    
    switch (filter) {
      case 1:
        doSomething()
        break           // ✓ ok
      case 2:
        doSomethingElse()
    }
    
    switch (filter) {
      case 1:
        doSomething()
        // fallthrough  // ✓ ok
      case 2:
        doSomethingElse()
    }
    
  • Pas de nombre décimal sans partie entière.

    eslint: no-floating-decimal

    js
    const discount = .5      // ✗ avoid
    const discount = 0.5     // ✓ ok
    
  • Evitez de réaffecter les déclarations de fonction.

    eslint: no-func-assign

    js
    function myFunc () { }
    myFunc = myOtherFunc    // ✗ avoid
    
  • Ne réaffectez pas les variables globales 'read-only'.

    eslint: no-global-assign

    js
    window = {}     // ✗ avoid
    
  • Pas d'eval() implicite.

    eslint: no-implied-eval

    js
    setTimeout("alert('Hello world')")                   // ✗ avoid
    setTimeout(function () { alert('Hello world') })     // ✓ ok
    
  • Pas de déclaration de fonction dans les blocs imbriqués.

    eslint: no-inner-declarations

    js
    if (authenticated) {
      function setAuthUser () {}    // ✗ avoid
    }
    
  • Pas d'expressions régulières invalides dans les constructeurs RegExp.

    eslint: no-invalid-regexp

    js
    RegExp('[a-z')    // ✗ avoid
    RegExp('[a-z]')   // ✓ ok
    
  • Pas d'espace blanc irrégulier.

    eslint: no-irregular-whitespace

    js
    function myFunc () /*<NBSP>*/{}   // ✗ avoid
    
  • N'utilisez pas __iterator__.

    eslint: no-iterator

    js
    Foo.prototype.__iterator__ = function () {}   // ✗ avoid
    
  • Pas d'étiquette qui partage un nom avec une variable dans le scope.

    eslint: no-label-var

    js
    var score = 100
    function game () {
      score: while (true) {      // ✗ avoid
        score -= 10
        if (score > 0) continue score
        break
      }
    }
    
  • Pas d'instruction d'étiquette.

    eslint: no-labels

    js
    label:
      while (true) {
        break label     // ✗ avoid
      }
    
  • Pas de blocs imbriqués inutiles.

    eslint: no-lone-blocks

    js
    function myFunc () {
      {                   // ✗ avoid
        myOtherFunc()
      }
    }
    
    function myFunc () {
      myOtherFunc()       // ✓ ok
    }
    
  • Evitez de mélanger les espaces et les tabulations pour l'indentation.

    eslint: no-mixed-spaces-and-tabs

  • N'utilisez pas les espaces multiples à part pour l'indentation.

    eslint: no-multi-spaces

    js
    const id =    1234    // ✗ avoid
    const id = 1234       // ✓ ok
    
  • Pas de chaines de charactères multi-lignes.

    eslint: no-multi-str

    js
    const message = 'Hello \
                     world'     // ✗ avoid
    
  • Pas de new sans attribuer un objet à une variable.

    eslint: no-new

    js
    new Character()                     // ✗ avoid
    const character = new Character()   // ✓ ok
    
  • N'utilisez pas le constructeur Function.

    eslint: no-new-func

    js
    var sum = new Function('a', 'b', 'return a + b')    // ✗ avoid
    
  • N'utilisez pas le constructeur Object.

    eslint: no-new-object

    js
    let config = new Object()   // ✗ avoid
    
  • N'utilisez pas new require.

    eslint: no-new-require

    js
    const myModule = new require('my-module')    // ✗ avoid
    
  • N'utilisez pas le constructeur Symbol.

    eslint: no-new-symbol

    js
    const foo = new Symbol('foo')   // ✗ avoid
    
  • N'utilisez pas les instances d'emballage de types primitifs.

    eslint: no-new-wrappers

    js
    const message = new String('hello')   // ✗ avoid
    
  • N'appelez pas les propriétes d'objets globaux en tant que fonctions.

    eslint: no-obj-calls

    js
    const math = Math()   // ✗ avoid
    
  • Pas de littéraux en base octal.

    eslint: no-octal

    js
    const octal = 042         // ✗ avoid
    const decimal = 34        // ✓ ok
    const octalString = '042' // ✓ ok
    
  • Pas de séquence d'echappement octale dans les chaines de charactères littérales.

    eslint: no-octal-escape

    js
    const copyright = 'Copyright \251'  // ✗ avoid
    
  • Evitez les concaténations de chaines de charactères quand vous utilisez __dirname et __filename.

    eslint: no-path-concat

    js
    const pathToFile = __dirname + '/app.js'            // ✗ avoid
    const pathToFile = path.join(__dirname, 'app.js')   // ✓ ok
    
  • Evitez d'utiliser __proto__. Utilisez plutôt getPrototypeOf.

    eslint: no-proto

    js
    const foo = obj.__proto__               // ✗ avoid
    const foo = Object.getPrototypeOf(obj)  // ✓ ok
    
  • Ne redéclarez pas les variables.

    eslint: no-redeclare

    js
    let name = 'John'
    let name = 'Jane'     // ✗ avoid
    
    let name = 'John'
    name = 'Jane'         // ✓ ok
    
  • Evitez d'utiliser plusieurs espaces dans les expressions regulières.

    eslint: no-regex-spaces

    js
    const regexp = /test   value/   // ✗ avoid
    
    const regexp = /test {3}value/  // ✓ ok
    const regexp = /test value/     // ✓ ok
    
  • Les affectations dans les instructions de retour doivent être entre parenthèses.

    eslint: no-return-assign

    js
    function sum (a, b) {
      return result = a + b     // ✗ avoid
    }
    
    function sum (a, b) {
      return (result = a + b)   // ✓ ok
    }
    
  • Evitez d'affecter une variable à elle-même.

    eslint: no-self-assign

    js
    name = name   // ✗ avoid
    
  • Evitez de comparer une variable à elle-même.

    eslint: no-self-compare

    js
    if (score === score) {}   // ✗ avoid
    
  • Evitez d'utiliser l'opérateur virgule.

    eslint: no-sequences

    js
    if (doSomething(), !!test) {}   // ✗ avoid
    
  • Les mots réservés ne doivent pas être affectés.

    eslint: no-shadow-restricted-names

    js
    let undefined = 'value'     // ✗ avoid
    
  • Les tableaux avec des valeurs vides ne sont pas autorisés.

    eslint: no-sparse-arrays

    js
    let fruits = ['apple',, 'orange']       // ✗ avoid
    
  • Les tabulations ne devraient pas être utilisées

    eslint: no-tabs

  • Les chaines de charactères normales ne doivent pas contenir de placeholder pour les modèles de libellés.

    eslint: no-template-curly-in-string

    js
    const message = 'Hello ${name}'   // ✗ avoid
    const message = `Hello ${name}`   // ✓ ok
    
  • super() doit être appelé avant d'utiliser this.

    eslint: no-this-before-super

    js
    class Dog extends Animal {
      constructor () {
        this.legs = 4     // ✗ avoid
        super()
      }
    }
    
  • N'utilisez throw que pour l'objet Error.

    eslint: no-throw-literal

    js
    throw 'error'               // ✗ avoid
    throw new Error('error')    // ✓ ok
    
  • Les espaces blancs ne sont pas autorisés en fin de ligne.

    eslint: no-trailing-spaces

  • Initialiser avec undefined n'est pas autorisé.

    eslint: no-undef-init

    js
    let name = undefined    // ✗ avoid
    
    let name
    name = 'value'          // ✓ ok
    
  • Pas de réutilisation de conditions dans les boucles.

    eslint: no-unmodified-loop-condition

    js
    for (let i = 0; i < items.length; j++) {...}    // ✗ avoid
    for (let i = 0; i < items.length; i++) {...}    // ✓ ok
    
  • Pas d'opérateur ternaire quand d'autres alternatives existent.

    eslint: no-unneeded-ternary

    js
    let score = val ? val : 0     // ✗ avoid
    let score = val || 0          // ✓ ok
    
  • Pas de code inaccessible apres les instructions return, throw, continue, et break.

    eslint: no-unreachable

    js
    function doSomething () {
      return true
      console.log('never called')     // ✗ avoid
    }
    
  • Pas d'instruction de flow d'opération dans les blocs finally.

    eslint: no-unsafe-finally

    js
    try {
      // ...
    } catch (e) {
      // ...
    } finally {
      return 42     // ✗ avoid
    }
    
  • Dans les opérateurs relationels, l'élément de gauche ne doit pas etre nié.

    eslint: no-unsafe-negation

    js
    if (!key in obj) {}       // ✗ avoid
    if (!(key in obj)) {}     // ✓ ok
    
  • Evitez l'usage inutile de.call() et .apply().

    eslint: no-useless-call

    js
    sum.call(null, 1, 2, 3)   // ✗ avoid
    
  • Evitez d'utiliser les propriétés calculées inutiles dans les objets.

    eslint: no-useless-computed-key

    js
    const user = { ['name']: 'John Doe' }   // ✗ avoid
    const user = { name: 'John Doe' }       // ✓ ok
    
  • Pas de constructeur inutile.

    eslint: no-useless-constructor

    js
    class Car {
      constructor () {      // ✗ avoid
      }
    }
    
  • Pas d'utilisation inutile de l'idenificateur échappé.

    eslint: no-useless-escape

    js
    let message = 'Hell\o'  // ✗ avoid
    
  • Utiliser le même nom pour renommer import, export, et les affectations par décomposition n'est pas autorisé.

    eslint: no-useless-rename

    js
    import { config as config } from './config'     // ✗ avoid
    import { config } from './config'               // ✓ ok
    
  • Pas d'espace blanc avant les propriétés.

    eslint: no-whitespace-before-property

    js
    user .name      // ✗ avoid
    user.name       // ✓ ok
    
  • N'utilisez pas d'instructions avec with.

    eslint: no-with

    js
    with (val) {...}    // ✗ avoid
    
  • Soyez consistent dans la structure des propriétés d'objet.

    eslint: object-property-newline

    js
    const user = {
      name: 'Jane Doe', age: 30,
      username: 'jdoe86'            // ✗ avoid
    }
    
    const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' }    // ✓ ok
    
    const user = {
      name: 'Jane Doe',
      age: 30,
      username: 'jdoe86'
    }                                                                 // ✓ ok
    
  • Pas d'espace a l'intérieur des blocs.

    eslint: padded-blocks

    js
    if (user) {
                                // ✗ avoid
      const name = getName()
    
    }
    
    if (user) {
      const name = getName()    // ✓ ok
    }
    
  • Pas d'espace blanc entre les opérateurs de décomposition and leurs expressions.

    eslint: rest-spread-spacing

    js
    fn(... args)    // ✗ avoid
    fn(...args)     // ✓ ok
    
  • Les point-virgules doivent avoir suivis mais pas précédés d'un espace.

    eslint: semi-spacing

    js
    for (let i = 0 ;i < items.length ;i++) {...}    // ✗ avoid
    for (let i = 0; i < items.length; i++) {...}    // ✓ ok
    
  • Ajoutez un espace avant les blocs.

    eslint: space-before-blocks

    js
    if (admin){...}     // ✗ avoid
    if (admin) {...}    // ✓ ok
    
  • Pas d'espace a l'intérieur des parenthèses.

    eslint: space-in-parens

    js
    getName( name )     // ✗ avoid
    getName(name)       // ✓ ok
    
  • Les opérateurs unaires doivent être suivis d'un espace.

    eslint: space-unary-ops

    js
    typeof!admin        // ✗ avoid
    typeof !admin        // ✓ ok
    
  • Utilisez des espaces à l'intérieur des commentaires.

    eslint: spaced-comment

    js
    //comment           // ✗ avoid
    // comment          // ✓ ok
    
    /*comment*/         // ✗ avoid
    /* comment */       // ✓ ok
    
  • Pas d'espace dans les modèles de libellés.

    eslint: template-curly-spacing

    js
    const message = `Hello, ${ name }`    // ✗ avoid
    const message = `Hello, ${name}`      // ✓ ok
    
  • Utilisez isNaN() pour vérifier NaN.

    eslint: use-isnan

    js
    if (price === NaN) { }      // ✗ avoid
    if (isNaN(price)) { }       // ✓ ok
    
  • typeof doit être comparé à une chaine de charactères valide.

    eslint: valid-typeof

    js
    typeof name === 'undefimed'     // ✗ avoid
    typeof name === 'undefined'     // ✓ ok
    
  • Les expressions de fonction immediatement invoquées (IIFEs) doivent être encadrées par des parenthèses.

    eslint: wrap-iife

    js
    const getName = function () { }()     // ✗ avoid
    
    const getName = (function () { }())   // ✓ ok
    const getName = (function () { })()   // ✓ ok
    
  • Le * dans les expressions yield* doit être précédé et suivi d'un espace.

    eslint: yield-star-spacing

    js
    yield* increment()    // ✗ avoid
    yield * increment()   // ✓ ok
    
  • Evitez les conditions Yoda.

    eslint: yoda

    js
    if (42 === age) { }    // ✗ avoid
    if (age === 42) { }    // ✓ ok
    

Point-virgules

  • Pas de point-virgules. (voir: 1, 2, 3)

    eslint: semi

    js
    window.alert('hi')   // ✓ ok
    window.alert('hi');  // ✗ avoid
    
  • Ne commencez jamais une ligne avec (, [, `, ou autres possibilités improbables.

    C'est le seul piège avec l'omission des point-virgules, et standard vous protège contre ce probleme potentiel.

    (La liste complète est: [, (, `, +, *, /, -, ,, ., mais la plupart n'apparaitront jamais en début de ligne dans un vrai bloc de code.)

    eslint: no-unexpected-multiline

    js
    // ✓ ok
    ;(function () {
      window.alert('ok')
    }())
    
    // ✗ avoid
    (function () {
      window.alert('ok')
    }())
    
    js
    // ✓ ok
    ;[1, 2, 3].forEach(bar)
    
    // ✗ avoid
    [1, 2, 3].forEach(bar)
    
    js
    // ✓ ok
    ;`hello`.indexOf('o')
    
    // ✗ avoid
    `hello`.indexOf('o')
    

    Note: Si vous écrivez souvent du code comme ça, vous essayez peut-être d'être trop astucieux.

    Ce genre de raccourcis est découragé, en faveur d'expressions claires et lisibles, lorsque possible.

    Au lieu de:

    js
    ;[1, 2, 3].forEach(bar)
    

    Ceci est préféré:

    js
    var nums = [1, 2, 3]
    nums.forEach(bar)
    

Lecture utile

Et une video:

Tous les minificateurs populaires de code utilisés aujourd'hui utilisent la minification basées sur AST, donc ils peuvent manipuler le JavaScript sans point-virgules sans problème (depuis que les point-virgules ne sont pas requis avec JavaScript).

Extrait de "An Open Letter to JavaScript Leaders Regarding Semicolons":

[Compter sur l'insertion automatique de point-virgule] est plutot sur, et est une syntaxe JavaScript parfaitement valide que chaque navigateur comprend. Closure compiler, yuicompressor, packer, et jsmin peuvent tous le minifier proprement. Il n'y a pas d'impact sur la performance.

Je regrette qu'au lieu de vous éduquer, les leaders de cette communauté vous ont mentis. C'est honteux. Je recommende apprendre comment les instructions en JavaScript se terminent (et dans quels cas elles ne se terminent pas), pour que vous puissiez écrire du code qui vous plait.

En general, \n termine une instruction sauf si:

  1. L'instruction a une parenthèse qui n'est pas fermée, un tableau ou objet littéral ou finit d'une facon qui n'est pas valide. (Par exemple, avec un . ou ,.)
  2. La ligne est -- ou ++ (au quel cas il diminuera ou augmentera l'element qui suit.)
  3. C'est un for(), while(), do, if(), ou else, et il n'y a pas de {
  4. La prochaine ligne commence par[, (, +, *, /, -, ,, ., ou un autre opérateur binaire qui peut seulement être placé entre deux éléments dans une seule expression.

Le premier point est plutôt évident. Même JSLint est ok avec les charactères \n en format JSON et les constructeurs entre parenthèses, et avec les instructions var qui couvrent plusieurs lignes finissant par ,.

Le second point est super bizarre. Je n'ai jamais vu un cas (en dehors de ce genre de conversations) ou vous voudriez écrire i\n++\nj, qui, au fait, est analysé comme i; ++j, et pas i++; j.

Le troisième est bien compris, même si généralement méprisé. if (x)\ny() est l'equivalent de if (x) { y() }. Le concept ne finit pas jusqu'à ce qu'il atteigne un bloc ou une instruction.

; est une instruction valide, donc if(x); est equivalent à if(x){} ou, “If x, do nothing.” C'est plus couramment appliqué aux boucles ou la boucle vérifie aussi si la fonction est mise à jour. C'est pas courant, mais ça arrive.

Le quatrième est généralement le cas “oh non, vous avez besoin de point-virgules!”. Mais, il s'avère qu'il est plutot facile de prefixer ces lignes avec des point-virgules si vous n'avez pas l'intention de les utiliser comme continutions de la ligne précédente. Par exemple, au lieu de ça:

js
foo();
[1,2,3].forEach(bar);

vous pourriez faire ça:

js
foo()
;[1,2,3].forEach(bar)

L'avantage c'est que les prefixes sont plus faciles à remarquer, quand vous êtes habitués à ne jamais voir de lignes commencant par ( ou [ sans point-virgules.