w3cj/vue-config

Overue of

---

CJ

Instructor, Sr. Full Stack Developer

at

---

Objectives

• Use the latest features of ECMAScript including CommonJS modules, Classes, Arrow Functions, Template Strings, Destructuring and Method Definitions
• Update the included babel config to use the latest features of es-next
• Add/remove/update rules in the included .eslintrc
• Modify/update and add plugins to the included webpack config

---

---

---

ES2015

• ES6 Features Repo
  • CommonJS modules
    • import
    • export
  • Classes
  • Arrow Functions
  • Template Strings
  • Destructuring
  • Method Definitions

---

---

• Babel configurations are stored in the .babelrc file
• This config is read by the webpack babel-loader
• Includes the env preset and stage-2 preset by default
  • env - Includes all ES2015+ plugins
  • stage-2 - All plugins from stage 2, 3 drafts
• Other presets here
• Include/Exclude Specific Plugins from a preset

---

---

• eslint configurations are stored in the .eslintrc.js file
• Ignored files are stored in the .eslintignore file
• This config is read by the webpack eslint-loader
• Depending on how the project was generated, your config may extend a config like airbnb-base
• Rules can be added/disabled in the rules section

---

• Don't rely on Vue.js to throw a linter error
• Use an eslint plugin for your editor to catch errors before going to the browser

---

---

• Base config is located in build/webpack.base.conf.js
• Development config is located in build/webpack.dev.conf.js
• Production config is located in build/webpack.prod.conf.js
• Rules are run in top down order
• Add a custom plugin

---

Review

• Use the latest features of ECMAScript including CommonJS modules, Classes, Arrow Functions, Template Strings, Destructuring and Method Definitions
• Update the included babel config to use the latest features of es-next
• Add/remove/update rules in the included .eslintrc
• Modify/update and add plugins to the included webpack config

---

Thank you ery much!

---