@@ -443,7 +443,171 @@ app.use(require('webpack-dev-middleware')(compiler, {
443443
444444#### Sourcemaps
445445
446+ - Maps code back to original source
447+ - Part of our build
448+ - Downloaded if you open developer tools; downloaded only when needed
446449
450+ ## Module #8 : Linting
451+ 452+ ### Why Lint?
453+ 454+ #### Enforce Consistency
455+ 456+ - Curly brace position
457+ - confirm / alert
458+ - Trailing commas
459+ - Globals
460+ - eval
461+ 462+ #### Avoid Mistakes
463+ 464+ - Extra parenthesis
465+ - Overwriting function
466+ - Assignment in conditional
467+ - Missing default case in switch
468+ - debugger / console.log
469+ 470+ #### Linters
471+ 472+ - ##### JSLint
473+ 474+ - Douglas Crockford
475+ - Original
476+ 477+ - ##### JSHint
478+ 479+ - ##### ESLint (author's choice)
480+ 481+ - Defacto Standard
482+ 483+ - ##### TSLint
484+ 485+ - For TypeScript until their is support for it in ESLint
486+ 487+ #### ESLint
488+ 489+ ##### Configuration Formats
490+ 491+ - Five formats allowed
492+ - .eslintrc.js
493+ - .eslintrc.yaml
494+ - .eslintrc.yml
495+ - .eslintrc.json
496+ - .eslintrc
497+ - package.json
498+ 499+ ##### Comparing Configuration Options
500+ 501+ | Dedicated config file | package.json |
502+ | --------------------- | ------------- |
503+ | Not tied to npm | One less file |
504+ 505+ - ` package.json ` - add a new section to package.json
506+ - Note: the block of JSON added to the package.json file is the same block if you go the dedicated config file route.
507+ 508+ ``` javascript
509+ " eslintConfig" : {
510+ " plugins" : [" example"
511+ " env" : {
512+ " example/custom" : true
513+ }
514+ }
515+ ```
516+ 517+ ##### Rules
518+ 519+ As a team go through the available linting rules and decide which ones to include.
520+ 521+ ##### Warnings or Errors (re: Rules)
522+ 523+ | Warning | Error |
524+ | ------------------------------ | ------------------------ |
525+ | Can continue development | Breaks the build |
526+ | Can be ignored | Cannot be ignored |
527+ | Team must agree: Fix warnings | Team is forced to comply |
528+ 529+ ##### Plugins
530+ 531+ ##### Preset
532+ 533+ - From scratch
534+ - ESLint's Recommended (author's recommendation)
535+ - Presets
536+ - airbnb
537+ - standardJS
538+ - XO
539+ 540+ ##### Watching files with ESLint
541+ 542+ - eslint-loader
543+ - Re-lints all files upon save
544+ - Depends upon Webpack
545+ - eslint-watch (author's choice)
546+ - ESLint wrapper that adds file watch
547+ - Not tied to Webpack
548+ - Better warning and error formatting
549+ - Displays clean message
550+ - Easily lint tests and build scripts too
551+ 552+ ##### Linting Experimental Features
553+ 554+ - Run ESLint directly
555+ - Supports ES6 and ES7 natively
556+ - Also supports object spread
557+ - Babel-eslint
558+ - Also lints stage1-stage4 features
559+ 560+ ##### Why Lint via automated build process?
561+ 562+ - Single place to check
563+ - Universal configuration
564+ - Part of continuous integration (CI)
565+ 566+ ##### Linting Plan
567+ 568+ - Use ESLint Recommended rules
569+ - Use ` eslint-watch `
570+ - Add lint configuration to the root of the project via ` .eslintrc.json ` file
571+ - See ` .eslintrc.json ` for details - to override any rules (we do so in the rules section of the file)
572+ 573+ ``` javascript
574+ ...
575+ " exptends" : [
576+ " eslint:recommended"
577+ " plugin:import/errors"
578+ " plugin:import/warnings"
579+ ]
580+ ...
581+ " rules" : {
582+ " no-console" : 1
583+ }
584+ ```
585+ 586+ - Note: To override a rule you need to add the name of the rule and a setting: 0 - Off, 1 - Warning, and 2 - Error
587+ - Add the following to the ` package.json ` file so we can use ESLint via eslint-watch (esw)
588+ 589+ ``` javascript
590+ " scripts" : {
591+ ...
592+ " lint" : " esw webpack.config.* src buildScripts --color"
593+ ...
594+ }
595+ ```
596+ 597+ - Note: This configuration says use our webpack configuration file and watch the src and buildScripts folders
598+ 599+ - Note: If you have an editor with built-in linting capability, disable it at this point so that it doesn't interfere with your specific linting setup here.
600+ 601+ - Now, we add an additional script to package.json in order to tell eslint-watch to continuously watch our files for changes and then add the new script to our start script:
602+ 603+ ``` javascript
604+ " scripts" : {
605+ " start" : " npm-run-all --parallel security-check open:src lint:watch"
606+ ...
607+ " lint:watch" : " npm run lint -- --watch"
608+ ...
609+ }
610+ ```
447611
448612
449613
0 commit comments