Bescherelle

ton code !

Du code valide mais aussi respectueux de standards,
sans efforts, c'est possible !

Pour mieux collaborer ou simplement être plus efficace,
les linters sont tes amis…

FEWEB - DEBUG FRONT-END - MARS 2017

Thierry MICHEL, belge, plus tout jeune,
presque 20 ans de web…

Après quelques années comme formateur,
je suis de retour IRL
pour dresser des pixels chez EPIC,
une valeureuse agence digitale
et créative !

@thierrymichel

Code…

code is poetry

([]+/H/)[1&11>>1]+(+[[]+(1-~1<<1)+(~1+1e1)+(1%11)+(1|1>>1|1)+(~1+1e1)+(.1^!1)])[[([]+!![
11])[11^11]+[[{}]+{}][1/1.1&1][1]]+([[]+111/!1][+!1][([{}]+{})[1e1>>1]+[[],[]+{}][1&11>>
1][1|[]]+([]+[][111])[1&1]+[{},1e1,!1+{}][~~(1.1+1.1)][1^1<<1]+(11/!{}+{})[1-~1<<1]+[!!{
}+[]][+(11>11)][[]+1]+(/^/[1.11]+/&/)[.1^!1]+[{},[{}]+{},1][1&11>>1][1+1e1+1]+([]+!!{})[
.1^!1]+([]+{}+[])[[]+1]+[!!{}+{}][!11+!111][[]+1]]+[])[(!/~/+{})[1|1<<1]+[/=/,[]+[][1]][
1&11>>1][1&1>>1]+([]+{})[~~(1.1+1.1)]+[1,!1+{}][1%11][1^1<<1]+(111/[]+/1/)[~1+1e1+~1]+[!
!/-/+[]][+(11>11)][1]]((1<<1^11)+((+(1<1))==([]+/-/[(!![11]+[])[+!1]+(!!/-/+{})[1-~1]+([
]+!/~/)[1-~1]+(!!/-/+{})[!111+!111]])[11%11]),-~11>>1)](~1-~1e1<<1<<1)+([]+{111:1111}+[]
)[11111.1%11.1*111e11|!11]+({}+/W/)[1+~1e1-(~11*1.1<<1)]+(+[[]+(1|1>>1)+(1|1>>1|1)+(11-1
>>1)+(1e1>>1|1)+(1e1>>1)+(1>>11)+(11>>>1)])[[(!!{}+[])[11>>>11]+[[]+{}][.1^!1][111%11]]+
([11/[]+[]][111%111][([{}]+[{}])[1e1>>1]+[[],[{}]+[{}]][1|1>>1|1][1|[]]+([][11]+[])[[]+1
]+[{},1e1,![1]+/~/][1<<!1<<1][1<<1^1]+(1/!1+{})[11+1>>1]+[!!/-/+{}][+(111>111)][111%11]+
([][11]+/&/)[1&1>>1]+[{},[]+{}+[],1][[]+1][11-~1+11>>1]+([]+!!/-/)[11>>11]+([]+{})[1|1>>
1|1]+[[]+!!{}][1>>>1][1&11]]+[])[(!{}+[])[1^1<<1]+[/=/,[]+[][1]][1<<1>>1][!111+!111]+([]
+{}+[])[1<<1^1>>1]+[1,![11]+[]][1|1>>1][1|1<<1|1]+(11/[]+/1/)[-~11>>1]+[!![111]+{}][+[]]
[1|1>>1]]((1e1-1)+((1&1>>1)==([]+/-/[(!!{}+{})[+(1>1)]+(!!/-/+{})[1|1<<1]+(!1+{})[1|1<<1
|1]+(!!/-/+{})[11.11>>11.11]])[1&1>>1]),1-~1<<1)](~1-~1e1<<1<<1)+(/^!/+[])[1+!![11%111]]

console.log('Hello World')

code is WTF

'3' + 1 // '31'
'3' - 1 // 2
'222' - -'111' // '333' (⊙﹏⊙)

function laugh()
{
  return
  {
    haha: "ha!"
  }
}

laugh() // should I laugh or … undefined? (>__<)

wtfjs.com

code 18

18 pouces, la distance moyenne
entre un écran et son utilisateur…

Problem Exists Between Keyboard And Chair

PEBKAC

Problem In Chair, Not In Computer

PICNIC

ID-10T error

Linter ?

De l'anglais lint : “touffe hirsute”
(ou peluche, bouloche)

Linter ?

De l'anglais lint : “touffe hirsute”
(ou peluche, bouloche).

Un des premiers outils d'analyse statique de code source en langage C.

Analyse statique ?

L'analyse statique, à la différence du débogage, permet d'obtenir des informations sur le fonctionnement d'un programme lors de son exécution sans réellement l'exécuter.

Des informations ?

- Erreurs de syntaxe

- Erreurs de conception

- Erreurs de style

Alerte

code nazi !

Une question

de goût ?

Certes, mais pas que !

Pré-débogage, code review, pair programming, utilisation ou contribution à des projets open source, maintenabilité, qualité, évolutivité, …

Approfondir sa maîtrise des langages.

QQC

quoi, quand, comment

À chacun son linter

Des linters pour presque tous les languages.

Et plusieurs linters pour un même language !

Sass Lint, ESLint, Markdown lint, PHPLint, PHP_CodeSniffer, RuboCop, …

ESLint, JSHint, JSLint, JSCS

Un projet, un linter

1. Installer le linter qui sera accessible
via la ligne de commande.

npm i -D eslint

Sous forme de package npm, de gem Ruby, d'extension Pearl, etc…

Un projet, un linter

2. Créer une configuration ou
récupérer / modifier une existante.

.eslintrc.json

Plusieurs projets ou communautés partagent leurs guidelines ou "coding standards"
(Airbnb, Google, WordPress, Drupal, The Guardian, …)

Lint my code !

1. Dès que vous commencez à coder, dans votre éditeur !

2. Avant de déployer, via votre workflow.

gulp, npm scripts, webpack, CI, …

Choisir son linter

Quelques critères

- Intégration éditeur + workflow
- Documentation (+ messages d'erreurs)
- Configuration(s)
- Possibilités de désactivation

Démo ?

Thanks

Merci de votre attention !
… et rendez-vous au bar 🍻

@thierrymichel