From 005f73eba27c37cd9702f38da445eda455d9acc4 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sat, 11 May 2024 00:49:38 +0100 Subject: [PATCH 01/20] Write introduction to second Webpack lesson Co-authored-by: advait0603 --- .../revisiting_webpack.md | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 javascript/organizing_your_javascript_code/revisiting_webpack.md diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md new file mode 100644 index 00000000000..a9726cf6c0a --- /dev/null +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -0,0 +1,33 @@ +### Introduction + +Great job working through the Restaurant Page! Setting up and using Webpack with all of its loaders and plugins may have seemed tedious, and you may even still wonder what the point of it all is. As you keep going, a lot of this will become more natural to you, and hopefully these fundamental concepts can help you with problems that are yet to come! + +Now that you've played around with Webpack a little, let's have a look at a few things that can help to improve the setup experience and your development workflow. Some of these things aren't just limited to Webpack, but are things you can continue to use with other tools as you progress. + +### Lesson overview + +This section contains a general overview of topics that you will learn in this lesson. + +- How to write and run npm scripts. +- What Webpack modes are and how to automate switching between modes as required. +- How to create and use template repositories. + +### CUSTOM SECTION HEADING + +### Assignment + +
+ +
+ +### Knowledge check + +The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge. + +- [A KNOWLEDGE CHECK QUESTION](A-KNOWLEDGE-CHECK-URL) + +### Additional resources + +This section contains helpful links to related content. It isn't required, so consider it supplemental. + +- It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum. From a7f8a95e4462aa9c11b85ba9a73c9ec5f1d03f85 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sat, 11 May 2024 01:52:48 +0100 Subject: [PATCH 02/20] Write npm scripts section --- .../revisiting_webpack.md | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index a9726cf6c0a..f50c8c22393 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -12,7 +12,27 @@ This section contains a general overview of topics that you will learn in this l - What Webpack modes are and how to automate switching between modes as required. - How to create and use template repositories. -### CUSTOM SECTION HEADING +### npm scripts + +While `npx webpack` and `npx webpack serve` aren't particularly long commands to type, you may have encountered `git subtree push --prefix dist origin gh-pages` in the Restaurant Page project. You surely won't want to be typing that out every time you need to use it. + +Fortunately, we can write npm scripts in our `package.json` file by adding a `"scripts"` property containing an object of scripts. Scripts can be written in the form `"name": "command"`, and are executed by running `npm run ` in the terminal. For example: + +```json +{ + // ... other package.json stuff + "scripts": { + "build": "webpack", + "dev": "webpack serve", + "deploy": "git subtree push --prefix dist origin gh-pages" + }, + // ... other package.json stuff +} +``` + +We have three npm scripts here. Running `npm run build` would be the same as running `npx webpack` (which you may have seen in the Webpack guides from the previous Webpack lesson), `npm run dev` would be the same as `npx webpack serve`, and `npm run deploy` would just run `git subtree push --prefix dist origin gh-pages` for us. Not only can we save time sometimes, it's nice to have sensible and somewhat standardised names for our commands. `npm run build` often contains a tool's command for building/bundling/compiling. `npm run dev` is often used to start a dev server etc. Names might not always be the same, but they can explain their purposes better than `npx webpack`. + +Note that we drop the `npx` from the start of the `webpack` and `webpack serve` commands when setting them as scripts, as we only needed `npx` to run them directly in the terminal without npm scripts. ### Assignment From 878ea4e44cd401bb693ffb7a180b650b1d9323d8 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sat, 11 May 2024 03:29:15 +0100 Subject: [PATCH 03/20] Write webpack modes section --- .../revisiting_webpack.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index f50c8c22393..a74900b73a5 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -34,6 +34,21 @@ We have three npm scripts here. Running `npm run build` would be the same as run Note that we drop the `npx` from the start of the `webpack` and `webpack serve` commands when setting them as scripts, as we only needed `npx` to run them directly in the terminal without npm scripts. +### Webpack modes + +So far, we've stuck with using Webpack in development mode which is naturally most suitable for when we're working on development. However, when we come to build our projects for deployment, the dedicated production mode does some different optimizations for us. Try it! You can go to your Restaurante Page project, change the mode to `"production"` in `webpack.config.js` then run your build command again. Have a look at the glorious result in your JavaScript bundle. + +We *really* do not need to know exactly what optimizations have been applied nor any other specifics of production mode, but it's nice to be aware that the two modes exist and are designed for specific things. + +To save you from having to manually edit your configuration file every time you wish to switch modes (e.g. before bundling into `dist` or before going back to use your dev server), you can have two different configuration files, e.g. `webpack.dev.js` and `webpack.prod.js`, then have your build and dev npm scripts specify which configuration files to use (omitting the `--config` option makes Webpack search for `webpack.config.js` by default): + +```json +"build": "webpack --config webpack.prod.js", +"dev": "webpack serve --config webpack.dev.js" +``` + +In the assignment, we will introduce a tool called `webpack-merge` that can make using multiple Webpack configuration files easier to deal with and with minimal duplication. Doing it this way is nice. We set up once, then we can forget about it since each script will use the appropriate configuration file and mode! + ### Assignment
From a08efaa35b9032b1842dd6222235842739de9e1d Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sat, 11 May 2024 03:32:43 +0100 Subject: [PATCH 04/20] Add template repository section to second Webpack lesson --- .../organizing_your_javascript_code/revisiting_webpack.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index a74900b73a5..2c5595ae40f 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -49,6 +49,14 @@ To save you from having to manually edit your configuration file every time you In the assignment, we will introduce a tool called `webpack-merge` that can make using multiple Webpack configuration files easier to deal with and with minimal duplication. Doing it this way is nice. We set up once, then we can forget about it since each script will use the appropriate configuration file and mode! +### Template repositories + +One thing you might have noticed already is that setting up Webpack involvs a fair few files and configuration. Each time you set up a new project with Webpack, you may have to look at what you configured before to copy and paste the configuration you want to reuse. You may also have noticed that whenever you create a new repository on Github, there is an option near the top for a `Repository template`. + +This is where template repositories can come very much in handy. Any of your existing repositories can be converted to a template in its settings (right under where you can rename the repository, there is a checkbox for whether the repository is a template or not). If you check this box, congratulations, that's all you need to do! Now when you go to create a new repository, the `Repository template` dropdown will list any templates for you to select. Selecting one will mean your new repository will be a copy of the chosen template, not an empty one! + +You may not know for sure what you might want or need in a template, but when you find yourself reusing a lot of setup code for multiple projects, you can make a new repository with all of the setup code you need then mark it as a template. Now you can select that template when creating a new project repository to save time, letting you dive into working on the project itself sooner! + ### Assignment
From 5ff617eef96ee51c990dbec9277238872e6a8c12 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sat, 11 May 2024 03:34:47 +0100 Subject: [PATCH 05/20] Remove template repo section and mentions from Linting lesson Content now moved to the new second Webpack lesson --- javascript/javascript_in_the_real_world/linting.md | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/javascript/javascript_in_the_real_world/linting.md b/javascript/javascript_in_the_real_world/linting.md index bcb24be580d..d3d833f61c7 100644 --- a/javascript/javascript_in_the_real_world/linting.md +++ b/javascript/javascript_in_the_real_world/linting.md @@ -1,6 +1,6 @@ ### Introduction -Before we dive all the way into the Code, we are going to take a moment to improve your editor setup and overall productivity. Doing this now will make things much easier for you going forward. This lesson will give you some information about code style, and then give you some tools to help you maintain consistent code-style throughout your projects. In some cases it can even help adjust things like indentation for you! We will also introduce template repositories which can save you time setting up projects that share a lot of configuration with other projects. +Before we dive all the way into the Code, we are going to take a moment to improve your editor setup and overall productivity. Doing this now will make things much easier for you going forward. This lesson will give you some information about code style, and then give you some tools to help you maintain consistent code-style throughout your projects. In some cases it can even help adjust things like indentation for you! ### Lesson overview @@ -8,7 +8,6 @@ This section contains a general overview of topics that you will learn in this l - Learn about style guides and why they are important. - Set up a linter and prettier to make your code better. -- Learn what template repositories are and how to set one up. ### Style guides @@ -54,14 +53,6 @@ Using prettier makes coding faster and easier! You don't have to worry about nai We **highly** recommend that you install ESlint and Prettier and use them for all future projects. It will make your code easier to read, both for yourself and for anyone else looking at it. There is no special setup needed apart from installing both of them. -### Template repositories - -With the last few projects, you might have felt that setting up Webpack involved a fair few files and configuration, and that you may have had to look at what you configured before to copy and paste the configuration you want to reuse. You may also have noticed that whenever you create a new repository on Github, there is an option near the top for a `Repository template`. - -This is where template repositories can come very much in handy. Any of your existing repositories can be converted to a template in its settings (right under where you can rename the repository, there is a checkbox for whether the repository is a template or not). If you check this box, congratulations, that's all you need to do! Now when you go to create a new repository, the `Repository template` dropdown will have any templates listed for you to select. Selecting one will mean your new repository will be a copy of the chosen template, not an empty one! - -If you find yourself reusing a lot of setup code for multiple projects, you can make a new repository with all of the setup code you need then mark it as a template. Now you can select that template when creating a new project repository to save time getting set up, letting you dive into working on the project itself sooner! - ### Knowledge check The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge. @@ -69,7 +60,6 @@ The following questions are an opportunity to reflect on key topics in this less - [What is linting?](https://mikecavaliere.com/javascript-linting-what-developers-need-to-know/) - [Which problems can linting prevent?](https://mikecavaliere.com/javascript-linting-what-developers-need-to-know/) - [Why should you use Prettier?](https://www.youtube.com/watch?v=hkfBvpEfWdA) -- [What is a template repository?](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository) ### Additional resources From 320148a76ca211077bc507cf63ad94138f4c4a3b Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sat, 11 May 2024 03:59:41 +0100 Subject: [PATCH 06/20] Add assignment steps --- .../organizing_your_javascript_code/revisiting_webpack.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index 2c5595ae40f..67bc49e8a44 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -61,6 +61,10 @@ You may not know for sure what you might want or need in a template, but when yo
+1. Read [a little more about npm scripts](https://www.knowledgehut.com/blog/web-development/package-json-scripts-node-js). This article goes a little further than what you might find yourself needing to use for a while, such as pre/post and lifecycle scripts, but it's good to be aware of what things are possible with the tools you have. +1. Read through [Webpack's "Production" guide](https://webpack.js.org/guides/production/) where they walk you through how to use `webpack-merge` and split your configuration file. The exact code examples they've used in that guide follow on from a previous part of a longer tutorial they have, but the main parts about `webpack-merge` and splitting the configuration file should still be followable with a new project, or you can even try converting your Restaurant Page project to do things this way! + - You can ignore the "Specify the Mode" section and its examples. +
### Knowledge check From 0239b133e3029143b67b59702837e88b924c6f04 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sat, 11 May 2024 04:03:49 +0100 Subject: [PATCH 07/20] Add KC questions to second Webpack lesson --- .../organizing_your_javascript_code/revisiting_webpack.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index 67bc49e8a44..950a1f2f048 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -71,7 +71,11 @@ You may not know for sure what you might want or need in a template, but when yo The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge. -- [A KNOWLEDGE CHECK QUESTION](A-KNOWLEDGE-CHECK-URL) +- [Where do npm scripts live?](#npm-scripts) +- [How do you define and run npm scripts?](#npm-scripts) +- [What are the two Webpack modes?](#webpack-modes) +- [What tool allows you split your webpack configuration file with minimal duplication?](https://webpack.js.org/guides/production/) +- [What is a template repository and how would you create one?](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository) ### Additional resources From b9af22faa3831835e69131c8c12290551bbb7b86 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sat, 11 May 2024 15:26:11 +0100 Subject: [PATCH 08/20] Fix grammar/spelling and streamline verbiage --- .../revisiting_webpack.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index 950a1f2f048..9bb55e318ca 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -30,32 +30,32 @@ Fortunately, we can write npm scripts in our `package.json` file by adding a `"s } ``` -We have three npm scripts here. Running `npm run build` would be the same as running `npx webpack` (which you may have seen in the Webpack guides from the previous Webpack lesson), `npm run dev` would be the same as `npx webpack serve`, and `npm run deploy` would just run `git subtree push --prefix dist origin gh-pages` for us. Not only can we save time sometimes, it's nice to have sensible and somewhat standardised names for our commands. `npm run build` often contains a tool's command for building/bundling/compiling. `npm run dev` is often used to start a dev server etc. Names might not always be the same, but they can explain their purposes better than `npx webpack`. +We have three npm scripts here. Running `npm run build` would be the same as running `npx webpack` (which you may have seen in the Webpack guides from the previous Webpack lesson), `npm run dev` would be the same as `npx webpack serve`, and `npm run deploy` would just run `git subtree push --prefix dist origin gh-pages` for us. Not only can we sometimes save time, it's also nice to have sensible and somewhat standardized names for our commands. `npm run build` often contains a tool's command for building/bundling/compiling. `npm run dev` is often used to start a dev server, etc. Names might not always be the same, but they can explain their purposes better than `npx webpack`. Note that we drop the `npx` from the start of the `webpack` and `webpack serve` commands when setting them as scripts, as we only needed `npx` to run them directly in the terminal without npm scripts. ### Webpack modes -So far, we've stuck with using Webpack in development mode which is naturally most suitable for when we're working on development. However, when we come to build our projects for deployment, the dedicated production mode does some different optimizations for us. Try it! You can go to your Restaurante Page project, change the mode to `"production"` in `webpack.config.js` then run your build command again. Have a look at the glorious result in your JavaScript bundle. +So far, we've stuck with using Webpack in development mode, which is naturally most suitable for when we're working on development. However, when we come to build our projects for deployment, the dedicated production mode does some different optimizations for us. Try it! You can go to your Restaurant Page project, change the mode to `"production"` in `webpack.config.js`, then run your build command again. Have a look at the JavaScript bundle in `dist` to see an even more glorious jumble of characters! -We *really* do not need to know exactly what optimizations have been applied nor any other specifics of production mode, but it's nice to be aware that the two modes exist and are designed for specific things. +We *really* do not need to know exactly what optimizations have been applied, nor do we need to know about any other specifics of production mode, but it's nice to be aware that the two modes exist and are designed for specific things. -To save you from having to manually edit your configuration file every time you wish to switch modes (e.g. before bundling into `dist` or before going back to use your dev server), you can have two different configuration files, e.g. `webpack.dev.js` and `webpack.prod.js`, then have your build and dev npm scripts specify which configuration files to use (omitting the `--config` option makes Webpack search for `webpack.config.js` by default): +To save you from having to manually edit your configuration file every time you wish to switch modes, such as before bundling into `dist` or before going back to use your dev server, you can have two different configuration files (e.g. `webpack.dev.js` and `webpack.prod.js`), and then have your build and dev npm scripts specify which configuration files to use (omitting the `--config` option makes Webpack search for `webpack.config.js` by default): ```json "build": "webpack --config webpack.prod.js", "dev": "webpack serve --config webpack.dev.js" ``` -In the assignment, we will introduce a tool called `webpack-merge` that can make using multiple Webpack configuration files easier to deal with and with minimal duplication. Doing it this way is nice. We set up once, then we can forget about it since each script will use the appropriate configuration file and mode! +In the assignment, we will introduce a tool called `webpack-merge` that can make using multiple Webpack configuration files easier to deal with and with minimal duplication. Doing it this way is nice. We set it up once, then we can forget about it since each script will use the appropriate configuration file and mode! ### Template repositories -One thing you might have noticed already is that setting up Webpack involvs a fair few files and configuration. Each time you set up a new project with Webpack, you may have to look at what you configured before to copy and paste the configuration you want to reuse. You may also have noticed that whenever you create a new repository on Github, there is an option near the top for a `Repository template`. +One thing you might have noticed already is that setting up Webpack involves multiple files and directories, and a fair bit of configuration. Each time you set up a new project with Webpack, you may have to look at what you configured before to copy and paste the configuration you want to reuse. You may also have noticed that whenever you create a new repository on Github, there is an option near the top for a `Repository template`. -This is where template repositories can come very much in handy. Any of your existing repositories can be converted to a template in its settings (right under where you can rename the repository, there is a checkbox for whether the repository is a template or not). If you check this box, congratulations, that's all you need to do! Now when you go to create a new repository, the `Repository template` dropdown will list any templates for you to select. Selecting one will mean your new repository will be a copy of the chosen template, not an empty one! +This is where template repositories can really come in handy. Any of your existing repositories can be converted to a template in its settings (right under where you can rename the repository, there is a checkbox for whether the repository is a template or not). If you check this box, congratulations! That's all you need to do. Now, when you go to create a new repository, the `Repository template` dropdown will list any templates for you to select. Selecting one will mean your new repository will be a copy of the chosen template, not an empty one! -You may not know for sure what you might want or need in a template, but when you find yourself reusing a lot of setup code for multiple projects, you can make a new repository with all of the setup code you need then mark it as a template. Now you can select that template when creating a new project repository to save time, letting you dive into working on the project itself sooner! +You may not know for sure what you might want or need in a template, but when you find yourself reusing a lot of setup code for multiple projects, you can make a new repository with all of the setup code you need and mark it as a template. Now you can select that template when creating a new project repository to save time, letting you dive into working on the project itself sooner! ### Assignment @@ -74,8 +74,8 @@ The following questions are an opportunity to reflect on key topics in this less - [Where do npm scripts live?](#npm-scripts) - [How do you define and run npm scripts?](#npm-scripts) - [What are the two Webpack modes?](#webpack-modes) -- [What tool allows you split your webpack configuration file with minimal duplication?](https://webpack.js.org/guides/production/) -- [What is a template repository and how would you create one?](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository) +- [What tool allows you to split your Webpack configuration file with minimal duplication?](https://webpack.js.org/guides/production/) +- [What is a template repository, and how would you create one?](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository) ### Additional resources From ee600cc5004740b2c71bc9116ad4efe0c9cc73f9 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sun, 12 May 2024 00:44:09 +0100 Subject: [PATCH 09/20] Add summary section --- .../organizing_your_javascript_code/revisiting_webpack.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index 9bb55e318ca..011ee5a5556 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -57,6 +57,12 @@ This is where template repositories can really come in handy. Any of your existi You may not know for sure what you might want or need in a template, but when you find yourself reusing a lot of setup code for multiple projects, you can make a new repository with all of the setup code you need and mark it as a template. Now you can select that template when creating a new project repository to save time, letting you dive into working on the project itself sooner! +### Rounding up + +There is *a lot* more to Webpack and bundlers that we have not touched; we've only scratched the surface! Much of the inner workings and more advanced features like code splitting and tree shaking are out of the scope of this curriculum. However, no doubt that when a time comes where you actually need to understand those things a particular task, you will be more than capable of learning what you need. + +For now, keep this workflow when dealing with multiple JavaScript modules and dependencies. Later on in the curriculum, we will introduce different tools that abstract some of these concepts away and handle some of these configurations and optimizations for us. It's useful to be aware of what sort of things these tools are actually doing to your code. + ### Assignment
From 96a75722edf75d3fc4573ada08e5fa5ba14a0fd3 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sun, 12 May 2024 00:46:15 +0100 Subject: [PATCH 10/20] Specify use of webpack for browser code --- .../organizing_your_javascript_code/revisiting_webpack.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index 011ee5a5556..0341875dcc9 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -61,7 +61,7 @@ You may not know for sure what you might want or need in a template, but when yo There is *a lot* more to Webpack and bundlers that we have not touched; we've only scratched the surface! Much of the inner workings and more advanced features like code splitting and tree shaking are out of the scope of this curriculum. However, no doubt that when a time comes where you actually need to understand those things a particular task, you will be more than capable of learning what you need. -For now, keep this workflow when dealing with multiple JavaScript modules and dependencies. Later on in the curriculum, we will introduce different tools that abstract some of these concepts away and handle some of these configurations and optimizations for us. It's useful to be aware of what sort of things these tools are actually doing to your code. +For now, keep this workflow when dealing with multiple JavaScript modules and dependencies for code that runs in the browser. Later on in the curriculum, we will introduce different tools that abstract some of these concepts away and handle some of these configurations and optimizations for us. It's useful to be aware of what sort of things these tools are actually doing to your code. ### Assignment From fbc2cbd34aedb7debc85106569b8a6fbc711a852 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sun, 12 May 2024 06:02:00 +0100 Subject: [PATCH 11/20] Remove round up section Forgot that the first webpack lesson rewrite has a round up section which this was basically a duplicate of. The exact contents better suits how it's placed in the first lesson, so this lesson's one is to be removed. --- .../organizing_your_javascript_code/revisiting_webpack.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index 0341875dcc9..9bb55e318ca 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -57,12 +57,6 @@ This is where template repositories can really come in handy. Any of your existi You may not know for sure what you might want or need in a template, but when you find yourself reusing a lot of setup code for multiple projects, you can make a new repository with all of the setup code you need and mark it as a template. Now you can select that template when creating a new project repository to save time, letting you dive into working on the project itself sooner! -### Rounding up - -There is *a lot* more to Webpack and bundlers that we have not touched; we've only scratched the surface! Much of the inner workings and more advanced features like code splitting and tree shaking are out of the scope of this curriculum. However, no doubt that when a time comes where you actually need to understand those things a particular task, you will be more than capable of learning what you need. - -For now, keep this workflow when dealing with multiple JavaScript modules and dependencies for code that runs in the browser. Later on in the curriculum, we will introduce different tools that abstract some of these concepts away and handle some of these configurations and optimizations for us. It's useful to be aware of what sort of things these tools are actually doing to your code. - ### Assignment
From 46cd29a00529990cb6d607f7ee7e27e95faf8382 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Fri, 28 Jun 2024 18:09:24 +0100 Subject: [PATCH 12/20] Add linting lesson assignment section Follows lesson file structure as prescribed by our style guide. Some resources from the main contents have been moved to assigned reading. Removed "JavaScript Linters" resource due to duplicate information, and it also makes an explicit recommendation that differs from our lesson contents, which can cause confusion. --- .../javascript_in_the_real_world/linting.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/javascript/javascript_in_the_real_world/linting.md b/javascript/javascript_in_the_real_world/linting.md index 03ab7616578..b4a5d83b711 100644 --- a/javascript/javascript_in_the_real_world/linting.md +++ b/javascript/javascript_in_the_real_world/linting.md @@ -21,9 +21,6 @@ Code style is important! Having a consistent set of style rules for things such The style guides we mentioned above are full of really helpful advice for formatting, organizing and composing your code. But there are a *lot* of rules - it can be difficult to internalize them all. **Linters** are tools that will scan your code with a set of style rules and will report any errors to you that they find. In some cases, they can even auto-fix the errors! The following articles explain in more detail the benefits of using a linter while you code. -1. This article on [JavaScript linters](https://gomakethings.com/javascript-linters/) gets right to the point... start here! -1. Read this article that goes a little further by discussing exactly [*how* linters do what they do](https://hackernoon.com/how-linting-and-eslint-improve-code-quality-fa83d2469efe). - There are multiple options for linting your JavaScript, but the most popular (and most common in the industry) is [ESLint](https://eslint.org/). Getting it installed and the initial set-up is straightforward. 1. [The official 'Getting Started' page](https://eslint.org/docs/user-guide/getting-started) is a good place to start. It covers installation and basic setup. The basic way to use this tool is to run the `eslint` command in your terminal with a specific file. @@ -47,8 +44,6 @@ For the time being, if you wish to use airbnb's style guide with ESLint, you wil Prettier is *awesome*. It is similar to a linter, but serves a slightly different function. Prettier will take your JS code and then automatically format it according to a set of rules. Unlike a linter, it's not looking for style errors, but specifically targeting the layout of your code and making intelligent decisions about things like spaces, indentation levels and line-breaks. -1. Watch this [short intro to Prettier](https://www.youtube.com/watch?v=hkfBvpEfWdA) by its creator. -1. Go to [Prettier's online playground](https://prettier.io/playground) and give it a test drive. Go ahead and copy/paste some of your old JavaScript code into that editor and see what happens. 1. Prettier has [instructions for setting up and configuring the VSCode Prettier extension](https://github.com/prettier/prettier-vscode). Using prettier makes coding faster and easier! You don't have to worry about nailing things like indentation, or remembering every semi-colon because prettier will take care of those details for you. @@ -61,6 +56,16 @@ For most people using the default ESLint ruleset, there will be no special setup Some community plugins, such as [eslint-config-airbnb-base](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base), turn on some stylistic rules that may clash with what Prettier formats. If you wish to use a plugin like `eslint-config-airbnb-base` and Prettier together, you will also need to install [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) which will turn off any of the ESLint rules that clash with Prettier. If you are using the default ESLint ruleset, you will not need this. +### Assignment + +
+ +1. Read this article that goes more into [the value of linters and how they work](https://hackernoon.com/how-linting-and-eslint-improve-code-quality-fa83d2469efe). +1. Watch this [short intro to Prettier](https://www.youtube.com/watch?v=hkfBvpEfWdA) by its creator. +1. Go to [Prettier's online playground](https://prettier.io/playground) and give it a test drive. Go ahead and copy/paste some of your old JavaScript code into that editor and see what happens. + +
+ ### Knowledge check The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge. From a22829c4420160e79e4cb399a5a87c96a5b03793 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Fri, 28 Jun 2024 18:39:28 +0100 Subject: [PATCH 13/20] Frame section on Prettier more generally about code formatters More consistent with "Linting" section, as opposed to "ESLint" section. Prettier installation guide added to be more consistent with ESLint links in the Linting section. Knowledge check questions amended to account for this change. Capitalisation nits. --- .../javascript_in_the_real_world/linting.md | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/javascript/javascript_in_the_real_world/linting.md b/javascript/javascript_in_the_real_world/linting.md index b4a5d83b711..3edb4be4311 100644 --- a/javascript/javascript_in_the_real_world/linting.md +++ b/javascript/javascript_in_the_real_world/linting.md @@ -19,13 +19,12 @@ Code style is important! Having a consistent set of style rules for things such ### Linting -The style guides we mentioned above are full of really helpful advice for formatting, organizing and composing your code. But there are a *lot* of rules - it can be difficult to internalize them all. **Linters** are tools that will scan your code with a set of style rules and will report any errors to you that they find. In some cases, they can even auto-fix the errors! The following articles explain in more detail the benefits of using a linter while you code. +The style guides we mentioned above are full of really helpful advice for formatting, organizing and composing your code. But there are a *lot* of rules - it can be difficult to internalize them all. **Linters** are tools that will scan your code with a set of style rules and will report any errors to you that they find. In some cases, they can even auto-fix the errors! There are multiple options for linting your JavaScript, but the most popular (and most common in the industry) is [ESLint](https://eslint.org/). Getting it installed and the initial set-up is straightforward. 1. [The official 'Getting Started' page](https://eslint.org/docs/user-guide/getting-started) is a good place to start. It covers installation and basic setup. The basic way to use this tool is to run the `eslint` command in your terminal with a specific file. - You may also want to look at the [docs on configuring ESLint](https://eslint.org/docs/latest/use/configure/) for a list of options that you can change. - 1. There is an [ESLint extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) with which you can get automatic lint highlighting for your files as you write, without you needing to rerun the `eslint` command every time. If your project also contains an ESLint configuration file, the extension will automatically use those rules for that project. **You will also need to enable `Eslint: Use Flat Config` in VSCode's settings.**
@@ -34,19 +33,22 @@ There are multiple options for linting your JavaScript, but the most popular (an The above ESLint doc links take you to the docs for v9, which was released in April 2024. v9 came with a lot of big changes, including forcing all ESLint config files to use the "flat config" format (`eslint.config.(m|c)js`). -Because of these changes, some community plugins like [eslint-config-airbnb-base](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base) (which makes ESLint use airbnb's ruleset) have not yet been able to release a version that supports v9 or flat config. +Because of these changes, some community plugins like [eslint-config-airbnb-base](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base) (which makes ESLint use Airbnb's ruleset) have not yet been able to release a version that supports v9 or flat config. -For the time being, if you wish to use airbnb's style guide with ESLint, you will need to use [ESLint's v8.57 version of the docs](https://eslint.org/docs/v8.x/use/getting-started) and make sure you use one of the older [eslintrc configuration file formats](https://eslint.org/docs/v8.x/use/configure/configuration-files), **not** the newer flat config format. You must then also make sure that `Eslint: Use Flat Config` is **unchecked** in VSCode's settings. +For the time being, if you wish to use Airbnb's style guide with ESLint, you will need to use [ESLint's v8.57 version of the docs](https://eslint.org/docs/v8.x/use/getting-started) and make sure you use one of the older [eslintrc configuration file formats](https://eslint.org/docs/v8.x/use/configure/configuration-files), **not** the newer flat config format. You must then also make sure that `Eslint: Use Flat Config` is **unchecked** in VSCode's settings.
-### Prettier +### Formatters + +Formatters are *awesome*. They are similar to linters, but serve a slightly different function. Formatters take your JavaScript code and then automatically format it according to a set of rules. Unlike linters, they do not look for style errors, but specifically target the layout of your code, making intelligent decisions about things like spaces, indentation levels and line-breaks. -Prettier is *awesome*. It is similar to a linter, but serves a slightly different function. Prettier will take your JS code and then automatically format it according to a set of rules. Unlike a linter, it's not looking for style errors, but specifically targeting the layout of your code and making intelligent decisions about things like spaces, indentation levels and line-breaks. +As usual, there are multiple formatters out there. [Prettier](https://prettier.io/) is a very popular choice that is highly opinionated. Besides a few options, most of its formatting decisions are not customizable. Since many of these decisions have been made for you, this reduces the time spent deciding on things like indentation size or spacing, and more time on the problems that actually matter. -1. Prettier has [instructions for setting up and configuring the VSCode Prettier extension](https://github.com/prettier/prettier-vscode). +1. Read [Prettier's installation guide](https://www.youtube.com/watch?v=hkfBvpEfWdA) for installing it as a dependency in your projects. +1. Prettier also has [instructions for setting up and configuring the VSCode Prettier extension](https://github.com/prettier/prettier-vscode). This extension allows you to format with Prettier via Visual Studio Code commands or keybinds instead of commands in the terminal. -Using prettier makes coding faster and easier! You don't have to worry about nailing things like indentation, or remembering every semi-colon because prettier will take care of those details for you. +Using Prettier makes coding faster and easier! You don't have to worry about nailing things like indentation, or remembering every semi-colon because prettier will take care of those details for you. ### Using ESLint and Prettier @@ -70,9 +72,10 @@ Some community plugins, such as [eslint-config-airbnb-base](https://github.com/a The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge. -- [What is linting?](https://gomakethings.com/javascript-linters/) -- [Which problems can linting prevent?](https://gomakethings.com/javascript-linters/) -- [Why should you use Prettier?](https://www.youtube.com/watch?v=hkfBvpEfWdA) +- [What is linting?](#linting) +- [Which problems can linting prevent?](https://hackernoon.com/how-linting-and-eslint-improve-code-quality-fa83d2469efe) +- [What are some of the benefits of using a formatter?](#formatters) +- [What is Prettier?](https://www.youtube.com/watch?v=hkfBvpEfWdA) ### Additional resources From 8c9b9e92be9a7fc789f6f9b7ceba4bc5a363dad3 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Fri, 28 Jun 2024 18:52:05 +0100 Subject: [PATCH 14/20] Explain purpose of linter/formatter project deps Fixed descriptive link text for ESLint --- .../javascript_in_the_real_world/linting.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/javascript/javascript_in_the_real_world/linting.md b/javascript/javascript_in_the_real_world/linting.md index 3edb4be4311..bd822ad329d 100644 --- a/javascript/javascript_in_the_real_world/linting.md +++ b/javascript/javascript_in_the_real_world/linting.md @@ -23,7 +23,7 @@ The style guides we mentioned above are full of really helpful advice for format There are multiple options for linting your JavaScript, but the most popular (and most common in the industry) is [ESLint](https://eslint.org/). Getting it installed and the initial set-up is straightforward. -1. [The official 'Getting Started' page](https://eslint.org/docs/user-guide/getting-started) is a good place to start. It covers installation and basic setup. The basic way to use this tool is to run the `eslint` command in your terminal with a specific file. +1. [ESLint's official 'Getting Started' page](https://eslint.org/docs/user-guide/getting-started) is a good place to start. It covers installation and basic setup. The basic way to use this tool is to run the `eslint` command in your terminal with a specific file. - You may also want to look at the [docs on configuring ESLint](https://eslint.org/docs/latest/use/configure/) for a list of options that you can change. 1. There is an [ESLint extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) with which you can get automatic lint highlighting for your files as you write, without you needing to rerun the `eslint` command every time. If your project also contains an ESLint configuration file, the extension will automatically use those rules for that project. **You will also need to enable `Eslint: Use Flat Config` in VSCode's settings.** @@ -50,6 +50,18 @@ As usual, there are multiple formatters out there. [Prettier](https://prettier.i Using Prettier makes coding faster and easier! You don't have to worry about nailing things like indentation, or remembering every semi-colon because prettier will take care of those details for you. +
+ +#### Extensions and project dependencies + +While the Visual Studio Code extensions for ESLint and Prettier are really convenient, they are local to your machine only. It's good practice to install any linters and formatters as dev dependencies in your projects as well. + +At some point, you may need to work on code with multiple people, and others may not use all of the same tools as you. Therefore, including linters and formatters as dependencies in your project, as well as any rule configuration files, allows everyone access to the same linting and formatting tools and rules. + +Editor extensions can then be used to make linting and formatting more convenient for you. The ESLint and Prettier extensions will recognise and use any rule files in your project. + +
+ ### Using ESLint and Prettier We **highly** recommend that you install ESlint and Prettier and use them for all future projects. It will make your code easier to read, both for yourself and for anyone else looking at it. @@ -76,6 +88,7 @@ The following questions are an opportunity to reflect on key topics in this less - [Which problems can linting prevent?](https://hackernoon.com/how-linting-and-eslint-improve-code-quality-fa83d2469efe) - [What are some of the benefits of using a formatter?](#formatters) - [What is Prettier?](https://www.youtube.com/watch?v=hkfBvpEfWdA) +- [Why should you install linters and/or formatters as dev dependencies in your project?](#extensions-and-project-dependencies) ### Additional resources From d43746380b7ca660b2782ee11d0ddcdaeabea5a2 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sat, 29 Jun 2024 02:38:26 +0100 Subject: [PATCH 15/20] Trigger GitHub actions workflow (empty commit) GitHub outage leading to stalled workflows which were aborted. Unable to manually trigger otherwise. From 5501ee35efbd90c01e79ee97a0282dac1babc5ec Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sun, 30 Jun 2024 00:07:54 +0100 Subject: [PATCH 16/20] Add reminder on template repos to Linting lesson It's both a relevant tip for the lesson, and it helps reduce confusion caused by moving the template repos section to a lesson more than one lesson back (in case someone was at, say, the To-do list project when these changes get merged). --- javascript/javascript_in_the_real_world/linting.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/javascript/javascript_in_the_real_world/linting.md b/javascript/javascript_in_the_real_world/linting.md index bd822ad329d..46c9ffb1c2c 100644 --- a/javascript/javascript_in_the_real_world/linting.md +++ b/javascript/javascript_in_the_real_world/linting.md @@ -70,6 +70,14 @@ For most people using the default ESLint ruleset, there will be no special setup Some community plugins, such as [eslint-config-airbnb-base](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base), turn on some stylistic rules that may clash with what Prettier formats. If you wish to use a plugin like `eslint-config-airbnb-base` and Prettier together, you will also need to install [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) which will turn off any of the ESLint rules that clash with Prettier. If you are using the default ESLint ruleset, you will not need this. +
+ +#### Adding setup to template repositories + +Recall [template repositories](https://www.theodinproject.com/lessons/node-path-javascript-revisiting-webpack#template-repositories)? You can include linter and formatter setup in any of your templates to make things quicker and easier in the future! + +
+ ### Assignment
From 5418d5892ba0d50d584d9ef323b16c652996e228 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sun, 30 Jun 2024 00:11:19 +0100 Subject: [PATCH 17/20] Add co-author for 5501ee3 Co-authored-by: Jack Bogart <73082872+JackBogart@users.noreply.github.com> From 4c0efe6e7a10a4d7b376669b432357a25a7f87b3 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Wed, 10 Jul 2024 12:10:00 +0100 Subject: [PATCH 18/20] Amend verbiage Use more assertive wording --- .../organizing_your_javascript_code/revisiting_webpack.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/javascript/organizing_your_javascript_code/revisiting_webpack.md b/javascript/organizing_your_javascript_code/revisiting_webpack.md index 9bb55e318ca..67310471845 100644 --- a/javascript/organizing_your_javascript_code/revisiting_webpack.md +++ b/javascript/organizing_your_javascript_code/revisiting_webpack.md @@ -14,7 +14,7 @@ This section contains a general overview of topics that you will learn in this l ### npm scripts -While `npx webpack` and `npx webpack serve` aren't particularly long commands to type, you may have encountered `git subtree push --prefix dist origin gh-pages` in the Restaurant Page project. You surely won't want to be typing that out every time you need to use it. +While `npx webpack` and `npx webpack serve` aren't particularly long commands to type, you will have encountered `git subtree push --prefix dist origin gh-pages` in the Restaurant Page project's deployment instructions. You surely won't want to be typing that out every time you need to use it. Fortunately, we can write npm scripts in our `package.json` file by adding a `"scripts"` property containing an object of scripts. Scripts can be written in the form `"name": "command"`, and are executed by running `npm run ` in the terminal. For example: @@ -30,7 +30,7 @@ Fortunately, we can write npm scripts in our `package.json` file by adding a `"s } ``` -We have three npm scripts here. Running `npm run build` would be the same as running `npx webpack` (which you may have seen in the Webpack guides from the previous Webpack lesson), `npm run dev` would be the same as `npx webpack serve`, and `npm run deploy` would just run `git subtree push --prefix dist origin gh-pages` for us. Not only can we sometimes save time, it's also nice to have sensible and somewhat standardized names for our commands. `npm run build` often contains a tool's command for building/bundling/compiling. `npm run dev` is often used to start a dev server, etc. Names might not always be the same, but they can explain their purposes better than `npx webpack`. +We have three npm scripts here. In this case, running `npm run build` would be the same as running `npx webpack` (which you may have seen in the Webpack guides from the previous Webpack lesson), `npm run dev` would be the same as `npx webpack serve`, and `npm run deploy` would run `git subtree push --prefix dist origin gh-pages` for us. Not only can we often save time, it's also nice to have sensible and somewhat standardized names for our commands. `npm run build` often contains a tool's command for building/bundling/compiling. `npm run dev` is often used to start a dev server, etc. Names might not always be the same, but they can explain their purposes better than `npx webpack`. Note that we drop the `npx` from the start of the `webpack` and `webpack serve` commands when setting them as scripts, as we only needed `npx` to run them directly in the terminal without npm scripts. @@ -51,11 +51,11 @@ In the assignment, we will introduce a tool called `webpack-merge` that can make ### Template repositories -One thing you might have noticed already is that setting up Webpack involves multiple files and directories, and a fair bit of configuration. Each time you set up a new project with Webpack, you may have to look at what you configured before to copy and paste the configuration you want to reuse. You may also have noticed that whenever you create a new repository on Github, there is an option near the top for a `Repository template`. +One thing you might have noticed already is that setting up Webpack involves multiple files and directories, and a fair bit of configuration. Each time you set up a new project with Webpack, you may have to look at what you configured before to copy and paste the configuration you want to reuse. You may have also noticed that whenever you create a new repository on Github, there is an option near the top for a `Repository template`. This is where template repositories can really come in handy. Any of your existing repositories can be converted to a template in its settings (right under where you can rename the repository, there is a checkbox for whether the repository is a template or not). If you check this box, congratulations! That's all you need to do. Now, when you go to create a new repository, the `Repository template` dropdown will list any templates for you to select. Selecting one will mean your new repository will be a copy of the chosen template, not an empty one! -You may not know for sure what you might want or need in a template, but when you find yourself reusing a lot of setup code for multiple projects, you can make a new repository with all of the setup code you need and mark it as a template. Now you can select that template when creating a new project repository to save time, letting you dive into working on the project itself sooner! +You may not know for sure what you might want or need in a template, but when you find yourself reusing a lot of setup code for multiple projects, you can make a new repository with all of the setup code you need and mark it as a template, then update it as necessary. Now you can select that template when creating a new project repository to save time, letting you dive into working on the project itself sooner! ### Assignment From e0a03abc2cb5ee68ab5a3dbc7486a3a8f23f96db Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Sun, 14 Jul 2024 13:29:51 +0100 Subject: [PATCH 19/20] Extend justification for installing ESLint as a project dependency --- javascript/javascript_in_the_real_world/linting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/javascript_in_the_real_world/linting.md b/javascript/javascript_in_the_real_world/linting.md index 46c9ffb1c2c..4aeea8ed433 100644 --- a/javascript/javascript_in_the_real_world/linting.md +++ b/javascript/javascript_in_the_real_world/linting.md @@ -58,7 +58,7 @@ While the Visual Studio Code extensions for ESLint and Prettier are really conve At some point, you may need to work on code with multiple people, and others may not use all of the same tools as you. Therefore, including linters and formatters as dependencies in your project, as well as any rule configuration files, allows everyone access to the same linting and formatting tools and rules. -Editor extensions can then be used to make linting and formatting more convenient for you. The ESLint and Prettier extensions will recognise and use any rule files in your project. +Editor extensions can then be used to make linting and formatting more convenient for you. The ESLint and Prettier extensions will recognise and use any rule files in your project. If your open workspace has ESLint installed as a dependency, then the ESLint extension can automatically detect this to apply the right setting for whether to use the flat config or legacy eslintrc format.
From c82470374a3ab2ea89ff5007a35513f070ea9d71 Mon Sep 17 00:00:00 2001 From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> Date: Tue, 6 Aug 2024 13:37:43 +0100 Subject: [PATCH 20/20] Amend intro/style guide verbiage Grammar fix, and slight softening of the intro to style guides. People have mistakenly thought they had to read all style guides top to bottom like novels and memorise all the information there. --- javascript/javascript_in_the_real_world/linting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/javascript/javascript_in_the_real_world/linting.md b/javascript/javascript_in_the_real_world/linting.md index 4aeea8ed433..8458d2fe2ff 100644 --- a/javascript/javascript_in_the_real_world/linting.md +++ b/javascript/javascript_in_the_real_world/linting.md @@ -1,6 +1,6 @@ ### Introduction -Before we dive all the way into the Code, we are going to take a moment to improve your editor setup and overall productivity. Doing this now will make things much easier for you going forward. This lesson will give you some information about code style, and then give you some tools to help you maintain consistent code-style throughout your projects. In some cases it can even help adjust things like indentation for you! +Before we dive further into code, we are going to take a moment to improve your editor setup and overall productivity. Doing this now will make things much easier for you going forward. This lesson will give you some information about code style, and then give you some tools to help you maintain consistent code-style throughout your projects. In some cases it can even help adjust things like indentation for you! ### Lesson overview @@ -11,7 +11,7 @@ This section contains a general overview of topics that you will learn in this l ### Style guides -Code style is important! Having a consistent set of style rules for things such as indentation or preferred quote style makes your code more maintainable and easier to read. There are several popular JavaScript style guides on the net that set standards for these types of things, and a little time spent reading them *will* make you a better developer. +Code style is important! Having a consistent set of style rules for things such as indentation or preferred quote style makes your code more maintainable and easier to read. There are several popular JavaScript style guides on the net that set standards for these types of things, and a little time spent looking through them them *will* make you a better developer. Have a little look at some popular style guides for an idea of what sort of things can be done to improve consistency: 1. The [Airbnb Style Guide](https://github.com/airbnb/javascript) is one of the most popular. It is also very well formatted and easy to read. 1. There is also a [JavaScript style guide used at Google](https://google.github.io/styleguide/jsguide.html).