1
Course Overview: Modern JavaScript Tooling with React
50s
2
Initialize an npm Project and git Repository
4m 5s
3
Add a Project and Push Changes to GitHub with git
6m 1s
4
Install webpack and create a default bundle
9m 18s
5
Explicitly Define an Entry Point with a webpack Configuration File
2m 30s
6
Control the Output of webpack with the mode Setting
3m 27s
7
Transform Modern JavaScript Features with Babel
5m 1s
8
Configure webpack to Load JavaScript Files through Babel with babel-loader
2m 17s
9
Configure babel for React with preset-react
3m 55s
10
Inject a JavaScript bundle into HTML with the HtmlWebpackPlugin
3m 1s
11
Update your Bundle with each File Save with webpack's watch Mode
1m 44s
12
Create Separate webpack Configs for Development and Production with webpack-merge
4m 25s
13
Serve a webpack Bundle while Developing with webpack-dev-server
4m
14
Generate Source Maps through webpack for a Better Debugging Experience with source-map
2m 55s
15
Support Proposed JavaScript Features with Babel Plugins
3m 39s
16
Automatically Import CSS in JavaScript with webpack using style-loader and css-loader
3m 25s
17
Hot Reload a React App in Development with react-hot-loader
6m 23s
18
Avoid Duplicate Commands by Calling one NPM Script from Another
1m 59s
19
Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
5m 52s
20
Externalize Dependencies to be Loaded via CDN with webpack
5m 11s
21
Target specific browsers with babel-preset-env and the babel pollyfill
7m 1s
22
Asynchronously Load webpack Bundles through Code-splitting and React Suspense
4m 10s
23
Run a Simple Test with Jest in a React App
2m 26s
24
Set Up Tests that Render a React Component with Jest and Babel
6m 22s
25
Set up Testing Globals in an Application with Jest
1m 54s
26
Configure Prettier to Automatically Format Code
6m 40s
27
Avoid Common JavaScript Errors with ESLint
8m 59s
28
Check for Accessibility Issues in JSX with the jsx-a11y ESLint Plugin
2m 41s
29
Run Linting, Tests and Prettier in git Hooks with Husky
5m 41s
30
Avoid Deprecated React APIs with React.StrictMode
3m 3s
31
Create an Error Boundary for a React App
4m 9s
32
Define Prop Types for a React Class Component
1m 20s
33
Check for Accessibility Issues in the Browser with react-axe
4m 13s
34
Create a New Project by Cloning the Boilerplate Project
8m 13s

Configure Prettier to Automatically Format Code

JavaScript

Share this video with your friends

Consistent code format can make a project easier to maintain. What that format is can be largely subjective, but rather than spend a bunch of valuable time "bike shedding" over semi-colons or no semis and spaces vs tab, we should just let the tools handle this. In this lesson we'll configure Prettier to format our code for us.

Course

Modern JavaScript Tooling with React

Abhinay

~ 6 years ago

.prettierignore is not working for me. I added the dist there but it's still running the dist/app.bundle.js, when I run npx prettier --write "**/*.js"