🚀 Welcome to my new awesome training project!

Start a new NPM project

• npm init
• package.json and package-lock.json

Bundling with Webpack

• npm i --save-dev webpack webpack-cli
• npx webpack init
• Installs:
  • Transpiler + Polyfills: Babeljs, babel-loader
  • CSS: style-loader, css-loader, mini-css-extract-plugin
  • HTML: html-webpack-plugin
  • Web Dev: webpack-dev-server
• webpack.config.js

Linting with ESLint

• npm i --save-dev eslint
• npx eslint --init
• .eslintrc.json
• Installed plug-in eslint-config-prettier essentially turning off code styling through eslint.

Code Styling with Prettier

• npm i --save-dev prettier
• .prettierrc.json

Unit Test with Jest

• Install jest babel-jest @babel/plugin-transform-modules-commonjs
• Add transform to webpack.config.js
• Add plugin to .babelrc.json

Versioning with Git

• Ignore file extensions: .gitattributes
• Ignore directories: .gitignore

Code Editing with VSCode for Workspaces

• Install Fira Code for pretty fonts and ligatures:

  • Download the zip file, click on all ttf fonts to install.

• training.code-workspace using:

  • Recommended Extensions
  • Multi-root folders
  • Custom settings

Learning Resources:

State of JS State of CSS Web Hypertext Application Technology Working Type Acquisition